/*
 *= require dropzone
 */

$theme-color: #234051;

$hover-border-color: #234051;
$hover-background-color: lighten($hover-border-color, 75%);
$link-color: #234051;

$error-text-color: #FFFFFF;
$error-background-color: #BE2626;

$error-progress-color: #BE2626;
$success-progress-color: #008000;

.dropzone {

  /**
   * Vertical Tile Layout
   * +---------------+
   * |               |
   * |               |
   * |      PIC      |
   * |               |
   * |               |
   * |---------------|
   * | ABC     0.1MB |
   * | remove        |
   * +---------------+
   */
  &.dz-layout-vertical_tile {
    transition: border-color 300ms ease-out, background-color 300ms ease-out;
    border-width: 1px;
    padding: 16px;

    &.dz-drag-hover {
      border-color: $hover-border-color;
      background-color: $hover-background-color;
    }

    .dz-preview {
      border: 1px solid #ccc;
      padding: 5px;
      width: 212px;
      box-shadow: 0 2px 5px -1px #aaa;
      margin: 0 16px 0 0;
      box-sizing: border-box;

      &:hover {
        .dz-image img {
          -webkit-transform: none;
          -moz-transform: none;
          -ms-transform: none;
          -o-transform: none;
          transform: none;
          -webkit-filter: none;
          filter: none;
        }
      }

      &.dz-success {
        .dz-progress {
          .dz-upload {
            width: 100%;
            background-color: $success-progress-color;
          }
        }
      }

      &.dz-error {
        .dz-progress {
          .dz-upload {
            width: 100%;
            background-color: $error-progress-color;
          }
        }
      }

      .dz-image {
        border-radius: 0;
        width: 200px;
        height: 175px;
      }

      .dz-progress {
        position: static;
        opacity: 1;
        margin-left: 0;
        width: 100%;
        border-radius: 0;
        border: 0;
        margin-top: 0;
        height: 7px;
        -webkit-animation: none;
        -moz-animation: none;
        -ms-animation: none;
        -o-animation: none;
        animation: none;
        .dz-upload {
          transition: background-color 300ms ease-out, width 100ms linear;
          background-color: $theme-color;
        }
      }

      .dz-details {
        position: static;
        opacity: 1;
        text-align: left;
        padding: 0;
        margin-top: 4px;

        .dz-info {
          &:before, &:after {
            content: ' ';
            display: table;
          }

          &:after {
            clear: both;
          }
        }

        .dz-filename {
          max-width: 60%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          float: left;
        }

        .dz-size {
          margin-bottom: 0;
          font-size: inherit;
          float: right;
        }

        .dz-remove {
          margin-top: 4px;
          font-size: 0.9em;
          text-transform: uppercase;
          text-decoration: none;
          color: $link-color;
          float: left;
          &:hover {
            background: none;
            text-decoration: underline;
          }
        }
      }

      .dz-error-message {
        top: initial;
        bottom: 100%;
        color: $error-text-color;
        border-radius: 0;
        width: 300px;
        padding: 8px;
        left: 50%;
        margin-bottom: 8px;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        &:after {
          top: 100%;
          left: 50%;
          margin-left: -6px;
          border-bottom: 0;
          border-top: 6px solid $error-background-color;
        }
      }
    }
  }

  /**
   * Horizontal Tile Layout
   * +----------------------------------+
   * |          | ABC 0.1MB      remove |
   * |   PIC    |-----------------------|
   * |          | Error                 |
   * |          |                       |
   * +----------------------------------+
   */
  &.dz-layout-horizontal_tile {
    transition: border-color 300ms ease-out, background-color 300ms ease-out;
    border-width: 1px;
    padding: 16px;

    &.dz-drag-hover {
      border-color: $hover-border-color;
      background-color: $hover-background-color;
    }

    .dz-preview {
      border: 1px solid #ccc;
      padding: 5px;
      width: 24%;
      box-shadow: 0 2px 5px -1px #aaa;
      margin: 0 1.3333% 16px 0;
      box-sizing: border-box;
      min-height: 0;

      &:nth-child(4n+1){
        margin-right: 0;
      }

      &:hover {
        .dz-image img {
          -webkit-transform: none;
          -moz-transform: none;
          -ms-transform: none;
          -o-transform: none;
          transform: none;
          -webkit-filter: none;
          filter: none;
        }
      }

      &.dz-success {
        .dz-progress {
          .dz-upload {
            width: 100%;
            background-color: $success-progress-color;
          }
        }
      }

      &.dz-error {
        .dz-progress {
          .dz-upload {
            width: 100%;
            background-color: $error-progress-color;
          }
        }
      }

      .dz-image {
        border-radius: 0;
        width: 80px;
        height: 80px;
        float: left;
        img {
          width: 80px;
          height: 80px;
        }
      }

      .dz-progress {
        position: static;
        opacity: 1;
        margin-left: 0;
        width: 100%;
        border-radius: 0;
        border: 0;
        margin-top: 4px;
        height: 3px;
        float: left;
        -webkit-animation: none;
        -moz-animation: none;
        -ms-animation: none;
        -o-animation: none;
        animation: none;

        &:before, &:after {
          content: ' ';
          display: table;
        }

        &:after {
          clear: both;
        }

        .dz-upload {
          transition: background-color 300ms ease-out, width 100ms linear;
          background-color: $theme-color;
        }
      }

      .dz-details {
        position: static;
        opacity: 1;
        text-align: left;
        padding: 0;
        margin-left: 85px;
        min-width: 0;
        max-width: none;

        .dz-info {
          float: left;
          width: 100%;
          &:before, &:after {
            content: ' ';
            display: table;
          }

          &:after {
            clear: both;
          }
        }

        .dz-filename {
          max-width: 60%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          float: left;
        }

        .dz-size {
          width: 15%;
          margin-bottom: 0;
          font-size: inherit;
          white-space: nowrap;
          float: left;
          &:before {
            content: '\00B7';
            display: inline-block;
            width: 14px;
            text-align: center;
          }
        }

        .dz-remove {
          font-size: 0.9em;
          text-transform: uppercase;
          text-decoration: none;
          color: $link-color;
          float: right;
          &:hover {
            background: none;
            text-decoration: underline;
          }
        }

        .dz-error-message {
          position: static;
          padding: 0;
          opacity: 1;
          background: none;
          font-size: 0.9em;
          width: 100%;
          line-height: 1.4;
          margin-top: 3px;
          color: $error-background-color;
          float: left;
          &:after {
            content: normal;
          }
        }
      }
    }
  }

  /**
   * Progress Bar Layout
   * Intended as a one-and-done upload flow where you upload and
   * then something happens outside the upload container
   * (i.e. - image cropper loads an uploaded image)
   *
   * +----------------------------------+
   * |%%%%%%%%%%%%%%%|                  |
   * |%%%%%%%%%%%%%%%|ROP FILES HERE    |
   * |%%%%%%%%%%%%%%%|                  |
   * +----------------------------------+
   */
  &.dz-layout-progress {
    padding: 0;
    position: relative;
    height: 42px;
    border-width: 1px;

    .dz-message {
      margin: 0;
      height: 40px;
      line-height: 40px;
      position: absolute;
      width: 100%;
      text-align: center;
      top: 0;
      left: 0;
      display: block;
    }

    .dz-preview {
      // Keep preview from blocking the clickable area by making it 0px high
      min-height: 0;
      height: 0;
      width: 100%;
      margin: 0;
      background: none;

      .dz-progress {
        margin-top: 0;
        margin-left: 0;
        position: relative;
        width: 100%;
        left: 0;
        top: 0;
        border-radius: 0;
        height: 40px;
        border: 0;
        background: none;

        .dz-upload {
          background: $theme-color;
        }
      }

      .dz-error-message {
        top: initial;
        bottom: 100%;
        color: $error-text-color;
        border-radius: 0;
        width: 300px;
        padding: 8px;
        left: 50%;
        margin-left: -150px;
        margin-bottom: 8px;
        text-align: center;
        &:after {
          top: 100%;
          left: 50%;
          margin-left: -6px;
          border-bottom: 0;
          border-top: 6px solid $error-background-color;
        }
      }

      &.dz-complete {
        &:hover {
          .dz-error-message {
            opacity: 1;
          }
        }
      }

      &.dz-error {
        .dz-error-message {
          opacity: 1;
        }
      }
    }
  }
}