// 单点文件上传

@import "./var";

.#{$prefix}form-upload {
  font-size: 0;
  display: inline-block;
  color:$color-text;
  .#{$prefix}form-upload__inner {
    display: inline-block;
    position: relative;
    padding-right: 10px;
    .#{$prefix}input{
      padding-right: 35px;
    }
  }
}
// 单点文件上传验证
.is-validating .#{$prefix}form-upload {
  .#{$prefix}form-upload__inner {
    .#{$prefix}icon-valid {
      position: absolute;
      left: 148px;
      top: 7px;
      margin: 0;
    }
    .#{$prefix}form__help-text--inline {
      position: absolute;
      left: 162px;
      top: 50%;
      font-size: $upload-font-size;
      transform: translateY(-50%);
    }
  }
}
.is-error .#{$prefix}form-upload {
  .#{$prefix}form-upload__inner {
    .#{$prefix}icon-valid {
      // margin-left: -20px;
      position: absolute;
      right: 14px;
      top: 7px;
    }
    .#{$prefix}form__help-text--inline {
      display: none;
    }
  }
}
.is-success .#{$prefix}form-upload {
  .#{$prefix}form-upload__inner {
    .#{$prefix}icon-valid {
      // margin-left: -20px;
      position: absolute;
      right: 14px;
      top: 7px;
    }
    .#{$prefix}form__help-text--inline {
      display: none;
    }
  }
}

// 单点与拖拽上传
.is-disabled .#{$prefix}form-upload-drag {
  .#{$prefix}form-upload__inner {
    cursor: not-allowed;
    .#{$prefix}btn--file {
      cursor: not-allowed;
    }
  }
}
.#{$prefix}form-upload-drag {
  font-size: 0;
  display: inline-block;
  vertical-align: middle;
  .#{$prefix}text__upload-drag--hover {
    display: none;
  }
  .#{$prefix}form-upload__inner {
    min-height: 120px;
    min-width: 300px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px dashed $upload-color-border;
    border-radius: $upload-border-radius;
    background-color: $upload-color-bg;
    display: inline-block;
    position: relative;
    .#{$prefix}text__upload-drag {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: $upload-font-size;
      .#{$prefix}btn--file {
        margin: -2px 0 0 0;
        // padding: 0; 
        // margin: -3px -2px 0 0;
        // &:hover {
        //   background-color: rgba(0, 0, 0, 0);
        //   text-decoration: underline;
        //   font-size: 12px;
        //   span {
        //     text-decoration: underline;
        //   }
        // }
      }
    }
  }

  // &:not(.is-disabled):not(.is-validating):not(.is-error):not(.is-success) {
  //   .#{$prefix}form-upload__inner {
  //     &:hover {
  //       background-color: #f2f2f2;
  //       border-color: #006eff;
  //       .#{$prefix}text {
  //         display: none;
  //       }
  //       .#{$prefix}text__upload-drag--hover {
  //         display: inline-block;
  //         cursor: default;
  //       }
  //     }
  //   }
  // }

}

.#{$prefix}form-upload-drag.#{$prefix}form-upload-drag--drag {
  .#{$prefix}form-upload__inner {
    background-color: $upload-color-bg-hover;
    border-color: $upload-color-border-focus;
    .#{$prefix}text {
      display: none;
    }
    .#{$prefix}text__upload-drag--hover {
      display: inline-block;
      cursor: default;
    }
  }
}
.#{$prefix}form-upload__box  {
  // display: table;
  display: flex;
}
.#{$prefix}form-upload__thumb {
  width: $upload-thumb-width;
  height: $upload-thumb-height;
  // display: table-cell;
  // vertical-align: top;
  display: flex;
  justify-content:center;
  align-items: center;
  position: relative;
  .#{$prefix}form-upload__preview {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    // &::before {
    //   content: '';
    //   display: block;
    //   width: 100px;
    //   height: 100px;
    //   background-image: url(../../assets/image/upload-thumb.png);
    //   background-size: 100%;
    //   background-repeat: no-repeat;
    //   background-position: center;
    // }
  }
}

.#{$prefix}form-upload__info {
  height: $upload-thumb-height;
  min-width: 180px;
  padding-left: 10px;
  box-sizing: border-box;
  flex: 1; 
  vertical-align: top;
  position: relative;
  .#{$prefix}text,.#{$prefix}text-weak {
    font-size: $upload-font-size;
  }
  .#{$prefix}text {
    vertical-align: middle;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 40px);
  }

  .#{$prefix}form-upload__intro {
    margin-top: 10px;
  }
  .#{$prefix}form-upload__btn {
    position: absolute;
    left: 0;
    padding-left: 10px;
    bottom: 0;
  }
}



.is-error .#{$prefix}form-upload-drag {
  .#{$prefix}form-upload__inner {
    border-color: $upload-color-border-error;
    .#{$prefix}form__help-text--inline {
      display: none;
    }
  }
}
.is-success .#{$prefix}form-upload-drag {
  .#{$prefix}form-upload__inner {
    .#{$prefix}form__help-text--inline {
      display: none;
    }
  }
}

.is-error .#{$prefix}form-upload-img{
  .#{$prefix}form-upload__inner {
    .#{$prefix}form__help-text--inline {
      display: none;
    }
  }
}
.is-success .#{$prefix}form-upload-img{
  .#{$prefix}form-upload__inner {
    .#{$prefix}form__help-text--inline {
      display: none;
    }
  }
}
// 单点图片上传
.#{$prefix}form-upload-img {
  display: inline-block;
  vertical-align: middle;
  max-width: calc(100% - 30px);
}
.#{$prefix}upload__header {
  margin-bottom: 20px;
}
.#{$prefix}upload {
  .#{$prefix}table {
    border: 1px solid $upload-color-border;
    border-radius: $upload-border-radius;
    border-bottom: none;
  }
  .#{$prefix}icon {
    margin-right: 5px;
  }
}



.#{$prefix}info-drag {
  min-height: 192px;
  background-color: $upload-color-bg-disabled;
  box-sizing: border-box;
  display: none;
  -ms-flex-pack: center;
  justify-content: center; /* 水平居中 */
  -ms-flex-align: center;
  align-items: center;     /* 垂直居中 */

  cursor: default;
}
.#{$prefix}upload__body.#{$prefix}form-upload-drag--drag {
  position: relative;
  .#{$prefix}info-drag {
    border: 1px dashed $upload-color-border-focus;
    border-radius: $upload-border-radius;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    .#{$prefix}text {
      display: inline;
    }
  }
}