:root{--c-Radio-color-border:var(--c-Token-color-grey-200);--c-Radio-color-border-selected:var(--c-Token-color-grey-400);--c-Radio-color-disabled:var(--c-Token-color-grey-200);--c-Radio-color-disabled-text:var(--c-Token-color-grey-400);--c-Radio-color-default:var(--c-Token-color-grey-400);--c-Radio-color-hover:var(--c-Token-color-grey-600);--c-Radio-color-selected:var(--c-Token-color-1000);--c-Radio-color-focusRing:var(--c-Token-color-1000)}.c-Radio{display:grid;gap:var(--c-Token-space-50);grid-template-columns:24px 1fr;inline-size:100%;max-inline-size:100%;position:relative}.c-Radio:has(:focus-visible):after{border:2px solid var(--c-Radio-color-focusRing);border-radius:8px;content:"";inset:-5px;position:absolute;z-index:1}.c-Radio .c-Radio-input{align-items:center;appearance:none;block-size:24px;border:2px solid var(--c-Radio-color-default);border-radius:100%;cursor:pointer;display:flex;flex:0 0 24px;inline-size:24px;justify-content:center;margin:0;outline:none;z-index:2}:is(.c-Radio .c-Radio-input):hover{border-color:var(--c-Radio-color-hover)}:is(.c-Radio .c-Radio-input):active,:is(.c-Radio .c-Radio-input):checked{border-color:var(--c-Radio-color-selected);cursor:default}.c-Radio .c-Radio-input:checked:before{background:var(--c-Radio-color-selected);block-size:12px;border-radius:100%;content:"";display:inline-block;inline-size:12px}.c-Radio .c-Radio-input:disabled{border-color:var(--c-Radio-color-disabled);cursor:default;pointer-events:none}:is(.c-Radio .c-Radio-input:disabled):before{filter:invert(80%)}:is(.c-Radio .c-Radio-input:disabled)+.c-Radio-label{color:var(--c-Radio-color-disabled-text);pointer-events:none}.c-Radio .c-Radio-label{flex:1;font-size:var(--c-Token-fontSize-75);font-weight:600;line-height:var(--c-Token-lineHeight-75)}.c-Radio .c-Radio-input:not(:checked)+.c-Radio-label{cursor:pointer}.c-Radio .c-Radio-info{display:none;grid-column:2/span 1}.c-Radio--bordered{border:2px solid var(--c-Radio-color-border);border-radius:4px;padding:var(--c-Token-space-75)}.c-Radio--bordered:has(:checked){border-color:var(--c-Radio-color-border-selected)}.c-Radio--bordered:has(:checked) .c-Radio-info{display:block}.c-Radio--valign-start{align-items:flex-start}.c-Radio--valign-center{align-items:center}.c-Radio--valign-end{align-items:flex-end}
