$uploader: 'ui-uploader';

.#{$uploader}-container {
  min-height: 1.14rem;
  background: #fff;
  padding:.12rem 0rem 0rem 0rem;
  color: #667580;
  box-sizing: border-box;
  overflow: hidden;
  .#{$uploader}-label {
    margin-bottom: .12rem;
    font-size: .12rem;  
    line-height: .14rem;
  }
}

.#{$uploader}-photos {
    overflow-x: auto;
    width: 100%;
    min-height: .76rem;
    white-space: nowrap;
    position: relative;
    line-height: 0;
    overflow-y: hidden;
    .#{$uploader}-photoContainer {
        position: relative;
        display: inline-block;
        padding-right: .08rem;
        img {
          display: block;
        }
        .#{$uploader}-progressBar {
          width: .64rem;
          height: .64rem;
          position: absolute;
          top:0;
          z-index: 1;
          background-color: rgba(0,0,0,0.34);
          zoom: 1;
          color: #fff;
          line-height: .64rem;
          text-align: center;
          font-size: .16rem;
        }
        .#{$uploader}-file-name {
          &.error {
            color: #f20000;
          }
          width: .64rem;
          height: .14rem;
          font-size: .12rem;
          text-align: center;
          margin-top: .04rem;
          margin-bottom: .08rem;
          overflow-x: hidden;
          white-space:nowrap; 
          text-overflow:ellipsis;
          line-height: .12rem;
        }
    }
    .#{$uploader}-button {
      display: inline-block;
      position: absolute;
      top:0;
      width: .64rem;
    }
}

.#{$uploader}-add {
  width: 64px;
  height: 64px;
  border-radius: 3px;
  border: solid 1px #e6eaed;
  position: absolute;
  top:0;
  box-sizing: border-box;
  &.click-add {
    background: #e6eaed;
    span {
      background-color: #fff;
    }
  }
  span{
    width:.02rem;
    height:.42rem;
    position: absolute;
    top:.11rem;
    left:.31rem;
    background-color: #e6eaed;
  }
  .y{
    transform: rotate(90deg);
  }
}

.#{$uploader}-file-icon {
  width: .64rem;
  height: .64rem;
  border-radius: 2px;
}

.#{$uploader}-fileIcon {
    width: .64rem;
    height: .64rem;
    background:url('./files.svg') no-repeat center;
    background-size: .44rem .44rem;
    background-color: #acb7bf;

}

.#{$uploader}-file-detail {
    width: .88rem;
    height: 1.08rem;
    background: url(./files.svg) no-repeat center;
    background-size: .64rem .64rem;
    background-color: #acb7bf;
    top: .48rem;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.#{$uploader}-files-name {
    position: relative;
    left: 50%;
    top:.64rem;
    transform: translateX(-50%);
    text-align: center;
    font-size: .2rem;
    line-height: .24rem;
    width: 1.76rem;
    word-wrap: break-word;
    word-break: break-word;
}

.#{$uploader}-placeholder {
  font-size: .12rem;
  color: #acb7bf;
}

input[type="file"] {
    display: inherit !important;
    visibility: hidden;
    width:0px;
    height:0px;
}


.bg-class {
    height: calc(100% - .44rem);
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.file-detail {
  .dropdown-container.right .menu:before{
    right: 0.09rem;
    top: -.20rem;
  }
  .dropdown-container.right .menu .dropdown-list{
    top:-.05rem;
    width: .72rem;
  }
}
.delet-btn {
  font-size: .16rem;
  color:#007ed9;
  line-height: .2rem;
  text-align:right;
}