/* Lagos Life stepper. Owner 5c. Spec: inputs.html#slider-stepper. New (no stepper ships today).
   Markup: <div class="ll-stepper" role="group" aria-labelledby="qty-label">
             <button class="ll-stepper__button ll-icon-button ll-icon-button--sm ll-interactive" type="button" aria-label="One less" aria-disabled="true">−</button>
             <output class="ll-stepper__value" aria-live="polite">1</output>
             <button class="ll-stepper__button ll-icon-button ll-icon-button--sm ll-interactive" type="button" aria-label="One more">+</button>
           </div>
   A 44px mist pill holding two 36px paper buttons and a tabular number. */

.ll-stepper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--control-md);
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background-color: var(--mist);
}
.ll-stepper__button { --_fill: var(--paper); --_label: var(--ink); --_shadow: var(--shadow-flat); font: var(--type-label-lg); }
.ll-stepper__value {
  min-width: var(--space-10);
  color: var(--ink);
  font: var(--type-label-lg);
  font-weight: var(--weight-bold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}