@upload-prefix-cls: ~"@{css-prefix}upload";
@title-height:22px;
@normal-font-size: 14px;
.@{upload-prefix-cls} {
  input[type="file"]{
    display: none;
  }
  &-list-file-title{
    // float: left;
    font-size: @normal-font-size;
    text-align: left;
    color: @primary-color;
    padding-left: 5px;
    line-height: 24px;
  }
  &-list-file-status {
    float:right;
    margin-right:10px;
    line-height: 24px;
    &-icon{
      display:inline-block;
      width:14px;height:14px;
      border-radius:50%;
      background-color:@color-functional-white;
      text-align:center;
      position: relative;
      top:2px;
      
      &-success{
        color: @color-functional-success!important;;
        position: absolute;
        top: 3px;
        left:3px;
      }
      &-error{
        color: #F04134!important; // ★待定
        position: absolute;
        top: 3px;
        left:3px;
      }
    }
  }

  &-list-file-title-fail{
    color: @upload-color-text-disable !important;
    >span i{
      color: @upload-color-text-disable !important;
    }
  }
  &-accept-file-types{
    text-align: left;
    list-style: none;
    
  }
  &-accept-file-types-details{
    color: @color-complementary-5;
    font-size: @normal-font-size;
  }
   
  &-list{
    margin-top: 5px;

    &-file{
      line-height: 24px;
      color: @text-color;
      transition: background-color @transition-time @ease-in-out;
      // overflow: hidden;
      list-style: none;
      position: relative;
      background-color: @color-bg-page;
      margin-bottom: 8px;

      & > span{
        cursor: pointer;
        transition: color @transition-time @ease-in-out;
        i{
          display: inline-block;
          font-size:20px;
          color: @upload-color-file;
          text-align: center;
        }
      }

      &-unupload:hover{
        background: @color-bg-hover;
      }
      // &:hover{
      //   .@{upload-prefix-cls}-list-remove{
      //     opacity: 1;
      //   }
      // }
    }
    &-remove{
      cursor: pointer;
      position: absolute;
      right: -30px;
      top: 0px;
      margin-right: 4px;
     
      font-size: 16px;
      line-height: 22px!important;
      transition: all @transition-time ease;
        &:hover{
          color: @primary-color;
        }
    }
    // &-remove-on-progress{
    //   position: absolute;
    //   right: 0px;
    //   top: 0px;
    // }
  }

  &-select {
    display: inline-block;
  }

  &-drag{
    background: @color-bg-page;
    border: 1px dashed @upload-border-color;
    border-radius: @border-radius-base;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color @transition-time ease;
      &.haloe-upload-disbaled {
      background: @upload-color-bg-disable;
      border-color: @upload-color-border-disable;
      cursor: not-allowed;
      .haloe-upload-content-drag-default-text-details{
        color: @upload-color-text-disable!important;
      }
      .haloe-upload-content-drag-default-text-strong{
        color: @upload-color-text-disable!important;
      }
    }
  }

  &-hover-border-color {
    &:hover{
      border-color: @color-brand-hover;
    }
    &:active{
      border-color:@color-brand-press;
    }
    &.haloe-upload-disbaled {
      color: @upload-color-text-disable!important;
      background: @upload-color-bg-disable;
      border-color: @upload-color-border-disable;
      cursor: not-allowed;
    }
  }

  &-drag-main{
    width: 400px;
  }
  &-select-1-main{
    border: 1px dashed @border-color-base;
  }
  &-dragOver{
    border: 1px dashed @primary-color;
  }
  &-content-drag-default{
    height: 136px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    &-box{
      width: 100%;
      line-height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &-text-details{
      color: @color-complementary-3;
      font-size: @normal-font-size;
    }
    &-text-strong{
      color: @color-brand-primary;
      font-size: @normal-font-size;
      &:hover{
        color: @color-brand-hover;
      }
      &:active{
        color: @color-brand-press;
      }
    }
  }
  &-content-drag-default-small{
    height :60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &-progress{
    &-outer {
      height: 22px;
      background-color: @color-bg-hover;
    }
    &-bg {
      text-align: right;
      -webkit-transition: all 0.2s linear;
      transition: all 0.2s linear;
      position: relative;
      border-radius: inherit;
    }
    &-inner {
      display: inline-block;
      width: 100%;
      background-color: @color-bg-hover;
      vertical-align: middle;
      position: relative;
      color: @primary-color;
      padding-right: 18px;
      .haloe-upload-progress-bg{
        height: 24px!important;
      }
    }
    &-inner-text {
      color: @primary-color;
      line-height: 24px;
      white-space: nowrap;
      padding-left: 5px;
      text-align: left;
      & > i {
        color: @color-complementary-5;
        font-size:20px;
      }
    }
  }
  &-trigger{
    margin-right: 20px;
  }
  .@{icon-prefix-cls}-upload{
    font-size: 20px;
    margin-right: 6px;
  }
}