/*
 * Bezorgen or Afhalen: two buttons in a pill, the one that is pressed has the surface and a shadow. On the restaurant
 * card of the menu (with the line under it that says what the choice means), at the top of the cart and in the cart
 * panel. The buttons are 40px high as drawn; the 44px that a finger needs is the hit area around them (ADR-027).
 */

@layer components {
  /* Two columns while both buttons fit, one under the other when the text is so large that they would not (at 200% text on a phone). */
  .order-type {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
    gap: var(--s-1);
    padding: var(--s-1);
    border-radius: var(--r-pill);
    background: var(--surface-2);
  }

  .order-type__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 40px;
    padding: 0 var(--s-3);
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--muted);
    font-size: 0.9375rem;
    font-weight: 700;
  }

  /* The hit area: 2px more above and below the 40px that are drawn. */
  .order-type__item::after {
    content: '';
    position: absolute;
    inset: -2px 0;
  }

  .order-type__item > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .order-type__item[aria-pressed='true'] {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-1);
  }

  .order-type__item:active {
    opacity: 0.6;
  }

  /* Bezorgen is closed today (a lockdown, or too late): the button is off, the reason is under the switch. */
  .order-type__item:disabled {
    opacity: 0.5;
  }

  .order-type__note {
    margin-top: var(--s-2);
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.4;
  }

  /* The line under the switch on the restaurant card. */
  .card > .order-info {
    margin-top: var(--s-3);
  }

  .order-info .meta {
    margin-top: var(--s-3);
  }

  @media (prefers-reduced-motion: no-preference) {
    .order-type__item {
      transition:
        background-color var(--dur) ease-out,
        color var(--dur) ease-out;
    }
  }
}