
.umb-file-dropzone {
  // drop zone
  // tall and small version - animate height
  .dropzone {
    height: 400px;
    width: auto;
    padding: 50px 0;
    border: 1px dashed @gray-8;
    background-color: @white;
    text-align: center;
    color: @gray-3;
    margin: 0 0 20px 0;
    position: relative;
    transition: height 0.8s;

    .illustration {
      width: 300px;
    }

    &.is-small {
      height: 100px;

      .illustration {
        width: 200px;
      }
    }

    &.drag-over {
      border: 1px dashed @gray-1;
    }
  }
  // center the content of the drop zone
  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: column;
  }
  // file select link
  .file-select {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 15px;
    color: @ui-action-discreet-type;
    cursor: pointer;
    margin-top: 10px;

    &:hover {
      color: @ui-action-discreet-type-hover;
      text-decoration: none;
    }
  }
  // uploading / uploaded file list
  .file-list {
    list-style: none;
    margin: 0 0 30px 0;
    background: @gray-10;
    padding: 10px 20px;

    .file {
      padding: 5px 0;
      position: relative;
      border-top: 1px solid @gray-8;

      &:first-child {
        border-top: none;
      }

      &.ng-enter {
        animation: fadeIn 0.5s;
      }

      &.ng-leave {
        animation: fadeOut 2s;
      }

      .file-description {
        color: @gray-3;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
      }

      .file-messages, .file-messages span {
        display: block;
      }

      .file-upload-progress {
        display: block;
        width: 100%;
      }

      .ok-all {
          margin-left: auto;
      }
    }
  }
  // progress bars
  // could be moved to its own less file
  .file-progress {
    height: 4px;
    position: relative;
    padding: 2px;

    .file-progress-indicator {
      display: block;
      height: 100%;
      border-radius: 20px;
      background-color: @green;
      position: relative;
      overflow: hidden;
      width: 0;
    }
  }
}
