@import "mixins/mixins";
@import "common/var";
@import "input";

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

  .el-input {
    display: block;

    &__inner {
      -webkit-appearance: none;
      padding-left: #{$--input-height + 10};
      padding-right: #{$--input-height + 10};
      text-align: center;
    }
  }

  @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-regular;
    cursor: pointer;
    font-size: 13px;

    &:hover {
      color: $--color-primary;

      &:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
        border-color: $--input-focus-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)) {
      border-color: $--disabled-border-base;
      color: $--disabled-border-base;

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

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

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

    .el-input__inner {
      padding-left: #{$--input-medium-height + 7};
      padding-right: #{$--input-medium-height + 7};
    }
  }

  @include m(small) {
    width: 130px;
    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);
      }
    }

    .el-input__inner {
      padding-left: #{$--input-small-height + 7};
      padding-right: #{$--input-small-height + 7};
    }
  }

  @include m(mini) {
    width: 130px;
    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);
      }
    }

    .el-input__inner {
      padding-left: #{$--input-mini-height + 7};
      padding-right: #{$--input-mini-height + 7};
    }
  }

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

  @include when(controls-right) {
    .el-input__inner {
      padding-left: 15px;
      padding-right: #{$--input-height + 10};
    }

    @include e((increase, decrease)) {
      height: auto;
      line-height: #{($--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: #{($--input-medium-height - 2) / 2};
      }
    }

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

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