.#{$namespace} {
  // 1
  &-form {
    // 隐藏单选和多选input
    input[type="checkbox"] {
      display: none;
    }
    input[type="radio"] {
      display: none;
    }
    select {
      display: none;
    }
    [hui-ignore] {
      display: initial;
    }

    // item
    &-item {
      position: relative;
      @include clear();
      margin-bottom: 15px;
      *zoom: 1;
      &::after {
        content: "\20";
        clear: both;
        *zoom: 1;
        display: block;
        height: 0;
      }
      label {
        position: relative;
        float: left;
        display: block;
        padding: 9px 15px;
        // width: 80px;
        color: $g-333;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
        width: 110px;

        &-col {
          display: block;
          float: none;
          padding: 9px 0;
          line-height: 20px;
          text-align: left;
        }
      }
      .#{$namespace} {
        &-inline {
          margin-bottom: 5px;
          margin-right: 10px;
        }

        &-input-inline {
          float: left;
          width: 190px;
          margin-right: 10px;
        }
      }
    }

    &-text {
      .#{$namespace} {
        &-input-inline {
          width: auto;
        }
      }
    }

    &-mid {
      position: relative;
      float: left;
      display: block;
      padding: 9px 0 !important;
      line-height: 20px;
      margin-right: 10px;
    }
    &-danger + &-select {
      .#{$namespace}-input {
        border-color: #ff5722 !important;
        box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.08);
      }
    }
    &-danger:focus {
      border-color: #ff5722 !important;
      box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.08);
    }
  }
  // 1/1

  &-input-block,
  &-input-inline {
    position: relative;
  }

  &-input-block {
    margin-left: 110px;
    min-height: 36px;
  }

  &-input-inline {
    display: inline-block;
    vertical-align: middle;
  }

  // 2
  &-input {
    &-prefix,
    &-split,
    &-suffix {
      position: absolute;
      right: 0;
      top: 0;
      padding: 0 10px;
      width: 35px;
      height: 100%;
      text-align: center;
      @include transition();
    }
    &-suffix .#{$namespace}-input-affix {
      position: absolute;
      right: 0;
      top: 0;
      padding: 0 10px;
      width: 35px;
      height: 100%;
      @include transition();
    }
    &-prefix {
      left: 0;
      border-radius: 2px 0 0 2px;
    }
    &-suffix {
      right: 0;
      border-radius: 0 2px 2px 0;
    }
    &-split {
      border-width: 1px;
      border-style: solid;
    }
    &-prefix [class^="icon-"],
    &-split [class^="icon-"],
    &-suffix [class^="icon-"] {
      position: relative;
      font-size: $ft-bs;
      color: $g-700;
      @include transition();
    }
    // 组
    &-group {
      position: relative;
      display: table;
      & > * {
        display: table-cell;
        vertical-align: middle;
        position: relative;
      }

      & > .#{$namespace} {
        &-input {
          vertical-align: middle;
          display: table-cell;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;

          &-prefix {
            width: auto;
            border-right: 0;
          }
          &-suffix {
            width: auto;
            border-left: 0;
          }
          &-split {
            white-space: nowrap;
          }
        }
      }
    }
    //

    &-wrap {
      position: relative;
      line-height: 38px;
      .#{$namespace} {
        &-input {
          padding-right: 35px;
          &::-ms-check,
          &::-ms-reveal {
            display: none;
          }
          // 1
          &-prefix + .hui-input,
          &-prefix ~ .hui-input {
            padding-left: 35px;
          }
          // 2
          &-split + .hui-input,
          &-split ~ .hui-input {
            padding-left: 45px;
          }
          // 3
          &-prefix ~ .hui-form-select {
            position: static;
          }
          // 4
          &-prefix,
          &-split,
          &-suffix {
            pointer-events: none;
          }

          &:hover + .hui-input-split {
            border-color: #d2d2d2;
          }
          &:focus + .layui-input-split {
            border-color: $primary;
          }
        }
      }
      // 0
      .hui-input-prefix.hui-input-split {
        border-width: 0;
        border-right-width: 1px;
      }
    }
    &-affix {
      line-height: 38px;
    }

    &-affix {
      .#{$namespace} {
        &-input-affix {
          right: auto;
          left: -35px;
        }
        [class^="icon-"],
        &-icon {
          color: rgba(0, 0, 0, 0.8);
          pointer-events: auto !important;
          cursor: pointer;
          &:hover {
            color: rgba(0, 0, 0, 0.6);
          }
        }
        &-icon-clear {
          color: rgba(0, 0, 0, 0.3);
        }
      }
    }

    &-warp {
      .#{$namespace} {
        &-input {
          &-number {
            width: 24px;
            padding: 0;
            .#{$namespace}-icon,
            [class^="icon-"] {
              position: absolute;
              right: 0;
              width: 100%;
              height: 50%;
              line-height: normal;
              font-size: $ft-sm;
            }
            .#{$namespace}-icon:before,
            [class^="icon-"]:before {
              position: absolute;
              left: 50%;
              top: 50%;
              margin-top: -6px;
              margin-left: -6px;
            }
            .#{$namespace}-up {
              top: 0;
              border-bottom: 1px solid #eee;
            }
            .#{$namespace}-icon-down {
              bottom: 0;
            }
          }

          &[type="number"]::-webkit-inner-spin-button,
          &[type="number"]::-webkit-outer-spin-button {
            -webkit-appearance: none !important;
          }

          &[type="number"] {
            -moz-appearance: textfield;
          }
        }
      }
    }
  }

  // 3
  &-form-select {
    position: relative;
    color: #5f5f5f;

    .#{$namespace} {
      &-input {
        padding-right: 30px;
        cursor: pointer;
      }
      &-edge {
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -3px;
        cursor: pointer;
        border-width: 6px;
        border-top-color: #c2c2c2;
        border-top-style: solid;
        @include transition();
      }
    }

    dl {
      display: none;
      position: absolute;
      left: 0;
      top: 42px;
      padding: 5px 0;
      z-index: 899;
      min-width: 100%;
      border: 1px solid #eee;
      max-height: 300px;
      overflow-y: auto;
      background-color: $white;
      border-radius: 2px;
      box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
      dd,
      dt {
        padding: 0 10px;
        line-height: 36px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      dt {
        font-size: $ft-sm;
        color: $g-333;
      }
      dd {
        cursor: pointer;
        &:hover {
          background-color: $g-100;
          -webkit-transition: 0.5s all;
          transition: 0.5s all;
        }

        &.#{$namespace}-select-tips {
          padding-left: 10px !important;
          color: $g-999;
        }
        &.#{$namespace}-this {
          background-color: $g-100;
          color: $primary;
          font-weight: 700;
        }
        &.#{$namespace}-disabled {
          background-color: $white;
        }
      }
    }

    .#{$namespace}-select-group dd {
      padding-left: 20px;
    }
  }

  &-form-selected {
    dl {
      display: block;
    }
    .#{$namespace}-edge {
      margin-top: -9px;
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }
  &-form-selectuo dl {
    top: auto;
    bottom: 42px;
  }

  &-select-none {
    margin: 5px 0;
    text-align: center;
    color: #999;
  }

  &-select-disabled &-disabled {
    border-color: #eee !important;
  }
  &-select-disabled &-edge {
    border-color: #eee !important;
  }
}
:root .#{$namespace}-selected .#{$namespace}-edge {
  margin-top: -9px\0 / IE9;
}

