/* Choosing a colour: a row of swatches that are radio buttons wearing a
   colour. Fizzy's `.color-picker__colors`, rebuilt on our own vocabulary —
   four hues rather than eight (CardColumn::COLORS), and the check mark carried
   by the swatch itself rather than by a button variant.

   The input is present and focusable, never `display: none`: a hidden radio is
   unreachable by keyboard and invisible to a screen reader, and the label's
   `for` is what makes the whole swatch its hit area anyway. It is clipped to
   nothing and the swatch draws the state instead — which is also why the ring
   is on `:has(:focus-visible)` and not on the input. Clipping it is
   `.for-screen-reader`'s job and the radio wears that class, because clipped
   rather than hidden is the same treatment the label beside it already asks
   for by name — this file restated four of its six declarations to say it. */
@layer components {
  .color-picker {
    display: flex;
    gap: var(--inline-space-half);
    border: none;
    padding: 0;
    margin: 0;
  }

  .color-picker__swatch {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    background-color: var(--swatch);
    border-radius: var(--border-radius);
    color: var(--color-canvas);
    cursor: pointer;

    /* The glyph is the only thing that moves between states, so it is the only
       thing that transitions. */
    .icon {
      opacity: 0;
      transition: opacity var(--speed-quick) var(--ease-out);
    }

    &:has(:checked) .icon {
      opacity: 1;
    }

    &:has(:focus-visible) {
      outline: var(--focus-ring);
      outline-offset: var(--focus-offset);
    }
  }
}