@layer components {
  .color-scheme {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* A pill over its radio: the radio keeps the keyboard, the pill draws the state. */
  .color-scheme__option {
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-ink-secondary);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    position: relative;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
  }

  .color-scheme__option:hover {
    border-color: var(--color-border-strong);
  }

  .color-scheme__option:has(input:checked) {
    background: var(--color-brand-tint);
    border-color: var(--color-brand);
    color: var(--color-brand);
  }

  .color-scheme__option:has(input:focus-visible) {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }
}