@import '../variables/default.scss';
@import '../mixins/index.scss';

$component: '.at-input-number';
$at-input-number-btn-padding: 12px;
$at-input-number-btn-padding-lg: 20px;

#{$component} {
  //  display: inline-flex;
  @include border-thin($width: 1PX);

  display: flex;
  flex-direction: row;

  font-size: $at-input-number-font-size;
  border-radius: $border-radius-md;
  background-color: $color-bg;
  overflow: hidden;

  /* elements */
  &__btn {
    position: relative;
    //  display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: $at-input-number-btn-padding;
    color: $at-input-number-btn-color;
    font-size: 0;
    text-align: center;
    // line-height: $line-height-base;
    overflow: hidden;
    @include active;

    &-subtract,
    &-add {
      color: $at-input-number-btn-color;
      font-size: $at-input-number-btn-size;
      line-height: $at-input-number-btn-size;
    }
  }

  &__input {
    //  display: inline-block;
    width: $at-input-number-width-min;
    height: auto;
    border-radius: 0;
    color: $at-input-number-text-color;
    font-size: $at-input-number-font-size;
    text-align: center;
    text-align-vertical: center;
    // line-height: $line-height-zh;
    @include border-thin($width: 1PX, $directions: left right);
  }

  /* modifiers */
  &--disabled {
    color: $color-text-disabled;

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

  &--lg {
    // #{$component}__btn {
    //   padding: $at-input-number-btn-padding-lg;
    //   font-size: $at-input-number-font-size-lg;

    //   &-subtract,
    //   &-add {
    //     font-size: $at-input-number-btn-size-lg;
    //   }
    // }

    // input,
    // #{$component}__input {
    //   padding: $spacing-v-sm;
    //   font-size: $at-input-number-font-size-lg;
    //   width: $at-input-number-width-min-lg;
    // }
  }
}