@layer components {
  /*
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
   🅸🅽🅿🆄🆃 🆂🆃🅴🅿🅿🅴🆁
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
  - https://www.nngroup.com/articles/input-steppers/

  @scope keeps these rules from leaking OUT, and the reset below strips UA default
  chrome off the generated buttons / input / track divs so the component styles from
  a clean slate. Caveat: this lives in @layer components, so it only shields the
  internals from UA defaults and lower-layer rules — *unlayered* host-page rules (a
  CSS reset, Tailwind preflight, naked `button {}`) still outrank every cascade layer
  and are NOT neutralized here.
  */

  @scope (l-input-stepper) {
    /* Reset — :where() keeps specificity at (0,0,0) so the component rules below win
       over it. Strips UA default styling off the generated internals for a clean
       slate. Custom properties are NOT affected by `all` — design tokens cascade
       through. :scope is excluded — the host is a unique custom element name and gets
       its styles from the base + appearance :scope blocks without interference. */
    *:where(:not(img, svg, l-icon):not(svg *)),
    *::before,
    *::after {
      all: unset;
      display: revert;
    }

    /*
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
     🅷🅾🆂🆃
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    */

    :scope {
      --_button-size: var(--l-size-control-md);
      --border-color: var(--l-form-control-border-color);
      --border-radius: var(--l-form-control-border-radius);
      --_button-bg-hover: var(--l-color-bg-fill-neutral-soft);
      --_button-bg-active: var(--l-color-bg-fill-neutral-subtle);

      display: inline-flex;
      align-items: stretch;
      white-space: nowrap;
      box-sizing: border-box;
    }

    /*
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
     🅵🅾🆄🅲🅴 🅿🆁🅴🆅🅴🅽🆃🅸🅾🅽
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    Reserve button space before JS loads to avoid layout shift when buttons mount.
    */

    :scope:not(:defined) {
      padding-inline: var(--_button-size);
    }

    :scope:defined {
      padding-inline: 0;
    }

    /*
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
     🆂🅸🆉🅴🆂
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    */

    :scope[size='xs'] {
      --_button-size: var(--l-size-control-xs);
    }
    :scope[size='sm'] {
      --_button-size: var(--l-size-control-sm);
    }
    :scope[size='lg'] {
      --_button-size: var(--l-size-control-lg);
    }
    :scope[size='xl'] {
      --_button-size: var(--l-size-control-xl);
    }

    /*
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
     🅱🆄🆃🆃🅾🅽🆂
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    */

    button {
      padding: 0;
      appearance: none;
      background: none;
      border: 0;
      font-family: inherit;
      font-size: inherit;
      width: var(--_button-size);
      aspect-ratio: 1;
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    button:focus-visible {
      outline: 2px solid var(--l-focus-ring);
      outline-offset: -2px;
      z-index: 1;
    }

    button:disabled {
      cursor: not-allowed;
      opacity: 0.4;
    }

    @media (hover: hover) {
      button:hover:not(:disabled) {
        background-color: var(--_button-bg-hover);
      }
    }

    button:active:not(:disabled) {
      background-color: var(--_button-bg-active);
    }

    /*
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
     🅸🅽🅿🆄🆃
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    */

    input {
      appearance: textfield;
      box-sizing: border-box;
      font-family: inherit;
      font-size: inherit;
      font-variant-numeric: tabular-nums;
      border: 0;
      text-align: center;
      width: calc(3ch + var(--_button-size) * 2 / 3);
      min-width: 0;
      padding-inline: calc(var(--_button-size) / 3);
      align-self: stretch;
      background: transparent;
      color: inherit;
      caret-shape: underscore;
    }

    input:disabled {
      cursor: not-allowed;
      color: var(--l-color-text-disabled);
    }

    /*
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
     🆃🆁🅰🅲🅺 (animated number display)
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    */

    .l-input-stepper-value {
      position: relative;
      display: flex;
      align-items: center;
      min-width: 0;
    }

    .l-input-stepper-track-display {
      position: absolute;
      inset: 0;
      height: var(--_button-size);
      overflow: hidden;
      pointer-events: none;
      font-variant-numeric: tabular-nums;
      background: var(--_track-bg, var(--l-color-surface));
    }

    .l-input-stepper-track {
      transition: translate 0.26s ease-out;
    }

    .l-input-stepper-track div {
      display: flex;
      align-items: center;
      justify-content: center;
      height: var(--_button-size);
    }

    .l-input-stepper-value:focus-within .l-input-stepper-track-display {
      visibility: hidden;
    }

    :scope:not([with-roller]) .l-input-stepper-track-display {
      display: none;
    }

    /*
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
     🅳🅸🆂🅰🅱🅻🅴🅳
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    */

    :scope:has(input:disabled) {
      color: var(--l-color-text-disabled);
    }

    /* Invalid — mirror the shared form control invalid border (set by
       `l-form-field` via `aria-invalid`, or authored directly). */
    :scope:has(input[aria-invalid='true']) {
      --border-color: var(--l-form-control-border-color-invalid);
    }
  }

  /* Hide native spinners — kept outside @scope because Safari ignores
     ::-webkit-*-spin-button rules nested inside @scope blocks. */
  l-input-stepper input::-webkit-inner-spin-button,
  l-input-stepper input::-webkit-outer-spin-button {
    appearance: none;
    display: none;
    margin: 0;
  }
}

@layer components {
  @scope (l-input-stepper:not([appearance]), l-input-stepper[appearance='default']) {
    :scope {
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      background-color: var(--l-form-control-background-color);
      min-height: var(--_button-size);
    }

    button:first-of-type {
      border-radius: var(--border-radius) 0 0 var(--border-radius);
    }

    button:last-of-type {
      border-radius: 0 var(--border-radius) var(--border-radius) 0;
    }

    :scope:has(input:disabled) {
      --_track-bg: var(--l-color-bg-disabled);
      border-color: var(--l-color-border-disabled);
      background-color: var(--l-color-bg-disabled);
    }
  }

  /* FOUCE: match visual appearance before JS loads.
     min-height adds 2px to account for the 1px border on each side,
     since no buttons exist to push the content area beyond min-height. */
  @scope (l-input-stepper:not(:defined):not([appearance]), l-input-stepper:not(:defined)[appearance='default']) {
    :scope {
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      background-color: var(--l-form-control-background-color);
      min-height: calc(var(--_button-size) + 2px);
    }
  }
}