@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';
@import '../../../styles/mixins.scss';
@import './mixin.scss';

$class-prefix: 'cn-ui-m';
$sizes: small, medium, large;

.#{$hashClassName}.#{$class-prefix}-numberpicker {
  // &-input {
  //   margin-top: 0;
  //   margin-bottom: 0;
  // }

  @include flex(row, flex-start, stretch);
  .#{$class-prefix}-numberpicker {
    &-input {
      // 整个背景框
      height: $m-s-28;
      width: $m-s-150;
      padding: 0 $m-s-8;
      background-color: $m-color-bg-disabled;
      border-radius: $m-s-4;
      box-shadow: none;
      border: none;
      outline: none;
      color: $m-color-text;
      font-size: $m-font-size-body-1;
      text-align: center;

      &::placeholder {
        color: $m-color-text-tip;
      }

      // 文字
      .#{$class-prefix}-input-wrapper {
        height: $m-s-14;
        font-weight: $m-font-weight-medium;
        font-size: $m-s-14;
        color: $m-color-text-title2;
        text-align: center;
        line-height: $m-s-14;
      }

      &::-webkit-outer-spin-button,
      &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        appearance: none;
      }

      @each $size in $sizes {
        &--#{$size} {
          @include inputWidth($size);
          @include inputHeight($size);
        }
      }

      &--no-width {
        width: auto;
      }

      &--disabled {
        opacity: 0.4;
        cursor: not-allowed;
        // color: $m-color-text-disabled !important;
        .#{$class-prefix}-input-wrapper {
          color: $m-color-text-disabled;
        }
      }

      &--readonly {
        line-height: $m-font-lineheight-2;
        .#{$class-prefix}-input-wrapper {
          color: $m-color-text-title2;
        }
      }
      &--no-button {
        margin-left: 0;
        margin-right: 0;
      }
    }

    &-button {
      border: none;

      // size
      @each $size in $sizes {
        --button-#{$size}-min-width: 0;
        // element
        &--#{$size} {
          padding: $m-s-2;
          @include buttonHeight($size);
        }
      }

      &-decrease {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      &-increase {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }

      &-icon {
        left: 0;
        color: $m-color-text-title1;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: $m-s-13;
        height: $m-s-13;

        // size
        @each $size in $sizes {
          // element
          &--#{$size} {
            @include iconWidth($size);
          }
        }

        &--disabled {
          color: $m-color-text-disabled;
        }
      }
    }
  }
}