@charset "UTF-8";
@import "../../style/function";
//-----------------------------------------------------
// Upload
//-----------------------------------------------------

$iconColor: #ddd;
$iconHoverColor: #bbb;
$colorBorder: #ddd;
$colorBg: #f3f3f3;

.im-upload {
  width: 222px;
  height: 125px;
  overflow: hidden;
  border: 1px solid $colorBorder;
  position: relative;
  cursor: pointer;
  background: $colorBg;

  &--desc {
    float: left;
  }

  &-wrap {
    width: 222px;
    min-height: 127px;

    &--desc {
      width: auto;
    }
  }

  &-intro {
    margin-left: 244px;
    color: $color9;
  }


  &-icon,
  &-text {
    font-size: 80px;
    line-height: 1;
    position: absolute;
    left: 0;
    top: 0;
    color: $iconColor;
    text-align: center;
    width: 100%;
  }

  &-icon {
    font-family: "Hiragino Sans GB", "Microsoft Yahei", arial, \5b8b\4f53, "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
    height: 100px;
    top: 15px;
  }

  &-text {
    font-size: 14px;
    top: 90px;
  }

  &-img {
    position: absolute;
    top: 0;
    left: 0;
    // display: none;
  }

  &-again {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: $colorBg;
    line-height: 125px;
    text-align: center;
    @include background-rgba;
  }

  //.f-file {
  //  padding: 0;
  //  height: auto;
  //  font-size: 200px;
  //  position: absolute;
  //  right: -1px;
  //  top: -1px;
  //  z-index: 997;
  //  cursor: pointer;
  //  opacity: 0.01;
  //  filter: alpha(opacity=1);
  //}

  &:hover {
    .im-upload-icon {
      color: $iconHoverColor;
    }
  }

  &--success {
    &:hover {
      .im-upload-again {
        display: block;
      }
    }
  }

  &--disabled {
    cursor: default;

    &:hover {
      .im-upload-again {
        display: none;
      }

      .im-upload-icon {
        color: $iconColor;
      }
    }
  }
}