@use "sass:math";
@import "mixins/mixins";
@import "common/var";
@import "input";

@include b(input-number) {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  width: 180px;
  line-height: #{$--input-height - 2};

  div.el-input {
    display: block;
    .el-input__inner {
      -webkit-appearance: none;
      padding-left: $--input-height;
      padding-right: $--input-height;
      text-align: center;
    }
    .el-input__prefix {
      left: #{$--input-height + 5};
      line-height: $--input-height;
      color: $--disabled-color-base;
    }
    .el-input__suffix {
      right: #{$--input-height + 5};
      line-height: $--input-height;
      color: $--disabled-color-base;
    }
  }

  @include e((increase, decrease)) {
    position: absolute;
    z-index: 1;
    top: 1px;
    width: $--input-height;
    height: auto;
    text-align: center;
    background: $--background-color-base;
    color: $--color-text-primary;
    cursor: pointer;
    font-size: 13px;

    &:hover {
      color: $--color-primary;
      &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
        border-color:  $--input-disabled-border;
      }
    }

    &.is-disabled {
      color: $--disabled-color-base;
      cursor: not-allowed;
    }
  }

  @include e(increase) {
    right: 1px;
    border-radius: 0 $--border-radius-base $--border-radius-base 0;
    border-left: $--border-base;
  }

  @include e(decrease) {
    left: 1px;
    border-radius: $--border-radius-base 0 0 $--border-radius-base;
    border-right: $--border-base;
  }

  @include when(disabled) {
    @include e((increase, decrease)) {
      opacity: 0.6;
      border-color: $--disabled-border-base;
      color: $--disabled-color-base;

      &:hover {
        color: $--disabled-color-base;
        cursor: not-allowed;
      }
    }
  }

  @include m(medium) {
    width: 160px;
    line-height: #{$--input-medium-height - 2};

    @include e((increase, decrease)) {
      width: $--input-medium-height;
      font-size: $--input-medium-font-size;
    }

    div.el-input {
      display: block;
      .el-input__inner {
        padding-left: $--input-medium-height;
        padding-right: $--input-medium-height;
      }
      .el-input__prefix {
        left: #{$--input-medium-height + 5};
        line-height: $--input-medium-height;
      }
      .el-input__suffix {
        right: #{$--input-medium-height + 5};
        line-height: $--input-medium-height;
      }
    }
  }

  @include m(small) {
    width: 150px;
    line-height: #{$--input-small-height - 2};

    @include e((increase, decrease)) {
      width: $--input-small-height;
      font-size: $--input-small-font-size;

      [class*=el-icon] {
        transform: scale(.9);
      }
    }

    div.el-input {
      display: block;
      .el-input__inner {
        padding-left: $--input-small-height;
        padding-right: $--input-small-height;
      }
      .el-input__prefix {
        left: #{$--input-small-height + 5};
        line-height: $--input-small-height;
      }
      .el-input__suffix {
        right: #{$--input-small-height + 5};
        line-height: $--input-small-height;
      }
    }
  }

  @include m(mini) {
    width: 140px;
    line-height: #{$--input-mini-height - 2};

    @include e((increase, decrease)) {
      width: $--input-mini-height;
      font-size: $--input-mini-font-size;

      [class*=el-icon] {
        transform: scale(.8);
      }
    }

    div.el-input {
      display: block;
      .el-input__inner {
        padding-left: $--input-mini-height;
        padding-right: $--input-mini-height;
      }
      .el-input__prefix {
        left: #{$--input-mini-height + 5};
        line-height: $--input-mini-height;
      }
      .el-input__suffix {
        right: #{$--input-mini-height + 5};
        line-height: $--input-mini-height;
      }
    }
  }

  @include when(without-controls) {
    .el-input__inner {
      padding-left: 15px;
      padding-right: 15px;
    }
  }

  @include when(controls-right) {
    div.el-input {
      .el-input__inner {
        padding-left: 0;
      }
      .el-input__prefix{
        left: 5px;
      }
    }

    @include e((increase, decrease)) {
      height: auto;
      line-height: #{math.div($--input-height - 2, 2)};

      [class*=el-icon] {
        transform: scale(.8);
      }
    }

    @include e(increase) {
      border-radius: 0 $--border-radius-base 0 0;
      border-bottom: $--border-base;
    }

    @include e(decrease) {
      right: 1px;
      bottom: 1px;
      top: auto;
      left: auto;
      border-right: none;
      border-left: $--border-base;
      border-radius: 0 0 $--border-radius-base 0;
    }

    &[class*=medium] {
      [class*=increase], [class*=decrease] {
        line-height: #{math.div($--input-medium-height - 2, 2)};
      }
    }

    &[class*=small] {
      [class*=increase], [class*=decrease] {
        line-height: #{math.div($--input-small-height - 2, 2)};
      }
    }

    &[class*=mini] {
      [class*=increase], [class*=decrease] {
        line-height: #{math.div($--input-mini-height - 2, 2)};
      }
    }
  }
}