@import '~antd/es/input/style/index.less';
@import '../variable.less';

@inputNumber-prefix-cls: ~'@{ant-prefix}-inputNumber';
@inputNumber-suffix-prefix-cls: ~'@{inputNumber-prefix-cls}-suffix';

.@{inputNumber-prefix-cls} {
  display: inline-block;
  padding: 0 @input-height-base;
  line-height: @input-height-base;
  height: @input-height-base;
  width: 120px;
  position: relative;

  *:focus {
    outline: none;
  }

  .@{inputNumber-suffix-prefix-cls} {
    color: @text-color;
    font-size: 14px;
    position: absolute;
    top: 0;
    left: calc(100% + 8px);
  }

  .rc-input-number {
    position: relative;
    border-radius: 0;
    height: @input-height-base !important;

    input {
      text-align: center;
      font-size: 14px;
      color: @text-color;
    }

    .rc-input-number-handler {
      &:hover {
        background-color: @btn-default-hover-background;
      }
      &:active,
      &:focus {
        background-color: @btn-default-focus-background;
      }
    }

    &:hover,
    &:hover .rc-input-number-handler {
      border-color: @input-hover-border-color;
      svg {
        fill: @input-hover-border-color;
      }
    }

    &-focused {
      box-shadow: none;
      border-color: @input-focus-border-color !important;
      .rc-input-number-handler {
        border-color: @input-hover-border-color;
      }
    }

    &-handler-wrap {
      height: 0;
      width: 0;
      border: none;
    }

    &-handler {
      line-height: @input-height-base;
      height: @input-height-base;
      width: @input-height-base;
      border: 1px solid @border-color-base;
      position: absolute;
      padding-top: 3px;
      color: @disabled-bg;
      cursor: pointer;
    }

    &-handler-up {
      left: 100%;
      top: -1px;
    }

    &-handler-down {
      right: 100%;
      top: -1px;
    }

    &,
    &-input-wrapper,
    &-input {
      line-height: @input-height-base;
      height: @input-height-base;
    }

    &-disabled {
      color: @disabled-color;
      border-color: @border-color-base;

      .rc-input-number-handler,
      .rc-input-number-input {
        background: @disabled-bg;
        color: @disabled-color;
        cursor: not-allowed;
        span {
          cursor: not-allowed;
        }
      }

      &:hover,
      &:active {
        color: @disabled-color;
        border-color: @border-color-base;
        .rc-input-number-handler {
          color: @disabled-color;
          background-color: @input-disabled-background;
          border-color: @border-color-base;
          svg {
            fill: #999;
            background-color: @input-disabled-background;
          }
        }
      }
    }
  }

  &-large {
    padding: 0 @input-height-lg;
    line-height: @input-height-lg;
    height: @input-height-lg;
    width: 132px;

    .rc-input-number {
      height: @input-height-lg !important;

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

      &-handler {
        line-height: @input-height-lg;
        height: @input-height-lg;
        width: @input-height-lg;
        padding-top: 3px;
      }
    }
  }

  &-small {
    padding: 0 @input-height-sm;
    height: @input-height-sm;
    width: 112px;

    .rc-input-number {
      height: @input-height-sm !important;
      line-height: @input-height-sm;

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

      &-handler {
        line-height: @input-height-sm;
        height: @input-height-sm;
        width: @input-height-sm;
        padding-top: 3px;
      }
    }
  }
}