@import "../bootstrap/variables.less";
@import "../bootstrap/mixins.less";
@import "../../core/include/variables.less";
@import "../../core/include/mixins.less";

.dropzone,
.dropzone * {
  .box-sizing(border-box);
}

.dropzone {
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
  padding: 1em;
  border: 1px solid rgba(0, 0, 0, 0.03);
  min-height: 160px;
  .border-radius(3px);
  background: rgba(0, 0, 0, 0.03);
  padding: 23px;

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

  &.clickable {
    cursor: pointer;
  }

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

  &.started .message {
    display: none;
  }

  .message {
    opacity: 1;
    -ms-filter: none;
    filter: none;
  }

  .preview {
    .box-shadow(1px 1px 4px rgba(0, 0, 0, 0.16));
    font-size: 14px;
    background: rgba(255, 255, 255, 0.8);
    position: relative;
    display: inline-block;
    margin: 17px;
    vertical-align: top;
    border: 1px solid #acacac;
    padding: 6px 6px 28px 6px;
    &.image-preview:hover {
      .details {
        img {
          display: block;
          opacity: 0.1;
          filter: alpha(opacity=10);
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
        }
      }
    }

    .details {
      width: 100px;
      height: 100px;
      position: relative;
      background: #ebebeb;
      padding: 5px;

      .filename {
        overflow: hidden;
        height: 100%;
      }

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        height: 100px;
        width: 100px;
        height: 100px;
      }

      .size {
        position: absolute;
        bottom: -28px;
        left: 3px;
        height: 28px;
        line-height: 28px;
      }
    }
    // details

    &.error {
      .error-mark {
        display: block;
        opacity: 1;
        -ms-filter: none;
        filter: none;
      }

      .progress .upload {
        background: #ee1e2d;
      }
    }

    &.success {
      .progress {
        display: none;
        display: block;
        .opacity(0);
        .transition(opacity 0.4s ease-in-out);
      }
      .success-mark {
        display: block;
        .opacity(1);
      }
    }

    &:hover .details img {
      display: none;
    }

    &:hover {
      .success-mark, .error-mark {
        display: none;
      }
    }

    .success-mark, .error-mark {
      display: none;
      position: absolute;
      width: 40px;
      height: 40px;
      font-size: 30px;
      text-align: center;
      right: -10px;
      top: -10px;
      display: block;
      .opacity(0);
      .transition(opacity 0.4s ease-in-out);

      span {
        display: none;
      }
    }

    .success-mark {
      color: #8cc657;
      background-position: -268px -163px;
    }

    .error-mark {
      color: #ee162d;
      background-position: -268px -123px;
    }

    .progress {
      position: absolute;
      top: 100px;
      left: 6px;
      right: 6px;
      height: 6px;
      background: #d7d7d7;
      .upload {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 0%;
        background-color: #8cc657;
        -webkit-animation: loading 0.4s linear infinite;
        -moz-animation: loading 0.4s linear infinite;
        -o-animation: loading 0.4s linear infinite;
        -ms-animation: loading 0.4s linear infinite;
        animation: loading 0.4s linear infinite;
        transition: width 0.3s ease-in-out;
        .transition(width 0.3s ease-in-out);
        .border-radius(2px);
        position: absolute;
        top: 0;
        left: 0;
        width: 0%;
        height: 100%;
      }
    }

    .error-message {
      display: none;
      position: absolute;
      top: -5px;
      left: -20px;
      background: rgba(245, 245, 245, 0.8);
      padding: 8px 10px;
      color: #800;
      min-width: 140px;
      max-width: 500px;
      display: block;
      .opacity(0);
      .transition(opacity 0.3s ease-in-out);
    }

    &:hover.error .error-message {
      display: block;
      .opacity(1);
    }
  }
  //preview
  .default.message {
    .opacity(1);
    .transition(opacity 0.3s ease-in-out);
    position: absolute;
    width: 428px;
    height: 123px;
    margin-left: -214px;
    margin-top: -61.5px;
    top: 50%;
    left: 50%;

    span {
      display: block;
      text-align: center;
      font-size: 16px;
      color: #999;
    }
  }

  &.square .default.message {
    background-position: 0 -123px;
    width: 268px;
    margin-left: -134px;
    height: 174px;
    margin-top: -87px;
  }

  &.drag-hover .message {
    .opacity(0.15);
  }

  &.started .message {
    display: block;
    .opacity(0);
  }
}

// dropzone

#dropzone {
  margin: 30px 0;
  .box-shadow(0 0 50px rgba(0, 0, 0, 0.13));
  padding: 4px;
  .border-radius(3px);
  .dropzone {
    .box-shadow(none);
  }
}