.#{$upload-prefix-cls}-select {
  $root: #{&};
  display: inline-block;

  &--picture-card {
    display: inline-block;
    width: $upload-picture-card-width;
    height: $upload-picture-card-height;
    padding: 20px 0;
    margin-right: $upload-item-space;
    margin-bottom: $upload-item-space;
    text-align: center;
    cursor: pointer;
    background-color: $gray-light-4;
    border: $border-width dashed $gray-light-15;
    border-radius: $border-radius;
    transition: border-color .3s ease;

    &:hover {
      border-color: $brand-info;
    }

    #{$root}__text {
      font-size: $font-size-xs;
    }

    .#{$icon-prefix} {
      font-size: 30px;
      line-height: 1;
    }
  }
}

.#{$upload-prefix-cls}-list {
  $root: #{&};
  display: inline-block;

  &__item {
    position: relative;
    height: 22px;
    margin-top: $upload-item-space;
    font-size: $font-size-xs;
    line-height: 22px;
    transition: background-color .3s;

    #{$root}__info {
      padding: 0 0 0px 4px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .#{$icon-prefix}{
        width: $upload-item-icon-size;
        height: $upload-item-icon-size;
        font-size: $upload-item-icon-size;
        line-height: $upload-item-icon-size;
      }
      .#{$icon-prefix}-loading{
        animation: loading-rotate 1s linear infinite;
      }

      #{$root}__name {
        padding-left: 8px;
        padding-right: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: $gray-light-45;
      }
    }

    .#{$icon-prefix}-close {
      width: $upload-item-icon-size;
      height: $upload-item-icon-size;
      font-size: $upload-item-icon-size;
      line-height: $upload-item-icon-size;
    }

    &:hover {
      background-color: $brand-primary-10;

      .#{$icon-prefix}-close {
        opacity: 1;
      }
    }
    #{$root}__progress{
      padding-top: 4px;
      padding-left: 26px;
      width: 100%;
      .progress-bar{
        height: 2px;
        line-height: 2px;
      }
    }

    &--error {
      #{$root}__info {
        .#{$icon-prefix}-paperclip,
        #{$root}__name {
          color: $brand-danger;
        }
      }

      .#{$icon-prefix}-close {
        color: $brand-danger;
        opacity: 1;
      }
    }
  }

  &--picture,
  &--picture-card {
    #{$root}__item {
      position: relative;
      height: $upload-list-picture-thumbnail-height + $upload-item-space*2 + $border-width*2;
      padding: $upload-item-space;
      border: $border-width solid $gray-light-15;
      border-radius: $border-radius;

      &--error {
        border-color: $brand-danger;
      }

      #{$root}__info {
        padding: 0;

        #{$root}__thumbnail {
          position: absolute;
          top: $upload-item-space;
          left: $upload-item-space;
          width: $upload-list-picture-thumbnail-width;
          height: $upload-list-picture-thumbnail-height;

          img {
            width: 100%;
            height: 100%;
            border-radius: $border-radius;
          }
        }

        #{$root}__name {
          display: inline-block;
          max-width: 100%;
          padding-right: $upload-item-space;
          padding-left: $upload-list-picture-thumbnail-width + $upload-item-space;
          line-height: $upload-list-picture-thumbnail-height;
          transition: all .3s;
        }
      }

      .#{$icon-prefix}-close {
        top: $upload-item-space;
        right: $upload-item-space;
        line-height: 1;
      }

      &:hover {
        background: none;
      }
    }
  }

  &--picture-card {
    #{$root}__item {
      float: left;
      width: $upload-picture-card-width;
      height: $upload-picture-card-height;
      margin: 0 $upload-item-space $upload-item-space 0;

      #{$root}__info {
        position: relative;
        height: 100%;

        &::before {
          position: absolute;
          z-index: 1;
          width: 100%;
          height: 100%;
          content: " ";
          background-color: rgba(0, 0, 0, .5);
          opacity: 0;
          transition: all .3s;
        }

        #{$root}__thumbnail,
        #{$root}__thumbnail img {
          position: static;
          display: block;
          width: 100%;
          height: 100%;
        }

        #{$root}__name {
          display: none;
        }
      }

      #{$root}__actions {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 10;
        white-space: nowrap;
        opacity: 0;
        transition: all .3s;
        transform: translate(-50%, -50%);

        .#{$icon-prefix}-delete,
        .#{$icon-prefix}-eye-outline {
          z-index: 10;
          font-size: $font-size-base;
          color: rgba(255, 255, 255, .9);
          cursor: pointer;
          transition: all .3s;

          &:hover {
            color: #fff;
          }
        }
      }

      &:hover {
        #{$root}__info::before,
        #{$root}__actions {
          opacity: 1;
        }
      }
    }
  }
}

.#{$upload-prefix-cls}--drag {
  width: 100%;
  height: 100%;
  text-align: center;
  cursor: pointer;
  background-color: $gray-light-4;
  border: $border-width dashed $gray-light-15;
  border-radius: $border-radius;
  transition: border-color .3s ease;

  &.upload--drag__over{
    border-color: $brand-primary
  }

  .#{$upload-prefix-cls}--drag__container {
    padding: 38px 52px;
    .#{$upload-prefix-cls}--drag__icon{
      .#{$icon-prefix}{
        width: 48px;
        height: 48px;
        line-height: 48px;
        font-size: 48px;
      }
    }
    .#{$upload-prefix-cls}--drag__description{
      margin-top: 18px;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      height: 24px;
      color: $gray-light-85;
    }
    .#{$upload-prefix-cls}--drag__tip{
      line-height: 22px;
      height: 22px;
      color: $gray-light-45;
    }
  }

  &:hover {
    border-color: $brand-primary-10;
    .#{$upload-prefix-cls}--drag__icon{
      .#{$icon-prefix}{
        color: $brand-primary;
      }
    }
  }
}

.#{$upload-prefix-cls}--drag p {
  margin-bottom: 0;
}