.file-upload-dropzone {
  border: 2px dashed @file-upload-dropzone-border;
  background: @file-upload-dropzone-bg;
  font-size: 18px;
  font-weight: 300;
  width: 100%;
  padding-top: 60px;
  text-align: center;
  min-height: 150px;
  color: @file-upload-dropzone-color;
  cursor: pointer;
  margin-bottom: 24px;

  &:focus {
    .native-focus-outline();
  }
}

.file-upload-progress-indicator {
  margin-top: 8px;
  line-height: 12px;
  margin-bottom: 24px;
}

.file-upload-queue {
  display: flex;
  padding-left: 0;
  list-style: none;
  margin-bottom: 22px;
  flex-wrap: wrap;

  > li {
    max-width: 100%;
    flex: none;

    > a {
      display: flex;
      align-items: center;
      padding-left: 5px;
      border: 1px solid @file-upload-queue-border;
      border-radius: @file-upload-queue-border-radius;
      margin-right: 5px;
      margin-bottom: 5px;
      color: @file-upload-queue-color;
      background-color: @file-upload-queue-bg;

      &:focus {
        outline: none;
        background-color: @file-upload-queue-active-bg;
        border-color: @file-upload-queue-active-border;
        color: @file-upload-queue-active-color;
      }
    }
  }
}

.file-upload-queue-remove {
  display: inline-flex;
  align-items: center;
  border: none;
  background-color: transparent;
  font-size: 80%;
  opacity: 0.7;
  height: 22px;
  padding-top: 4px;

  &:hover,
  &:focus {
    opacity: 1;
  }

  &:focus {
    .native-focus-outline();
  }
}