@import "./var.scss";
@import "./mixin.scss";

@include b(input) {
  position: relative;
  width: $input-width;
  background-color: $input-background-color;

  @include e(inner) {
    height: $input-height;
    line-height: $input-height;
    width: 100%;
    border: none;
    padding: $input-padding;
    font-size: $input-font-size;
    box-sizing: border-box;
    background-image: none;
    outline: none;
    border-radius: $input-border-radius;
    border: $input-border;
    color: $input-font-color;

    &::placeholder {
      color: $input-placeholder-font-color;
    }

    &:hover {
      border-color: $input-border-color-hover;
    }

    &:focus {
      outline: none;
      border-color: $input-border-color-focus;
    }

    @include m(placeholder){
      color: $input-placeholder-font-color;
    }
  }

  @include e(icon) {
    position: absolute;
    width: $input-icon-width;
    height: $input-height;
    line-height: $input-height;
    right: 0;
    top: 0;
    text-align: center;
    color: $input-icon-color;

    & + .#{$namespace}-input#{$element-separator}inner {
      padding-right: $input-icon-width;
    }
    @include when(select) {
      color: $input-icon-color-select;
    }
  }

  @include e(select-icon) {
    @media (hover: hover) {
      @include hover(hover);
    }
    @media (hover: none) {
      @include hover(active);
    }
  }


  @include e(prefix-icon) {
    position: absolute;
    width: $input-icon-width;
    height: $input-height;
    line-height: $input-height;
    left: 0;
    top: 0;
    text-align: center;
    color: $input-icon-color;

    & + .#{$namespace}-input#{$element-separator}inner {
      padding-left: $input-icon-width;
    }
    // 不能加hover，移动端不正常，需要js模拟鼠标划入

    // &:hover {
    //   cursor: pointer;
    //   color: $input-icon-color-hover;
    // }
  }

  @include e(limit) {
    position: absolute;
    height: $input-height;
    line-height: $input-height;
    right: 0;
    top: 0;
    text-align: center;
    width: $input-limit-width;
    font-size: $input-limit-font-size;
    color: $input-icon-color;

    & + .#{$namespace}-input#{$element-separator}inner {
      padding-right: $input-limit-width;
    }
  }

  @include e(append) {
    position: absolute;
    height: $input-height;
    line-height: $input-height;
    right: 0;
    top: 0;
    color: $input-icon-color;
  }

  @include when(disabled) {
    .#{$namespace}-input#{$element-separator}inner {
      background-color: $input-background-color-disabled;
      border-color: $input-border-color-disabled;
      color: $input-font-color-disabled;
      cursor: not-allowed;

      &::placeholder {
        color: $input-placeholder-color-disabled;
      }
    }

    .el-input__icon {
      cursor: not-allowed;
    }
  }

  @include when(focus) {
    @include e(inner) {
    border-color: $input-border-color-focus;
    }
    // @include e(icon) {
    //   color: $input-icon-color-focus;
      // 不能加hover，移动端不正常，需要js模拟鼠标划入
      // &:hover {
      //   cursor: pointer;
      //   color: $input-icon-color-hover;
      // }
    // }

    @include e(prefix-icon) {
      color: $input-icon-color-focus;
      // 不能加hover，移动端不正常，需要js模拟鼠标划入

      // &:hover {
      //   cursor: pointer;
      //   color: $input-icon-color-hover;
      // }
    }
  }
}