@input-number-prefix-cls: ~"@{css-prefix}input-number";
@color-bg-disabled: @color-complementary-8;
@input-number-large-font-size: 20px;
.handler-disabled() {
  opacity: 0.72;
  color: @color-text-disabled !important;
  cursor: @cursor-disabled;
}

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

  .input;
  margin: 0;
  padding: 0;
  width: @input-number-width-base;
  height: @input-height-base;
  line-height: @input-height-base;
  vertical-align: middle;
  border: 1px solid @color-border-normal1;
  border-radius: @btn-border-radius;
  overflow: hidden;
  cursor: default;

  &-handler-wrap {
    width: 36px;
    height: 100%;
    border-left: 1px solid @color-border-normal1;
    border-radius: @radius-wrap;
    // background: @color-functional-white;
    background: @color-complementary-10;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 1;
    transition: opacity @transition-time @ease-in-out;
  }

  &:hover &-handler-wrap {
    opacity: 1;
    border-color: @color-border-normal1;
  }

  &-handler-up {
    cursor: pointer;
    &-inner {
      top: 1px;
    }
  }

  &-handler-down {
    border-top: 1px solid @color-border-normal1;
    top: -1px;
    cursor: pointer;
    &-inner {
      bottom: 2px;
    }
  }
  &:hover &-handler-down {
    border-color: @color-border-normal1;
  }

  &-handler {
    display: block;
    width: 100%;
    height: calc(@input-height-base / 2);
    line-height: 0;
    text-align: center;
    overflow: hidden;
    color: @color-text-level3;  //TODO:颜色待修改为default中的颜色
    position: relative;

    &:hover &-up-inner,
    &:hover &-down-inner {
      color: tint(@color-brand-primary, 20%);
    }
  }

  &-handler-up-inner,
  &-handler-down-inner {
    width: 12px;
    height: 12px;
    line-height: 12px;
    font-size: @font-size-base;
    color: @color-text-level3; //TODO:颜色待修改为default中的颜色
    user-select: none;
    position: absolute;
    right: 12px;
    transition: all @transition-time linear;
  }

  &:hover {
    .hover();
  }

  &-focused {
    .active();
  }

  &-disabled {
    .disabled();
  }

  &-input-wrap {
    overflow: hidden;
    height: @input-height-base;

    input {
      margin-top: -1px;
      vertical-align: top;
    }
  }

  &-input {
    width: 100%;
    height: @input-height-base;
    line-height: @input-height-base;
    padding: 0 12px;
    text-align: left;
    outline: 0;
    -moz-appearance: textfield;
    color: @color-text-level2; //TODO:颜色待修改为default中的颜色
    border: 0;
    border-radius: @btn-border-radius;
    transition: all @transition-time linear;

    background-color: @color-bg-card;

    &[disabled] {
      .disabled();
    }

    &::placeholder {
      color: @color-text-placeholder;
    }
  }

  &-large {
    padding: 0;
    .@{input-number-prefix-cls}-input-wrap {
      height: 36px;
    }
    .@{input-number-prefix-cls}-handler {
      height: calc(36px / 2);
    }

    input {
      height: 36px;
      line-height: 36px;
    }

    // .@{input-number-prefix-cls}-handler-up-inner {
    //   top: 2px;
    // }
    // .@{input-number-prefix-cls}-handler-down-inner {
    //   bottom: 2px;
    // }
  }
  &-middle {
    padding: 0;
    .@{input-number-prefix-cls}-input-wrap {
      height: @input-height-middle;
    }
    .@{input-number-prefix-cls}-handler {
      height: calc(@input-height-middle / 2);
    }

    input {
      height: @input-height-middle;
      line-height: @input-height-middle;
    }
  }

  &-small {
    padding: 0;
    .@{input-number-prefix-cls}-input-wrap {
      height: @input-height-small;
    }
    .@{input-number-prefix-cls}-handler {
      height: calc(@input-height-small / 2);
    }

    input {
      height: @input-height-small;
      line-height: @input-height-small;
    }
    .@{input-number-prefix-cls}-handler-up-inner {
      top: 0;
    }
    .@{input-number-prefix-cls}-handler-down-inner {
      bottom: 1px;
    }
  }

  &-handler-down-disabled,
  &-handler-up-disabled {
    cursor: @cursor-disabled;
    background-color: @color-complementary-8;

    .@{input-number-prefix-cls}-handler-down-inner,
    .@{input-number-prefix-cls}-handler-up-inner {
      color: @color-icon-disable !important;
    }
  }

  &-disabled {
    .@{input-number-prefix-cls}-input {
      opacity: 0.72;
      cursor: @cursor-disabled;
      background-color: @color-bg-disabled;
    }
    .@{input-number-prefix-cls}-handler-wrap {
      display: none;
    }
    .@{input-number-prefix-cls}-handler {
      .handler-disabled();
    }
  }

  &-controls-outside{
    width: calc(@input-number-width-base + @input-height-base * 2);
    padding: 0 @input-height-base;
    .@{input-number-prefix-cls}-input{
      border-radius: 0;
      text-align: center;
    }
    &-btn{
      display: inline-block;
      margin-top: -1px;
      width: @input-height-base;
      height: @input-height-base;
      line-height: @input-height-base;
      position: absolute;
      top: 0;
      text-align: center;
      background-color: @color-bg-card;
      color: @color-text-level2;
      cursor: pointer;
      i{
        font-size: 13px;
        vertical-align: baseline;
      }
      &:hover i{
        color: @color-brand-primary;
      }
      &-disabled, &-disabled:hover{
        cursor: @cursor-disabled;
        i{
          color: @color-text-disabled;
        }
      }
    }
    &-up{
      right: 0;
    }
    &-down{
      left: 0;
    }
  }
  &-disabled&-controls-outside{
    .@{input-number-prefix-cls}-controls-outside-btn{
      background-color: @color-bg-disabled;
      cursor: @cursor-disabled;
      i{
        color: @color-complementary-6;
      }
    }
  }
  // &-large&-controls-outside{
  //   width: 80px + 40px *2;
  //   padding: 0 40px;
  //   .@{input-number-prefix-cls}-controls-outside-btn{
  //     width: 40px;
  //     height: 40px;
  //     line-height: 38px;
  //     i{
  //       font-size: @input-number-large-font-size;
  //     }
  //   }
  // }
  &-middle&-controls-outside{
    width: calc(@input-number-width-base + @input-height-middle * 2);
    padding: 0 @input-height-middle;
    .@{input-number-prefix-cls}-controls-outside-btn{
      width: @input-height-middle;
      height: @input-height-middle;
      line-height: @input-height-middle;
    }
  }

  &-small&-controls-outside{
    width: calc(@input-number-width-base + @input-height-small * 2);
    padding: 0 @input-height-small;
    .@{input-number-prefix-cls}-controls-outside-btn{
      width: @input-height-small;
      height: @input-height-small;
      line-height: @input-height-small;
      i{
        font-size: @font-size-small;
        transform: scale(0.9);
      }
    }
  }
}

.@{form-item-prefix-cls}-error {
  .@{input-number-prefix-cls}{
    .input-error;
    &-input{
      background-color: @red-50;
      border-color:@color-border-fail!important
    }
    &-input:hover{
      border-color:@color-border-fail!important
    }
    &-handler-wrap{
      background-color: @red-50;
      border-color:@color-border-fail!important
    }

    &-focused {
      .active-error;
    }
  }
  .haloe-input-number:hover{
    border-color:@color-border-fail!important
  }

}