@import (reference) './variable.less';

@stepperPrefix: ant-stepper;

.@{stepperPrefix} {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  height: @stepper-content-height;
  border-radius: @stepper-border-radius;
  border: @stepper-handler-border-width solid @stepper-border-color;
  overflow: hidden;
  box-sizing: border-box;

  & &-button {
    width: @stepper-content-height;
    height: @stepper-content-height;
    line-height: @stepper-content-height;
    padding: 0;
    color: @COLOR_BRAND1;
    background-color: @stepper-background-color;
    .ant-icon {
      font-size: @stepper-icon-size;
    }
  }

  & &-button-hover {
    background-color: @stepper-hover-bg;
  }

  & &-button-up {
    border-top-left-radius: 0;
    border-top-right-radius: 4 * @rpx;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 4 * @rpx;
  }

  & &-button-down {
    border-top-right-radius: 0;
    border-top-left-radius: 4 * @rpx;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 4 * @rpx;
  }

  & &-button-disabled {
    color: @COLOR_TEXT_ASSIST;
  }

  &-input {
    width: @stepper-content-width;
    height: @stepper-content-height;
    margin: 0 2 * @rpx;
    text-align: center;
    line-height: normal;
    font-size: @stepper-font-size;
    color: @stepper-input-font-color;
    box-sizing: border-box;
    background-color: @stepper-background-color;

    // 在微信会导致 input 显示不居中
    padding: 7 * @rpx 14 * @rpx;
    caret-color: @COLOR_BRAND1;

    &-wrap {
      background-color: @stepper-border-color;
    }
  }

  &-input-readonly {
    padding: 0;
    color: rgba(51, 51, 51, 0.4);
  }
}