/*
* @Author: zhongjiahao
* @Date:   2016-09-06 16:13:30
* @Last Modified by:   zhongjiahao
* @Last Modified time: 2016-11-18 17:48:12
*/

$module-name2: '.form-group';
.form-group {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  &__title {
    @include rem(margin, 10, 0);
    @include rem(line-height, 0);
    border-bottom: 1px solid $m4;
    #{$module-name2}__text {
      display: inline-block;
      @include rem(padding, 0, 10);
      width: auto;
      @include font-h6();
      color: $m2;
      @include rem(border-radius, 2, 2, 0, 0);
      background-color: $m4;
    }
  }
  .form-group__tags {
    display: inline-block;
    @include rem(width, 30);
    @include rem(height, 30);
    color: $m7;
    @include rem(line-height, 30);
    text-align: center;
    @include rem(border-radius, 47);
    @include rem(margin-right, 10);
    #{$module-name2}__tags_is-big {
      @include rem(height, 50);
      @include rem(width, 50);
      @include rem(line-height, 50);
      @include rem(font-size, 32);
    }
  }
}

$module-name: '.form-item';
.form-item {
  position: relative;
  // @include rem(min-width, 320);
  //@include rem(margin-bottom, 15);
  @include rem(margin-bottom, 10);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  &_is-static {
    @include rem(margin-bottom, 10);
    border-bottom: 1px solid $m4;
    #{$module-name}__control {
      @include rem(min-height, 24);
      #{$module-name}__multi-list {
        border-bottom: 0px;
      }
      #{$module-name}__text {
        margin-top: 0;
        margin-bottom: 0;
        color: $m1;
        // @include f-to();
        // @include rem(text-indent, 5);
      }
      #{$module-name}__link {
        @include rem(margin-left, 5);
        @include font-h5();
        &:hover {
          outline: 0;
          color: $c3;
          text-decoration: underline;
        }
      }
      .sys-icon-cus-bianji {
        color: $m3;
      }
      &:hover {
        .sys-icon-cus-bianji {
          color: $m2;
        }
      }
      .sys-icon-cus-bianji:hover {
        color: $c3;
        cursor: pointer;
      }
    }
    #{$module-name}__avatar-list {
      // @include rem(padding-left, 5);
    }
    #{$module-name}__avatar-item {
      @include rem(margin-bottom, 5);
      @include rem(margin-right, 5);
      @include rem(line-height, 0);
      #{$module-name}__text {
        vertical-align: middle;
      }
    }
  }
  &_is-hidden-tips {
    position: absolute;
    width: calc(100% - 20px);
    line-height: 28px;
    height: 28px;
    margin-left: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: transparent;
    cursor: text;
    font-size: 12px;
    font-family: $font-family-a;
  }
  &__title {
    position: relative;
    max-width: 100%;
    vertical-align: middle;
    @include font-h6();
    color: $m2;
    @include f-to();
    #{$module-name}__text {
      font-size: inherit;
      line-height: inherit;
      font-family: inherit;
      @include rem(text-indent, 5);
      max-width: inherit;
      @include f-to();
      vertical-align: middle;
    }
  }
  &__text {
    display: inline-block;
    @include font-h5();
  }
  &__control {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    @include rem(min-height, 25);
    .list_is-edit-status {
      max-height: 131px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    &#{$module-name}__control_is-active {
      #{$module-name}__bottom-line {
        left: 0;
        width: 100%;
        background-color: $c3;
        transition: left $spring .35s, width $spring .35s;
      }
      .u-textarea__tuozhuai-icon {
        .pc-sys-tuozhuai-nomal-svg {
          display: none;
        }
        .pc-sys-tuozhuai-active-svg {
          display: inline-block;
        }
      }
    }
    &#{$module-name}__control_has-info {
      #{$module-name}__explain {
        color: $c3;
      }
      #{$module-name}__bottom-line {
        @include rem(bottom, 20);
      }
      .u-textarea {
        #{$module-name}__bottom-line {
          bottom: 0;
        }
      }
    }
    &#{$module-name}__control_has-error {
      [type="text"]:focus {
        & + #{$module-name}__bottom-line {
          background-color: $error;
        }
      }
      .u-input {
        // max-width: 100% !important;
        height:30px;
      }
      .u-textarea__element:focus {
        & + #{$module-name}__bottom-line {
          background-color: $error;
        }
      }
      #{$module-name}__bottom-line {
        background-color: $error;
      }
      #{$module-name}__explain {
        color: $error;
      }
    }
    &#{$module-name}__control_is-readonly {
      .u-input {
        /*border-bottom-color: #fff;*/
      }
      [type="text"]:focus,
      .u-textarea__element:focus {
        & + .form-item__bottom-line {
          width: 0;
        }
      }
    }
    .u-radio,
    .u-checkbox {
      @include rem(margin-left, 5);
      @include rem(margin-right, 15);
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
    .u-radio {
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      box-sizing: content-box;
    }
    [type="text"]:focus,
    .u-textarea__element:focus {
      & + .form-item__bottom-line {
        left: 0;
        width: 100%;
        background-color: $c3;
        transition: left $spring .35s, width $spring .35s;
        .form-item + .u-textarea__tuozhuai-icon {
          .pc-sys-tuozhuai-nomal-svg {
            display: none;
          }
          .pc-sys-tuozhuai-active-svg {
            display: inline-block;
          }
        }
      }
    }
    #{$module-name}__bottom-line {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 0;
      height: 2px;
    }
  }
  &__explain {
    display: block;
    width: 100%;
    @include rem(min-height, 20);
    @include font-h6();
    @include rem(margin-left, 5);
  }
  &__label {
    display: inline-block;
    @include rem(padding-top, 15);
    @include rem(padding-bottom, 10);
    @include font-h5();
  }
  &__right-icon {
    display: flex;
    align-items: center;
    position: absolute;
    @include rem(top, 5);
    @include rem(right, 5);
    i + i {
      @include rem(margin-left, 5);
    }
    .pc-sys-arrowdown-nomal-svg {
      @include rem(margin-top, 4);
      cursor: pointer;
    }
    .sys-icon-close + .pc-sys-arrowdown-nomal-svg {
      @include rem(margin-top, 0);
    }
  }
  &__multi-list {
    width: 100%;
    @include rem(padding-left, 5);
    border-bottom: 1px solid $m4;
    cursor: pointer;
    min-height: 24px;
    padding-right: 20px;
    #{$module-name}__multi-item {
      @include rem(height, 24);
      @include rem(padding-left, 0);
      @include rem(padding-right, 10);
      @include rem(margin-right, 5);
      @include rem(margin-bottom, 0);
      // background: $m5;
      @include rem(border-radius, 2);
      cursor: default;
      max-width: 100%;
      #{$module-name}__text {
        // @include rem(max-width, 300);
        max-width: 100%;
        @include rem(margin-right, 5);
        color: $m1;
        vertical-align: top;
        @include f-to();
      }
      .sys-icon-close,.sys-icon-cus-renyuan,.sys-icon-cus-chengshi {
        @include rem(font-size, 14);
        vertical-align: middle;
      }
      .sys-icon-cus-renyuan {
        color: $c3;
      }
    }
  }
  &__editable {
    padding-right: 20px;
  }
  &__help {
    .sys-icon-cus-bangzhu {
      font-size: 14px;
      margin-left: 5px;
      vertical-align: middle;
      color: $c2;
      opacity: 0.5;
    }
  }
  .user-select-items li {
    @include rem(margin-right, 0);
    color: $c2;
    #{$module-name}__text {
      color: $c2;
    }
  }
  .area-select-items li {
    @include rem(margin-right, 0);
    .sys-icon-cus-chengshi {
      color: $m3;
    }
  }
}
// // IE 10 & 11 hack
// @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
// 	.form-item {
//     &__multi-list {
//       #{$module-name}__multi-item {
//         #{$module-name}__text {
//           max-width: calc(100% - 18px);
//         }
//       }
//     }
//   }
// }