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

@stepperPrefix: ant-stepper;

.@{stepperPrefix} {
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  height: 56 * @rpx;
  overflow: hidden;
  box-sizing: border-box;

  &-button {
    width: 56 * @rpx;
    height: 56 * @rpx;
    line-height: 56 * @rpx;
    padding: 0;
    color: @COLOR_BRAND1;
    background-color: @COLOR_BACKGROUND;
  }

  &-button-hover {
    background-color: fade(@COLOR_BLACK_CHANGE, 8%);
  }

  &-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: 88 * @rpx;
    height: 56 * @rpx;
    margin-left: 4 * @rpx;
    margin-right: 4 * @rpx;
    text-align: center;
    line-height: normal;
    font-size: 30 * @rpx;
    color: @COLOR_TEXT_PRIMARY;
    box-sizing: border-box;
    background-color: @COLOR_BACKGROUND;
    padding: 7 *@rpx 14 *@rpx;
    caret-color: #1677ff;

    &-disabled {
      opacity: 0.4;
    }
  }
}