.#{$upload-prefix-cls} {
  position: relative;

  &-file,
  &-btn {
    float: left;
    margin: 0.12rem 0;
  }

  &-file {
    position: relative;
    margin-right: 0.24rem;

    &-def {
      position: relative;
      width: 0.72rem;
      height: 0.72rem;
      box-sizing: border-box;
      background: #FFF no-repeat center;
      background-size: cover;
      border-radius: .08rem;

      .cubeic-wrong {
        color: #333;
        position: absolute;
        z-index: 2;
        top: -0.2rem;
        right: -0.2rem;
        font-size: .42rem;
      }
    }

    &-state {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      opacity: 0;
      background-color: rgba(37, 38, 45, .4);
      border-radius: .02rem;
      transition: opacity .1s;

      &::before {
        content: ".";
        position: relative;
        left: -50%;
        display: block;
        width: .01rem;
        height: .01rem;
        margin-left: -0.01rem;
        background-color: rgba(0, 0, 0, .1);
      }
    }

    &-progress {
      display: block;
      font-size: .34rem;
      color: #fff;
    }
  }

  &-btn {
    position: relative;

    &:active &-def {
      background-color: #ebebeb;
    }

    &-def {
      width: .72rem;
      height: .72rem;
      background-color: #f7f7f7;
      border-radius: .08rem;
      position: relative;

      >i {

        &::before,
        &::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          width: .05rem;
          height: .37rem;
          transform: translate(-50%, -50%);
          background-color: #bfbfbf;
        }

        &::after {
          transform: translate(-50%, -50%) rotate(90deg);
        }
      }
    }
  }

  &-input {
    position: absolute;
    top: 0;
    left: 0;
    width: .72rem;
    bottom: 0;
    opacity: 0;
  }
}

.clearfix {
  zoom: 1;

  &:after {
    content: '';
    display: table;
    clear: both;
  }
}

.combination-upload {
	padding-left: .32rem;
  background: #FFF;
  .upload {
    padding: .24rem 0;
  }
  .upload-placeholder {
    display: flex;
    padding-top: 0.24rem;

    &-icon {
      width: .72rem;
      height: .72rem;
      background: #eae8e8;
      border-radius: .08rem;
    }

    &-content {
      width: 80%;
      padding-left: 0.24rem;
    }

    &-title {
      background: #eae8e8;
      height: .34rem;
      border-radius: .08rem;
    }

    &-text {
      width: 60%;
      background: #eae8e8;
      height: .24rem;
      margin-top: .12rem;
      border-radius: .08rem;
    }
  }

  .combination-upload-ext {
    position: absolute;
    width: .72rem;
    height: .72rem;
    top: .24rem;
    left: 0;
    background: #FFB43F;
    color: #FFF;
    border-radius: .08rem;
    text-align: center;
    line-height: .72rem;
    font-weight: bold;
		font-size: .24rem;
		&.JPG,
		&.PNG {
			background: #7FDAFF;
		}
		&.DOC {
			background: #00A5E7;
		}
		&.XLS {
			background: #79C95B;
		}
		&.PPT {
			background: #F0CD00;
		}
		&.ZIP,
		&.RAR {
			background: #E15CC2;
		}
  }

  .t-cell__wrapper {
		position: relative;
    background: none;
    padding-left: 0.96rem;
    padding-top: .24rem;
		word-break: break-all;
		
  }

  .t-cell__title {
    width: auto;
  }

  .t-cell__title--label {
    margin-top: 0px;
    font-size: .28rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.5);
    line-height: .32rem;
  }

  .t-cell__title--text {
    display: block;
    font-weight: bold;
    color: #333;
    font-size: 0.32rem;
    line-height: 0.4rem;
  }

  .upload-file,
  .upload-btn {
    margin: 0;
	}
	
	.progress {
		position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
	}
}