@layer cm.components {
  .cm-stepper {
    display: inline-flex;
    align-items: stretch;
    block-size: var(--control-h, 38px);
    border: 1px solid var(--line, #cbd5e1);
    border-radius: var(--radius-md, 10px);
    background: var(--surface, #fff);
    overflow: hidden;
    max-inline-size: 100%;
    vertical-align: middle;
  }
  .cm-stepper:focus-within {
    border-color: var(--brand, #2563eb);
    box-shadow: 0 0 0 3px var(--brand-50, #eff6ff);
  }

  .cm-stepper-input.cm-stepper-input {
    inline-size: 4.5em;
    min-inline-size: 0;
    margin: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text, #0f172a);
    font: inherit;
    text-align: center;
    padding-block: 0;
    padding-inline: .25rem;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .cm-stepper-input::-webkit-outer-spin-button,
  .cm-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .cm-stepper-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--control-h, 38px);
    padding: 0;
    border: 0;
    background: var(--surface-2, #f1f5f9);
    color: var(--text-2, #475569);
    font-size: 1.15em;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transition: background var(--dur-fast, 120ms) var(--ease-std, ease),
                color var(--dur-fast, 120ms) var(--ease-std, ease);
  }
  .cm-stepper-dec { border-inline-end: 1px solid var(--line, #cbd5e1); }
  .cm-stepper-inc { border-inline-start: 1px solid var(--line, #cbd5e1); }

  .cm-stepper-btn:hover {
    background: var(--brand-50, #eff6ff);
    color: var(--brand, #2563eb);
  }
  .cm-stepper-btn:active {
    background: var(--brand, #2563eb);
    color: var(--on-brand, #fff);
  }
  .cm-stepper-btn.is-disabled,
  .cm-stepper-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
    background: var(--surface-2, #f1f5f9);
    color: var(--text-3, #94a3b8);
  }

  .cm-stepper-ico { display: block; pointer-events: none; }

  .cm-stepper.is-disabled { opacity: .6; }
  .cm-stepper.is-disabled .cm-stepper-btn { cursor: not-allowed; }

  @media (prefers-reduced-motion: reduce) {
    .cm-stepper-btn { transition: none; }
  }
}