// ========== 变量定义 ==========
@primary-color: var(--color-primary, #5d3f9f);

@text-color: #101828;
@text-secondary: #344054;
@text-disabled: #d0d5dd;

@border-color: #d0d5dd;
@border-color-light: #e4e7ec;

@bg-disabled: #d0d5dd;
@bg-hover-light: #f2f4f7;
@bg-active-light: #e4e7ec;
@bg-disabled-light: #f9fafb;

// 尺寸变量 - 分离模式
@size-small: 24px;
@size-middle: 32px;
@size-large: 40px;

// 尺寸变量 - 胶囊模式
@capsule-size-small: 28px;
@capsule-size-middle: 40px;
@capsule-size-large: 52px;

// 图标尺寸 - 分离模式
@icon-size-small: 12px;
@icon-size-middle: 16px;
@icon-size-large: 20px;

// 图标尺寸 - 胶囊模式
@capsule-icon-size-small: 14px;
@capsule-icon-size-middle: 20px;
@capsule-icon-size-large: 26px;

@font-size-small: 14px;
@font-size-middle: 16px;
@font-size-large: 18px;

// ========== 混入定义 ==========
.button-size(@size, @icon-size) {
  width: @size;
  height: @size;

  svg {
    width: @icon-size;
    height: @icon-size;
  }
}

.display-size(@width, @height, @font-size, @max-width: 56px, @padding: 0 4px) {
  width: @width;
  height: @height;
  max-width: @max-width;
  font-size: @font-size;
  font-weight: 600;
  color: @text-color;
  padding: @padding;
  text-align: center;
  overflow: hidden;
}

// ========== 基础样式 ==========
.numeric-stepper {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  height: 100%;
  width: 100%;
  overflow: hidden;

  // ========== 按钮容器 ==========
  &-button-wrapper {
    align-items: center;
    display: flex;
    height: 100%;
    &:active .numeric-stepper-button:not(.numeric-stepper-button-disabled) {
      transform: scale(0.95);
    }

    &:focus .numeric-stepper-button {
      outline: none;
      box-shadow: 0 0 0 2px rgba(127, 86, 217, 0.3);
    }
  }

  &-minus-button-wrapper {
    justify-content: flex-end;
  }

  // ========== 按钮样式 ==========
  &-button {
    display: flex;
    align-items: center;
    justify-content: center;
    .button-size(@size-middle, @icon-size-middle);
    border: none;
    background-color: @primary-color;
    cursor: pointer;
    color: #ffffff;

    svg {
      stroke: currentColor;
    }

    &-disabled {
      cursor: not-allowed;
      background-color: @bg-disabled !important;

      &:hover {
        background-color: @bg-disabled !important;
        transform: none;
      }
    }
  }

  // ========== 显示区域 ==========
  &-display-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
  }

  &-display {
    border: 2px solid @border-color;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    .display-size(30px, 30px, @font-size-middle);
    line-height: 1.5;
  }

  // ========== 尺寸变体 ==========
  &-small {
    gap: 8px;

    .numeric-stepper-button {
      .button-size(@size-small, @icon-size-small);
    }

    .numeric-stepper-display {
      .display-size(@size-small, @size-small, @font-size-small, 40px, 0 2px);
    }
  }

  &-middle {
    gap: 8px;

    .numeric-stepper-button {
      .button-size(@size-middle, @icon-size-middle);
    }

    .numeric-stepper-display {
      .display-size(30px, 30px, @font-size-middle);
    }
  }

  &-large {
    gap: 10px;

    .numeric-stepper-button {
      .button-size(@size-large, @icon-size-large);
    }

    .numeric-stepper-display {
      .display-size(36px, 36px, @font-size-large, 64px, 0 6px);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  // ========== 形状变体（分离式下生效）==========
  &-round .numeric-stepper-button {
    border-radius: 50%;
  }

  &-square .numeric-stepper-button {
    border-radius: 12px;
  }

  // ========== 状态样式 ==========
  &-plus-only {
    grid-template-columns: 1fr;

    .numeric-stepper-plus-button-wrapper {
      justify-content: center;
    }
  }

  &-simple {
    gap: 0;
  }

  &-disabled {
    cursor: not-allowed;

    .numeric-stepper-display {
      color: #9ca3af;
    }
  }

  &-out-of-range .numeric-stepper-display {
    color: #ff4d4f;
  }

  &-input-disabled {
    .numeric-stepper-display-wrapper {
      cursor: default;
    }

    .numeric-stepper-display {
      border: none;
    }
  }

  // ========== 胶囊式变体 ==========
  &-capsule {
    display: inline-flex;
    width: auto;
    background-color: #fff;
    border: 1px solid @border-color;
    border-radius: 999px;
    padding: 0;
    gap: 2px;
    height: @capsule-size-middle;

    // 胶囊式按钮容器交互
    .numeric-stepper-button-wrapper {
      &:hover .numeric-stepper-button:not(.numeric-stepper-button-disabled) {
        background-color: @bg-hover-light;
      }

      &:active .numeric-stepper-button:not(.numeric-stepper-button-disabled) {
        background-color: @bg-active-light;
        transform: none;
      }
    }

    // 胶囊式按钮样式
    .numeric-stepper-button {
      background-color: transparent;
      color: @text-secondary;
      border-radius: 50%;
      transition: all 0.15s ease-in-out;

      &-disabled {
        background-color: transparent !important;
        color: @text-disabled !important;
      }
    }

    // 胶囊式按钮默认尺寸（middle）
    .numeric-stepper-button {
      .button-size(@capsule-size-middle, @capsule-icon-size-middle);
    }

    // 胶囊式显示区域
    .numeric-stepper-display-wrapper {
      flex: 1;
      min-width: 0; // 允许收缩
      padding: 0 2px;
    }

    .numeric-stepper-display {
      width: auto;
      height: auto;
      min-width: 20px;
      max-width: 100%;
      border: 2px solid @border-color;
      border-radius: 6px;
      background-color: transparent;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    // 胶囊式关闭输入
    &.numeric-stepper-input-disabled .numeric-stepper-display {
      border: none;
    }

    // 胶囊式整体禁用
    &.numeric-stepper-disabled {
      background-color: @bg-disabled-light;
      border-color: @border-color-light;

      .numeric-stepper-button {
        color: @text-disabled !important;
        cursor: not-allowed;
      }

      .numeric-stepper-button-wrapper {
        &:hover,
        &:active {
          .numeric-stepper-button {
            background-color: transparent !important;
          }
        }
      }

      .numeric-stepper-display {
        color: @text-disabled;
      }
    }

    // 胶囊式尺寸调整
    &.numeric-stepper-small {
      height: @capsule-size-small;

      .numeric-stepper-button {
        .button-size(@capsule-size-small, @capsule-icon-size-small);
      }

      .numeric-stepper-display {
        min-width: 16px;
        font-size: @font-size-small;
      }
    }

    &.numeric-stepper-middle {
      height: @capsule-size-middle;

      .numeric-stepper-button {
        .button-size(@capsule-size-middle, @capsule-icon-size-middle);
      }

      .numeric-stepper-display {
        min-width: 20px;
        font-size: @font-size-middle;
      }
    }

    &.numeric-stepper-large {
      height: @capsule-size-large;

      .numeric-stepper-button {
        .button-size(@capsule-size-large, @capsule-icon-size-large);
      }

      .numeric-stepper-display {
        min-width: 24px;
        font-size: @font-size-large;
      }
    }
  }
}

// ========== 键盘弹窗样式 ==========
.numeric-stepper-keyboard-modal {
  .ant-modal-content,
  .pisell-lowcode-modal-content {
    padding: 0;
    background-color: transparent;
    overflow: hidden;
  }

  .ant-modal-close,
  .pisell-lowcode-modal-close {
    display: none;
  }
}