.upload-select{
  display: inline-block;
  $root:#{&};
  &--picture-card{
    width: $upload-picture-card-width;
    height: $upload-picture-card-height;
    background-color: $gray-lightest-10;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    margin-right: $upload-item-space;
    margin-bottom: $upload-item-space;
    border: $border-width dashed $gray-lightest;
    border-radius: $border-radius;
    transition: border-color 0.3s ease;
    padding: 20px 0px;
    &:hover{
      border-color:$brand-info;
    }
    #{$root}__text{
      font-size: $font-size-xs;
    }
    .aid{
      font-size:30px;
      line-height: 1;
    }
  }
}
.upload-list{
  $root:#{&};
  &__item{
    margin-top: $upload-item-space;
    font-size: $font-size-xs;
    position: relative;
    height: 24px;
    line-height: 24px;
    transition: background-color 0.3s;
    #{$root}__info{
      padding: 0px 12px 0px 4px;
      .aid-paperclip {
        font-size: inherit;
        color: $gray;
        position: absolute;
        top: 2px;
      }
      #{$root}__name {
        width: 100%;
        padding-left: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .aid-close {
      font-size: inherit;
      opacity: 0;
      cursor: pointer;
      position: absolute;
      top: 50%;
      right: 4px;
      transform: translate(0,-50%);
      color:$gray;
      transition: opacity 0.3s;
    }
    &:hover{
      background-color:$gray-lightest-5;
      .aid-close{
        opacity: 1;
      }
    }
    &--error{
      #{$root}__info{
        .aid-paperclip,
        #{$root}__name{
          color: $brand-danger;
        }
      }
      .aid-close{
        opacity: 1;
        color: $brand-danger;
      }
    }
  }


  &--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-radius: $border-radius;
      border: $border-width solid $gray-lightest;
      &--error{
        border-color: $brand-danger;
      }
      #{$root}__info{
        padding:0;
        #{$root}__thumbnail{
          width: $upload-list-picture-thumbnail-width;
          height: $upload-list-picture-thumbnail-height;
          position: absolute;
          top: $upload-item-space;
          left: $upload-item-space;
          img{
            width: 100%;
            height: 100%;
            border-radius: $border-radius;
          }
        }
        #{$root}__name{
          padding-left: $upload-list-picture-thumbnail-width+$upload-item-space;
          line-height: $upload-list-picture-thumbnail-height;
          padding-right: $upload-item-space;
          max-width: 100%;
          display: inline-block;
          transition: all 0.3s;
        }
      }
      .aid-close{
        right: $upload-item-space;
        top: $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{
        height: 100%;
        position: relative;
        &::before{
          content: " ";
          position: absolute;
          z-index: 1;
          background-color: rgba(0, 0, 0, .5);
          width: 100%;
          height: 100%;
          opacity: 0;
          transition: all 0.3s;
        }
        #{$root}__thumbnail,
        #{$root}__thumbnail img{
          position: static;
          display: block;
          width: 100%;
          height: 100%;
        }
        #{$root}__name{
          display: none;
        }

      }
      #{$root}__actions {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        white-space: nowrap;
        opacity: 0;
        transition: all 0.3s;
        .aid-delete,
        .aid-eye-outline {
          font-size:$font-size-base;
          z-index: 10;
          cursor: pointer;
          color: rgba(255, 255, 255, .9);
          transition: all 0.3s;
          &:hover{
            color:#fff;
          }
        }
      }
      &:hover{
        #{$root}__info::before,
        #{$root}__actions{
          opacity: 1;
        }
      }
    }
  }
}

.upload--drag {
  background-color: $gray-lightest-10;
  cursor: pointer;
  text-align: center;
  width: 100%;
  height: 100%;
  border: $border-width dashed $gray-lightest;
  transition: border-color 0.3s ease;
  border-radius: $border-radius;
  .upload--drag__container{
    padding:20px;
  }
  &:hover{
    border-color:$brand-info;
  }
}
.upload--drag p {
  margin-bottom: 0;
}