// 多选框
.#{$namespace} {
  &-form-checkbox {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    line-height: 30px;
    margin-right: 10px;
    padding-right: 30px;
    background-color: #fff;
    cursor: pointer;
    font-size: 0;
    -webkit-transition: 0.1s linear;
    transition: 0.1s linear;
    box-sizing: border-box;
    & > * {
      display: inline-block;
      vertical-align: middle;
    }

    & > div {
      padding: 0 11px;
      font-size: 14px;
      border-radius: 2px 0 0 2px;
      background-color: #d2d2d2;
      color: #fff;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    &:hover > div {
      background-color: #c2c2c2;
    }

    & > i {
      position: absolute;
      right: 0;
      top: 0;
      width: 30px;
      height: 100%;
      border: 1px solid #d2d2d2;
      border-left: none;
      border-radius: 0 2px 2px 0;
      color: #fff;
      color: rgba(255, 255, 255, 0);
      font-size: 20px;
      text-align: center;
      box-sizing: border-box;
    }

    &:hover > i {
      border-color: #c2c2c2;
      color: #c2c2c2;
    }
  }

  &-form-checke:hover,
  &-form-checke {
    color: $primary;
  }

  &-form-checke:hover > i,
  &-form-checke > i {
    color: $primary;
  }
  &-form-checke:hover > div,
  &-form-checke > div {
    background-color: $primary;
  }
  &-form-item &-form-checkbox {
    margin-top: 4px;
  }
  &-form-checkbox.hui-checkbox-disabled > div {
    background-color: #eee !important;
  }
  &-form[hui-checkbox] {
    display: none;
  }

  &-form-checkbox[hui-skin="primary"] {
    height: auto !important;
    line-height: normal !important;
    min-width: 18px;
    min-height: 18px;
    border: none !important;
    margin-right: 0;
    padding-left: 24px;
    padding-right: 0;
    background: 0 0;
  }

  &-form-checkbox[hui-skin="primary"] > div {
    margin-top: -1px;
    padding-left: 0;
    padding-right: 15px;
    line-height: 18px;
    background: 0 0;
    color: #5f5f5f;
  }

  &-form-checkbox[hui-skin="primary"] > i {
    right: auto;
    left: 0;
    width: 16px;
    height: 16px;
    line-height: 14px;
    border: 1px solid #d2d2d2;
    font-size: 12px;
    border-radius: 2px;
    background-color: #fff;
    -webkit-transition: 0.1s linear;
    transition: 0.1s linear;
  }

  &-form-checkbox[hui-skin="primary"]:hover > i {
    border-color: $primary;
    color: $white;
  }

  &-form-checked[hui-skin="primary"] > i {
    border-color: $primary !important;
    border-color: $primary;
    color: $white;
  }

  &-checkbox-disabled[hui-skin="primary"] > div {
    background: 0 0 !important;
  }

  &-form-checked.hui-checkbox-disabled[hui-skin="primary"] > i {
    background: #eee !important;
    border-color: #eee !important;
  }

  &-checkbox-disabled[lay-skin="primary"]:hover > i {
    border-color: #d2d2d2;
  }

  &-form-item &-form-checkbox[hui-skin="primary"] {
    margin-top: 10px;
  }

  &-form-checkbox[hui-skin="primary"] > &-icon-indeterminate {
    border-color: $primary;
  }

  &-form-checkbox[hui-skin="primary"] > &-icon-indeterminate:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 50%;
    height: 1px;
    margin: -1px auto 0;
    background-color: $primary;
  }
}
.#{$namespace} {
  &-form-switch {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    line-height: 22px;
    min-width: 44px;
    padding: 0 5px;
    margin-top: 8px;
    border: 1px solid #d2d2d2;
    border-radius: 20px;
    cursor: pointer;
    box-sizing: border-box;
    background-color: $white;
    -webkit-transition: 0.1s linear;
    transition: 0.1s linear;
  }

  &-form-switch > i {
    position: absolute;
    left: 5px;
    top: 3px;
    width: 16px;
    height: 16px;
    border-radius: 20px;
    background-color: #d2d2d2;
    -webkit-transition: 0.1s linear;
    transition: 0.1s linear;
  }

  &-form-switch > div {
    position: relative;
    top: 0;
    margin-left: 21px;
    padding: 0 !important;
    text-align: center !important;
    color: $g-999 !important;
    font-style: normal !important;
    font-size: 12px;
  }

  &-form-onswitch {
    border-color: $primary;
    background-color: $primary;
  }

  &-form-onswitch > i {
    left: 100%;
    margin-left: -21px;
    background-color: $white;
  }

  &-form-onswitch > div {
    margin-left: 0;
    margin-right: 21px;
    color: $white !important;
  }

  &-checkbox-disabled {
    border-color: #eee !important;
  }

  &-checkbox-disabled > div {
    color: #c2c2c2 !important;
  }

  &-checkbox-disabled > i {
    border-color: #eee !important;
  }

  &-checkbox-disabled:hover > i {
    color: #fff !important;
  }
}

