@layer components {
  .choice__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .choice__option {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
    padding-inline: var(--space-6);
    border: var(--border-width) solid var(--color-edge);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font: var(--type-button);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-fast) var(--ease-calm), border-color var(--dur-fast) var(--ease-calm);
  }

  .choice__input {
    position: absolute;
    inset: var(--space-0);
    opacity: var(--opacity-none);
    cursor: pointer;
  }

  .choice__option:has(.choice__input:checked) {
    border-color: var(--color-accent);
    box-shadow: inset var(--space-0) var(--space-0) var(--space-0) var(--border-width) var(--color-accent);
    color: var(--color-accent-ink);
  }

  .choice__option:has(.choice__input:disabled) {
    color: var(--color-ink-faint);
    cursor: not-allowed;
  }

  .field--invalid .choice__option {
    border-color: var(--color-danger);
  }

  .choice--segmented .choice__options {
    flex-wrap: nowrap;
    inline-size: fit-content;
    gap: var(--space-0);
    border-radius: var(--radius-pill);
    background-color: var(--color-surface-sunken);
    box-shadow: inset var(--space-0) var(--space-0) var(--space-0) var(--border-width) var(--color-border);
  }

  .choice--segmented .choice__option {
    justify-content: center;
    padding-inline: var(--space-4);
    border: var(--space-1) solid transparent;
    background-color: transparent;
    background-clip: padding-box;
    color: var(--color-ink-muted);
    font: var(--type-label);
    text-decoration: none;
  }

  .choice--segmented .choice__option[aria-current] {
    background-color: var(--color-surface-raised);
    color: var(--color-ink);
    box-shadow: inset var(--space-0) var(--space-0) var(--space-0) var(--border-width) var(--color-edge), var(--elev-1);
    cursor: default;
  }

  .choice--color .choice__options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--space-11), var(--track-fill)));
  }

  :where(.choice--color .choice__option) {
    --vault-crown: var(--color-surface-inverse);
    --vault-crown-ink: var(--color-ink-on-inverse);
    --vault-course: oklch(var(--lch-ink-on-inverse) / var(--exhale-vault-course-alpha));
  }

  .choice--color .choice__option {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-card);
  }

  .choice__crown {
    display: block;
    inline-size: var(--size-fill);
    block-size: auto;
  }
}