// @import '../_utils.scss';
// @mixin handler-disabled() {
//   opacity: $inputnumber-mixin-disabled-opacity;
//   color: $inputnumber-mixin-disabled-color !important;
//   cursor: $cursor-disabled;
//   @include theme-font-color($__input-number_disabled_font-color, $--important);
// }

.#{$input-number-prefix-cls} {
  $radius-wrap: 0 $btn-border-radius $btn-border-radius 0;

  @include input();
  padding: 0;

  margin: 0;

  @if $--size-switch == no {
    padding: 0;
    height: $input-height-base;
    line-height: $input-height-base;
  }
  width: $inputnumber-width;
  vertical-align: middle;
  border: 1px solid $border-color-base;
  border-radius: $btn-border-radius;
  overflow: hidden;

  @include theme-border-color($__input-number_border-color);

  &-handler-wrap {
    min-width: $inputnumber-handler-wrap-min-width;
    float: right;
    @if $--size-switch == no {
      height: 100%;
    }
    border-left: 1px solid $border-color-base;
    border-radius: $radius-wrap;
    background: $inputnumber-handler-wrap-background;
    // position: absolute;
    // top: 0;
    // right: 0;
    opacity: 1;
    transition: opacity $transition-time $ease-in-out;

    @include theme-border-color($__input-number-handler_border-color);
    @include theme-background-color($__input-number-handler_background-color);
  }

  &-arrow-wrap {
    width: $inputnumber-arrow-wrap-width;
    float: left;
  }

  &-prepend,
  &-append {
    white-space: nowrap;
    vertical-align: middle;
  }

  &-append {
    float: left;
    font-weight: normal;
    color: $input-color;
    text-align: center;
    background-color: $inputnumber-append-background;
    display: flex;
    align-items: center;

    @if $--size-switch == yes {
      font-size: $--size-font-size-base;
      line-height: $--size-line-height-base;
      padding: max(($--size-height-base - $--size-line-height-base) / 2 - 1, 0) $input-padding-horizontal;
    }

    @else {
      padding: $inputnumber-padding-vertical $input-padding-horizontal;
      font-size: inherit;
      line-height: 1;
      height: inherit;
    }

    @include theme-font-color($__input-number-append_font-color);
    @include theme-background-color($__input-number-append_background-color);
    @include theme-border-left($__input-number-append_border-left);
  }

  // &-append > input{

  // }


  // &:hover &-handler-wrap {
  //   opacity: 1;
  // }

  &-handler-up {
    cursor: pointer;

    &-inner {
      top: $inputnumber-handler-up-inner-top;
    }
  }

  &-handler-down {
    border-top: 1px solid $border-color-base;
    top: $inputnumber-handler-down-top;
    cursor: pointer;

    @include theme-border-color($__input-number-handler-down_border-color);
  }

  &-handler {
    display: block;
    width: 100%;

    @if $--size-switch == yes {
      height: ($--size-height-base - 2) / 2;
    }

    @else {
      height: $input-height-base / 2;
    }
    line-height: 0;
    text-align: center;
    overflow: hidden;
    color: $inputnumber-handler-color;
    position: relative;

    @include theme-font-color($__input-number-handler_font-color);

    &:hover &-up-inner,
    &:hover &-down-inner {
      color: lighten($primary-color, 20%);

      @include theme-font-color($__input-number-handler-up-down_hover_font-color);
    }

    &:active {
      @include theme-background-color($__input-number-handler_active_background-color);
      .#{$input-number-prefix-cls}-handler {
        &-up-inner,
        &-down-inner {
          @include theme-font-color($__input-number-handler-up-down_active_font-color);
        }
      }
    }
  }

  &-handler-up-inner,
  &-handler-down-inner {
    width: $inputnumber-handler-down-inner-width;
    height: $inputnumber-handler-down-inner-height;
    line-height: $inputnumber-handler-down-inner-line-height;
    font-size: $font-size-base;
    color: $inputnumber-handler-down-inner-color;
    user-select: none;
    position: absolute;
    right: $inputnumber-handler-down-inner-right;
    transition: all $transition-time linear;

    @include theme-font-color($__input-number-handler-up-down_font-color);
  }

  &:hover {
    @include hover();
  }

  &-focused {
    @include active();
  }



  &-input-wrap {
    overflow: hidden;

    @if $--size-switch == no {
      height: $input-height-base;
    }
  }

  &-input {
    // @include input();
    font-size: $--size-font-size-base;
    @include computed-height($--size-height-base);
    width: 100%;

    @if $--size-switch == no {
      height: $input-height-base;
      line-height: $input-height-base;
      // padding: $inputnumber-input-padding;
      padding: 0 2px 0 12px;
    }
    text-align: left;
    outline: 0;
    -moz-appearance: textfield;
    color: $inputnumber-input-color;
    border: 0;
    border-radius: $btn-border-radius;
    transition: all $transition-time linear; 

    @include theme-font-color($__input-number-input_font-color);
    @include theme-background-color($__input-number-input_background-color);
    @include placeholder();

    &[disabled] {
      @include disabled();
    }
  }

  &-large {
    padding: 0;
    @if $--size-switch == no {
      padding: 0;
      .#{$input-number-prefix-cls}-input-wrap {
        height: $input-height-large;
      }
      .#{$input-number-prefix-cls}-handler {
        height: $input-height-large / 2;
      }

      input {
        height: $input-height-large;
        line-height: $input-height-large;
      }
    }

    @else {
      .#{$input-number-prefix-cls}-input{ 
        @include computed-height($--size-height-base + 4);
      }
      .#{$input-number-prefix-cls}-handler {
        height: ($--size-height-base + 2) / 2;
      }
      .#{$input-number-prefix-cls}-append {
        padding: max(($--size-height-base + 4 - $--size-line-height-base) / 2 - 1, 0) $input-padding-horizontal;
      }
    }

    .#{$input-number-prefix-cls}-handler-up-inner {
      top: $inputnumber-large-handler-up-inner-top;
    }
    .#{$input-number-prefix-cls}-handler-down-inner {
      bottom: $inputnumber-large-handler-down-inner-bottom;
    }
    
  }

  &-small {
    padding: 0;
    @if $--size-switch == no {
      padding: 0;
      .#{$input-number-prefix-cls}-input-wrap {
        height: $input-height-small;
      }
      .#{$input-number-prefix-cls}-handler {
        height: $input-height-small / 2;
      }
    }

    @else {
      .#{$input-number-prefix-cls}-input{ 
        @include computed-height($--size-height-base - 4);
      }
      .#{$input-number-prefix-cls}-handler {
        height: ($--size-height-base - 6) / 2;
      }
      .#{$input-number-prefix-cls}-append {
        padding: max(($--size-height-base - 4 - $--size-line-height-base) / 2 - 1, 0) $input-padding-horizontal;
      }
    }

    input {
      @if $--size-switch == no {
        height: $input-height-small;
        line-height: $input-height-small;
        margin-top: -1px;
      }
      vertical-align: top;
    }
    .#{$input-number-prefix-cls}-handler-up-inner {
      top: $inputnumber-small-handler-up-inner-top;
    }
    .#{$input-number-prefix-cls}-handler-down-inner {
      bottom: $inputnumber-small-handler-down-inner-bottom;
    }
  }


  // &-handler-down-disabled,
  // &-handler-up-disabled,
  // &-disabled {
  //   .#{$input-number-prefix-cls}-handler-down-inner,
  //   .#{$input-number-prefix-cls}-handler-up-inner {
  //     @include handler-disabled();
  //   }
  // }

  // &-disabled {
  // }
  &-disabled {
    @include disabled();
    .#{$input-number-prefix-cls}-input {
      opacity: $inputnumber-disabled-opacity;
      cursor: $cursor-disabled;
      background-color: $input-disabled-bg;

      @include theme-background-color($__input-number_disabled_background-color);
      @include theme-opacity($__input-number-input_readonly_opacity);
    }

    &:hover {
      @include theme-border-color($__input-number_readonly_border-color);
    }
    .#{$input-number-prefix-cls}-append {
      color: $inputnumber-disabled-color;
      @include theme-background-color($__input-number-handler_readonly_background-color);
      @include theme-font-color($__input-number-append_readonly_font-color);
    }
    .#{$input-number-prefix-cls}-handler-wrap {
      background-color: $input-disabled-bg;
      
      @include theme-background-color($__input-number-handler_readonly_background-color);
      .#{$input-number-prefix-cls}-handler {
        &:hover &-up-inner,
        &:hover &-down-inner {
          color: $inputnumber-disabled-color;
          @include theme-font-color($__input-number-handler-up-down_readonly_font-color);
        }

        &:active &-up-inner,
        &:active &-down-inner {
          color: $inputnumber-disabled-color;
          @include theme-font-color($__input-number-handler-up-down_readonly_font-color);
        }

        &-up-inner,
        &-down-inner {
          color: $inputnumber-disabled-color;
          @include theme-font-color($__input-number-handler-up-down_readonly_font-color);
        }
      }
    }
    // .#{$input-number-prefix-cls}-handler-wrap {
    //   display: none;
    // }
    // .#{$input-number-prefix-cls}-handler {
    //   @include handler-disabled();
    // }
  }

  &-readonly {
    .#{$input-number-prefix-cls}-input {
      opacity: $inputnumber-readonly-opacity;
      background-color: $input-disabled-bg;

      @include theme-background-color($__input-number-input_readonly_background-color);
      @include theme-opacity($__input-number-input_readonly_opacity);
      @include theme-font-color($__input-number-input_readonly_font-color);
    }

    &:hover {
      @include theme-border-color($__input-number_readonly_border-color);
    }
    .#{$input-number-prefix-cls}-append {
      color: $inputnumber-disabled-color;
      @include theme-background-color($__input-number-handler_readonly_background-color);
      @include theme-font-color($__input-number-append_readonly_font-color);
    }
    .#{$input-number-prefix-cls}-handler-wrap {
      background-color: $input-disabled-bg;
      @include theme-background-color($__input-number-handler_readonly_background-color);
      .#{$input-number-prefix-cls}-handler {
        &:hover &-up-inner,
        &:hover &-down-inner {
          color: $inputnumber-disabled-color;
          @include theme-font-color($__input-number-handler-up-down_readonly_font-color);
        }

        &:active &-up-inner,
        &:active &-down-inner {
          color: $inputnumber-disabled-color;
          @include theme-font-color($__input-number-handler-up-down_readonly_font-color);
        }

        &-up-inner,
        &-down-inner {
          color: $inputnumber-disabled-color;
          @include theme-font-color($__input-number-handler-up-down_readonly_font-color);
        }
      }
    }
  }

  &-readonly.#{$input-number-prefix-cls}-focused {
    @include theme-border-color($__input-number_readonly_border-color);
    @include theme-box-shadow($__input-number_readonly_box-shadow);
  }
}

.#{$form-item-prefix-cls}-error {
  .#{$input-number-prefix-cls} {
    @include input-error;

    &-focused {
      @include active-error;
    }
  }
}
.#{$form-item-prefix-cls}-changed {
  .#{$input-number-prefix-cls} {
    @include changed;

    &-input {
      @include theme-font-color($__input-number-form-item-input_changed_font-color);
    }
  }
}