@volverjs/style/dist/components/vv-radio.css

@volverjs/style is a lightweight responsive CSS utility library to accompany @volverjs/ui-* and static webpages as well.

:where(:host,:root,.theme){--vv-radio-display:inline-flex;--vv-radio-flex-wrap:wrap;--vv-radio-align-items:center;--vv-radio-cursor:pointer;--vv-radio-user-select:none;--vv-radio-margin:0 var(--input-gap) var(--input-gap) 0;--vv-radio-color:var(--input-color);--vv-radio-font-size:var(--input-font-size);--vv-radio-line-height:var(--input-line-height);--vv-radio-min-width:var(--input-min-width);--vv-radio-state-disabled-opacity:var(--opacity-30);--vv-radio-state-disabled-cursor:not-allowed;--vv-radio-state-disabled-element-input-cursor:not-allowed;--vv-radio-modifier-readonly-opacity:var(--opacity-100);--vv-radio-modifier-readonly-cursor:default;--vv-radio-modifier-readonly-pointer-events:none;--vv-radio-modifier-valid-element-hint-color:var(--input-valid-color);--vv-radio-modifier-invalid-element-hint-color:var(--input-invalid-color);--vv-radio-element-input-border-width:var(--spacing-2);--vv-radio-element-input-border-style:solid;--vv-radio-element-input-border-color:currentcolor;--vv-radio-element-input-min-width:var(--spacing-20);--vv-radio-element-input-height:var(--spacing-20);--vv-radio-element-input-border-radius:50%;--vv-radio-element-input-margin:0 var(--input-label-gap) 0 0;--vv-radio-element-input-background-color:transparent;--vv-radio-element-input-cursor:pointer;--vv-radio-element-input-position:relative;--vv-radio-element-input-pseudo-after-position:absolute;--vv-radio-element-input-pseudo-after-width:70%;--vv-radio-element-input-pseudo-after-height:70%;--vv-radio-element-input-pseudo-after-background-color:currentcolor;--vv-radio-element-input-pseudo-after-inset:50% 50%;--vv-radio-element-input-pseudo-after-border-radius:50%;--vv-radio-element-input-pseudo-after-translate:-50% -50%;--vv-radio-element-input-pseudo-after-scale:0;--vv-radio-element-input-pseudo-after-will-change:transform;--vv-radio-element-input-pseudo-after-transition:var(--transition-transform);--vv-radio-element-input-state-checked-pseudo-after-scale:1;--vv-radio-element-input-state-focus-visible-outline:var(--spacing-px) solid var(--color-brand);--vv-radio-element-input-state-focus-visible-outline-offset:var(--spacing-2);--vv-radio-element-hint-flex-basis:100%;--vv-radio-element-hint-display:var(--input-hint-display);--vv-radio-element-hint-font-size:var(--input-hint-font-size);--vv-radio-element-hint-color:var(--input-hint-color);--vv-radio-element-hint-padding-top:var(--input-hint-gap);--vv-radio-element-hint-white-space:var(--input-hint-white-space);--vv-radio-element-hint-text-overflow:var(--input-hint-text-overflow);--vv-radio-element-hint-overflow:var(--input-hint-overflow);--vv-radio-element-hint-max-width:var(--input-hint-max-width)}:where(.vv-radio){display:var(--vv-radio-display);flex-wrap:var(--vv-radio-flex-wrap);align-items:var(--vv-radio-align-items);cursor:var(--vv-radio-cursor);-webkit-user-select:var(--vv-radio-user-select);-moz-user-select:var(--vv-radio-user-select);user-select:var(--vv-radio-user-select);margin:var(--vv-radio-margin);color:var(--vv-radio-color);font-size:var(--vv-radio-font-size);line-height:var(--vv-radio-line-height);min-width:var(--vv-radio-min-width)}:where(.vv-radio__input,.vv-radio>input[type=radio]){border-width:var(--vv-radio-element-input-border-width);border-style:var(--vv-radio-element-input-border-style);border-color:var(--vv-radio-element-input-border-color);min-width:var(--vv-radio-element-input-min-width);height:var(--vv-radio-element-input-height);border-radius:var(--vv-radio-element-input-border-radius);margin:var(--vv-radio-element-input-margin);background-color:var(--vv-radio-element-input-background-color);cursor:var(--vv-radio-element-input-cursor);position:var(--vv-radio-element-input-position)}:where(.vv-radio__input,.vv-radio>input[type=radio]):after{content:"";position:var(--vv-radio-element-input-pseudo-after-position);width:var(--vv-radio-element-input-pseudo-after-width);height:var(--vv-radio-element-input-pseudo-after-height);background-color:var(--vv-radio-element-input-pseudo-after-background-color);inset:var(--vv-radio-element-input-pseudo-after-inset);border-radius:var(--vv-radio-element-input-pseudo-after-border-radius);translate:var(--vv-radio-element-input-pseudo-after-translate);scale:var(--vv-radio-element-input-pseudo-after-scale);will-change:var(--vv-radio-element-input-pseudo-after-will-change);transition:var(--vv-radio-element-input-pseudo-after-transition)}:where(.vv-radio__input--checked,.vv-radio__input.checked,.vv-radio>input[type=radio].checked,.vv-radio__input:checked,.vv-radio>input[type=radio]:checked):after{--vv-radio-element-input-pseudo-after-scale:var(--vv-radio-element-input-state-checked-pseudo-after-scale)}:where(.vv-radio__input--focus-visible,.vv-radio__input.focus-visible,.vv-radio>input[type=radio].focus-visible,.vv-radio__input:not(:active):not([disabled]):not([tabindex="-1"]):not([aria-disabled=true]):focus-visible,.vv-radio>input[type=radio]:not(:active):not([disabled]):not([tabindex="-1"]):not([aria-disabled=true]):focus-visible){outline:var(--vv-radio-element-input-state-focus-visible-outline);outline-offset:var(--vv-radio-element-input-state-focus-visible-outline-offset)}:where(.vv-radio__hint,.vv-radio>small){flex-basis:var(--vv-radio-element-hint-flex-basis);display:var(--vv-radio-element-hint-display);font-size:var(--vv-radio-element-hint-font-size);color:var(--vv-radio-element-hint-color);padding-top:var(--vv-radio-element-hint-padding-top);white-space:var(--vv-radio-element-hint-white-space);text-overflow:var(--vv-radio-element-hint-text-overflow);overflow:var(--vv-radio-element-hint-overflow);max-width:var(--vv-radio-element-hint-max-width)}:where(.vv-radio:has(>input[type=radio]:disabled)),:where(.vv-radio--disabled,.vv-radio.disabled,.vv-radio[disabled],.vv-radio[aria-disabled=true]){opacity:var(--vv-radio-state-disabled-opacity);--vv-radio-cursor:var(--vv-radio-state-disabled-cursor)}:where(.vv-radio--disabled .vv-radio__input,.vv-radio.disabled .vv-radio__input,.vv-radio[disabled] .vv-radio__input,.vv-radio[aria-disabled=true] .vv-radio__input,.vv-radio--disabled>input[type=radio],.vv-radio.disabled>input[type=radio],.vv-radio[disabled]>input[type=radio],.vv-radio[aria-disabled=true]>input[type=radio]){cursor:var(--vv-radio-state-disabled-element-input-cursor)}:where(.vv-radio--readonly.vv-radio){opacity:var(--vv-radio-modifier-readonly-opacity);--vv-radio-cursor:var(--vv-radio-modifier-readonly-cursor);pointer-events:var(--vv-radio-modifier-readonly-pointer-events)}:where(.vv-radio--valid>.vv-radio__hint,.vv-radio--valid>small){color:var(--vv-radio-modifier-valid-element-hint-color)}:where(.vv-radio--invalid>.vv-radio__hint,.vv-radio--invalid>small){color:var(--vv-radio-modifier-invalid-element-hint-color)}