/*
 * The quantity: a pill with a minus, the number and a plus. 44px buttons in the dish sheet; the small one in a line of
 * the cart is drawn 36px and has the 44px hit area around the buttons (ADR-027). In the cart the stepper is a form, in
 * the sheet the buttons are for the script (the dish-form controller shows them).
 */

@layer components {
  .stepper {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
  }

  .stepper__btn {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: var(--tap);
    height: var(--tap);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text);
  }

  .stepper__btn .icon {
    width: min(1.375rem, 24px);
    height: min(1.375rem, 24px);
  }

  .stepper__btn:disabled {
    opacity: 0.35;
  }

  .stepper__btn:active {
    background: var(--surface-2);
  }

  .stepper__btn:disabled:active {
    background: transparent;
  }

  .stepper__n {
    min-width: 22px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* The quantity in the sheet is a number field, so that it can be chosen without JavaScript: it looks like the number between the buttons. */
  .stepper__input {
    width: min(2.75rem, 56px);
    height: var(--tap);
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    appearance: textfield;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .stepper__input::-webkit-inner-spin-button,
  .stepper__input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
  }

  .stepper--small .stepper__btn {
    width: 36px;
    height: 36px;
  }

  .stepper--small .stepper__btn::after {
    content: '';
    position: absolute;
    inset: -4px;
  }

  @media (hover: hover) and (pointer: fine) {
    .stepper__btn:hover:not(:disabled) {
      background: var(--surface-2);
    }
  }
}