.file-uploads {
  position: relative;
  display: inline-block;
  .file-uploads_html4,.file-uploads_html5{
    cursor: pointer;
    position: relative;
    overflow: hidden;
    input[type="file"]{
      @include opacity(0);
      z-index: 2;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  }
  .file-uploads_tips{
    display: block;
    font-size: 12px;
    color: $placeholder;
    padding: 10px 0;
  }
  .file-uploads_box{
    font-size: 14px;
    li{
      @extend %transition-all;
      padding: 5px;
      cursor: pointer;
      &:hover{
        background-color: $line;
        .file-name{
          color: $blue;
        }
        .mc-icon-success,.mc-icon-loading,.mc-icon-warning{
          display: none;
        }
        .mc-icon-close{
          display: inline;
        }
      }
    }
    span{
      vertical-align: top;
      display: inline-block;
    }
    .file-num{
      width: 20px;
    }
    .file-name{
      @extend %text-overflow;
      width: 160px;
      .mc-icon-file{
        position: relative;
        top: 2px;
      }
    }
    .file-other{
      width: 80px;
      text-align: right;
    }
    .file-icon{
      margin-left: 30px;
    }
    .mc-icon-loading{
      position: relative;
    }
    .mc-icon-success{
      color: $green;
    }
    .mc-icon-warning{
      color: $red;
    }
    .mc-icon-loading{
      color: $icon;
    }
    .mc-icon-close{
      @extend %transition-all;
      position: relative;
      top: 2px;
      color: $icon;
      display: none;
      &:hover{
        color: $blue;
      }
    }
  }
  &.is-drop{
    .file-uploads_html4,.file-uploads_html5{
      @extend %transition-all;
      @include radius(6px);
      background-color: #fff;
      border: 3px dashed $line;
      width: 360px;
      height: 180px;
      text-align: center;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      &:hover{
        border-color:$blue;
      }
    }
    .mc-icon-upload{
      color:$icon;
      display: block;
      font-size: 64px;
      margin-top: 30px;
    }
    em{
      display: block;
      font-size: 12px;
    }
    .file-uploads_drop{
      font-size: 14px;
      margin-bottom: 10px;
      i{
        color:$blue;
      }
    }
    .file-uploads_tips{
      font-size: 12px;
    }
    &.is-over{
      .file-uploads_html4,.file-uploads_html5{
        border: 3px dashed $blue;
        background-color:$line;
      }
    }
  }
}