/* Stepper: minus, the quantity, plus — in one pill. Plus is the accent, the
   one small primary of a ticket option. */
.stepper {
  align-items: center;
  background: var(--color-surface-1);
  border-radius: var(--radius-pill);
  display: flex;
  justify-content: space-between;
  padding: var(--space-3xs);

  input {
    background: transparent;
    border: 0;
    color: var(--color-text);
    font-size: var(--step-1);
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-semibold);
    inline-size: 3ch;
    outline: 0;
    text-align: center;
  }
}

.stepper__button {
  align-items: center;
  appearance: none;
  aspect-ratio: 1;
  background: var(--color-surface-3);
  block-size: 2.5rem;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--step-2);
  justify-content: center;
  line-height: var(--leading-flat);
  transition: filter var(--duration-fast) var(--ease-out), scale var(--duration-fast) var(--ease-out);

  &:active:not(:disabled) {
    scale: 0.94;
  }

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

.stepper__button[data-variant="add"] {
  background: var(--color-accent-fill);
  color: var(--color-on-accent);

  &:hover:not(:disabled) {
    filter: brightness(1.08);
  }
}