.#{$namespace} {
  //单选
  &-form-radio {
    display: inline-block;
    vertical-align: middle;
    line-height: 28px;
    margin: 6px 10px 0 0;
    padding-right: 10px;
    cursor: pointer;
    font-size: 0;

    & > * {
      display: inline-block;
      vertical-align: middle;
      font-size: $ft-sm;
    }
    i {
      margin-right: 8px;
      font-size: 22px;
      color: #c2c2c2;
    }
    &:hover > * {
      color: $primary;
    }
  }
  &-form-radioed {
    color: $primary;
    & > i {
      color: $primary;
    }
  }
  &-radio-disabled > i {
    color: #eee !important;
  }
  &-radio-disabled > * {
    color: #c2c2c2 !important;
  }
  &-form [hui-radio] {
    display: none;
  }
}

.#{$namespace} {
  &-form-pane &-form-lable {
    width: 110px;
    padding: 8px 15px;
    height: 38px;
    line-height: 20px;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px 0 0 2px;
    text-align: center;
    background-color: #fafafa;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    box-sizing: border-box;
  }
  &-form-pane &-input-inline {
    margin-left: -1px;
  }

  &-form-pane &-input-block {
    margin-left: 110px;
    left: -1px;
  }

  &-form-pane &-input {
    border-radius: 0 2px 2px 0;
  }

  &-form-pane &-form-text &-form-label {
    float: none;
    width: 100%;
    border-radius: 2px;
    box-sizing: border-box;
    text-align: left;
  }

  &-form-pane &-form-text &-input-inline {
    display: block;
    margin: 0;
    top: -1px;
    clear: both;
  }

  &-form-pane &-form-text &-input-block {
    margin: 0;
    left: 0;
    top: -1px;
  }

  &-form-pane &-form-text &-textarea {
    min-height: 100px;
    border-radius: 0 0 2px 2px;
  }

  &-form-pane &-form-checkbox {
    margin: 4px 0 4px 10px;
  }

  &-form-pane &-form-radio,
  &-form-pane &-form-switch {
    margin-top: 6px;
    margin-left: 10px;
  }

  &-form-pane &-form-item[pane] {
    position: relative;
    border-width: 1px;
    border-style: solid;
  }

  &-form-pane &-form-item[pane] &-form-label {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-width: 0;
    border-right-width: 1px;
  }

  &-form-pane &-form-item[pane] &-input-inline {
    margin-left: 110px;
  }
}
@media screen and (max-width: 450px) {
  .#{$namespace} {
    .hui-form-item .hui-form-label {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    &-form-item &-inline {
      display: block;
      margin-right: 0;
      margin-bottom: 20px;
      clear: both;
    }

    &-form-item &-inline:after {
      content: "\20";
      clear: both;
      display: block;
      height: 0;
    }

    &-form-item &-input-inline {
      display: block;
      float: none;
      left: -3px;
      width: auto !important;
      margin: 0 0 10px 112px;
    }

    &-form-item &-input-inline + &-form-mid {
      margin-left: 110px;
      top: -5px;
      padding: 0;
    }

    &-form-item &-form-checkbox {
      margin-right: 5px;
      margin-bottom: 5px;
    }
  }
}