/* Radio Group mapping: current HM values built from the shared Semantic tokens (ui-viz has no Radio spec; reference only). States use Radix attributes: [data-state="checked"|"unchecked"], :hover, :focus-visible, :disabled, [aria-invalid="true"]; layout uses data-orientation. */ :root, [data-hm-theme] { --hm-radio-size: 18px; --hm-radio-border-width: 1px; --hm-radio-dot-size: 8px; --hm-radio-background: var(--hm-sem-bg-surface); --hm-radio-border-color: var(--hm-sem-stroke-default); --hm-radio-hover-border-color: var(--hm-sem-action-primary); --hm-radio-checked-border-color: var(--hm-sem-state-active); --hm-radio-dot-color: var(--hm-sem-state-active); --hm-radio-error-border-color: var(--hm-sem-action-destructive); --hm-radio-group-gap: 12px; --hm-radio-group-gap-horizontal: 16px; } [data-slot="radio-group"] { gap: var(--hm-radio-group-gap); } [data-slot="radio-group"][data-orientation="horizontal"] { display: flex; flex-wrap: wrap; gap: var(--hm-radio-group-gap-horizontal); } [data-slot="radio-group-item"] { box-sizing: border-box; width: var(--hm-radio-size); height: var(--hm-radio-size); padding: 0; border: var(--hm-radio-border-width) solid var(--hm-radio-border-color); border-radius: 50%; background: var(--hm-radio-background); color: var(--hm-radio-dot-color); box-shadow: none; cursor: pointer; } [data-slot="radio-group-item"] svg { width: var(--hm-radio-dot-size); height: var(--hm-radio-dot-size); } [data-slot="radio-group-item"]:hover:not(:disabled) { border-color: var(--hm-radio-hover-border-color); } [data-slot="radio-group-item"][data-state="checked"] { border-color: var(--hm-radio-checked-border-color); } /* Focus level is the shadcn ring (ui_viz global focus is TBD); keep the ring variables because the theme sets box-shadow: none. */ [data-slot="radio-group-item"]:focus-visible { box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000); } [data-slot="radio-group-item"][aria-invalid="true"] { border-color: var(--hm-radio-error-border-color); } [data-slot="radio-group-item"]:disabled { cursor: not-allowed; }