@import "../../variable.less";
@import "../../mixins/index.less";
@import "./var.less";


.@{--css-prefix}-input-number {
  display: inline-flex;
  border-radius: var(--border-radius-md);
  overflow: hidden;
  font-size: var(--input-number-font-size);
  background-color: var(--color-white);
  .border-thin(@width: 1PX);

  /* elements */
  &__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--input-number-btn-horizontal-padding);
    overflow: hidden;
    font-size: 0;
    line-height: var(--line-height-base);
    color: var(--input-number-btn-color);
    text-align: center;
    .active;

    &-subtract, &-add {
      font-size: var(--input-number-btn-size);
      line-height: var(--input-number-btn-size);
    }
  }

  &__input {
    .border-thin(@width: 1PX, @directions: left right);
  }

  &__input, input {
    display: inline-block;
    width: var(--input-number-width-min);
    border-radius: 0;
    font-size: var(--input-number-font-size);
    line-height: var(--line-height-zh);
    color: var(--input-number-text-color);
    text-align: center;
  }

  /* modifiers */
  &--disabled {
    color: var(--color-text-disabled);

    &:active {
      background-color: inherit;
    }
  }

  &--lg {
    .@{--css-prefix}-input-number__btn {
      padding: 0 var(--input-number-btn-padding-lg);
      font-size: var(--input-number-font-size-lg);

      &-subtract, &-add {
        font-size: var(--input-number-btn-size-lg);
      }
    }

    input,
    .@{--css-prefix}-input-number__input {
      width: var(--input-number-width-min-lg);
      // padding: @spacing-v-sm;
      font-size: var(--input-number-font-size-lg);
    }
  }
}