/*
 * Option groups of a dish: the rule as a chip, each option a row to choose with its price difference. A row is a label
 * around a real radio button (one choice) or checkbox: the input covers the row, so the whole row is the target and the
 * keyboard works as it does everywhere (arrows in a group of radio buttons, space for a checkbox), and the circle or the
 * square that is seen is drawn next to it with the colours of the look.
 */

@layer components {
  .group {
    margin-top: var(--s-5);
  }

  .group__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-1) var(--s-2);
    margin-bottom: var(--s-2);
  }

  .group__title {
    font-size: 1rem;
  }

  .rule {
    flex: 0 1 auto;
    max-width: 100%;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 700;
  }

  .opts {
    margin: 0;
    padding: 0;
  }

  .opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    min-height: 52px;
    padding: 0 var(--s-1);
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
  }

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

  /* The real input: invisible, over the whole row. */
  .opt__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
  }

  /* What is seen: a ring of 22px with a dot (one choice) or a square with a check (several). */
  .opt__mark {
    display: grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 2px solid var(--border-strong);
    border-radius: 50%;
    color: var(--on-primary);
  }

  .opt__input[type='checkbox'] + .opt__mark {
    border-radius: 6px;
  }

  .opt__input:checked + .opt__mark {
    border-color: var(--primary);
  }

  .opt__input[type='radio']:checked + .opt__mark {
    background: radial-gradient(circle, var(--primary) 0 5px, transparent 5.5px);
  }

  .opt__input[type='checkbox']:checked + .opt__mark {
    background: var(--primary);
  }

  .opt__mark .icon {
    width: 16px;
    height: 16px;
    opacity: 0;
  }

  .opt__input:checked + .opt__mark .icon {
    opacity: 1;
  }

  .opt__input:focus-visible + .opt__mark {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
  }

  /* A group at its maximum: what is not chosen cannot be chosen any more. */
  .opt__input:disabled ~ .opt__name,
  .opt__input:disabled ~ .opt__delta,
  .opt__input:disabled + .opt__mark {
    opacity: 0.45;
  }

  .opt__name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .opt__delta {
    flex: none;
    color: var(--muted);
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
  }

  /* A single checkbox in a form, away from a list of options: no line under it, and room around it. */
  .opt--field {
    min-height: var(--tap);
    margin-bottom: var(--s-3);
    padding-inline: 0;
    border-bottom: 0;
  }

  @media (hover: hover) and (pointer: fine) {
    .opt:hover {
      background: var(--surface-2);
      cursor: pointer;
    }

    .opt:has(.opt__input:disabled):hover {
      background: transparent;
      cursor: default;
    }
  }
}