.#{$prefix}input {
  &-box {
    display: flex;
    height: 32px;

    &-input {
      @include border(all);

      box-sizing: border-box;
      width: 100%;
      background: $nothing-color;
      padding: 0 10px;
      font-size: 14px;
      color: $title-color;
      letter-spacing: 1px;
      line-height: 18px;
      transition: border 0.2s ease-in-out;
      // 自动填充
      &:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px #fff inset;
      }

      &:focus {
        @include border(all,$btn-color);

        background: $nothing-color;
        outline: none;
      }

      &[disabled] {
        background-color: $input-disable-color;
        opacity: 1;
        cursor: not-allowed;
        color: $input-disable-text-color;
      }
    }

    &-text {
      padding-left: 10px;
      margin-top: 4px;
      font-size: 12px;
      color: $color-danger;
      letter-spacing: 1.08px;
      line-height: 18px;
    }

    &-icon {
      box-sizing: border-box;
      height: 32px;
      background: $nothing-color;
      position: relative;
      color: $icon-color-default;

      &-el-icon {
        position: absolute;
        top: 50%;
        left: 8px;
        width: 14px;
        height: 14px;
        font-size: 12px;
        transform: translate3d(0, -50%, 0);
        line-height: 18px;
      }

      & input {
        text-indent: 24px;
        height: 100%;
      }
    }
  }

  & input::-webkit-input-placeholder {
    color: $text-color;
    letter-spacing: 1.08px;
    line-height: 18px;
    font-size: 14px;
  }

  & .error {
    @include border(all,$color-danger);
  }
}