@import "../mixins/mixins";
@import "../mixins/utils";
@import "../config/variables";
@import "./input";

@include b(input-number) {
  position: relative;
  display: inline-block;
  width: 100%;
  min-width: 104px;
  border-radius: $--border-radius;
  box-sizing: border-box;
  border: 1px solid $--color-silver;

  @include e(inner) {
    line-height: 24px;
    font-size: 13px;
    color: $--color-text;
    text-align: center;
    display: inline-block;
    padding: $--size-base - 1 $--size-base * 2 - 1;
    width: calc(100% - 62px);
    position: relative;
    z-index: 0;
    box-sizing: border-box;
    vertical-align: middle;
    @include utils-user-select(none);
  }

  @include e((increase, decrease)) {
    position: relative;
    z-index: 1;
    width: 31px;
    height: 30px;
    display: inline-block;
    padding: $--size-base - 1 $--size-base $--size-base - 1 $--size-base - 1;
    text-align: center;
    color: $--color-text;
    background: $--color-disabled;
    cursor: pointer;
    font-size: 24px;
    border: none;
    vertical-align: middle;
    box-sizing: border-box;
    outline: none !important;
    transition: all .1s ease-in-out;
    &:hover {
      color: $--color-dark;
    }
    &:focus {
      //box-shadow: inset 0 0 0 2px $--color-focus;
      color: $--color-focus;
    }
    &:active {
      color: $--color-light;
    }
    @include when(disabled) {
      color: $--color-silver;
      box-shadow: none;
      cursor: not-allowed;
    }
  }

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

  @include e(decrease) {
    border-radius: $--border-radius 0 0 $--border-radius;
  }

  @include when(disabled) {
    cursor: not-allowed;
    @include e((increase, decrease)) {
      color: $--color-silver;
      box-shadow: none;
      cursor: not-allowed;
    }
  }
}