.#{$stepper-prefix-cls} {
  display: inline-block;
  width: $stepper-width;
  vertical-align: middle;

  &__content {
    display: flex;
    align-items: center;
    width: 100%;
  }

  &__handler {
    flex-shrink: 0;
    width: $stepper-handler-size;
    height: $stepper-handler-size;
    font-size: $stepper-handler-font-size;
    line-height: $stepper-handler-size;
    /* NOTE: 修改背景色 */
    // color: $gray-8;
    color: $stepper-handler-color;
    text-align: center;
    /* NOTE: 修改背景色 */
    // background-color: $gray-4;
    background: $stepper-handler-background-color;
    border-radius: $border-radius;
    @extend %aid-icon;

    &--down {
      &::before {
        content: "\F58A";
      }
    }

    &--up {
      &::before {
        content: "\F666";
      }
    }

    @include status-disabled;
  }

  input {
    flex: 1;
    width: 100%;
    height: 100%;
    font-size: $stepper-input-font-size;
    // color: $gray-10;
    /* NOTE: NOTE */
    color: $stepper-input-color;
    text-align: center;
    background-color: transparent;
  }

  @include status-disabled;
}