@layer components{:root{--twentyone--radiobox--width: var(--twentyone--spacing--24);--twentyone--radiobox--border-width: 1px;--twentyone--radiobox--inner-width: 1em;--twentyone--radiobox--border-color: var(--twentyone--color--grey);--twentyone--radiobox--border-color-active: var(--twentyone--color--primary);--twentyone--radiobox--background: var(--twentyone--color--white);--twentyone--radiobox--background-active: var(--twentyone--color--white);--twentyone--radiobox--inner-background: var(--twentyone--color--primary);--twentyone--radiobox--inverted-border-color: var(--twentyone--color--white);--twentyone--radiobox--inverted-border-color-active: var(--twentyone--color--white);--twentyone--radiobox--inverted-background: transparent;--twentyone--radiobox--inverted-background-active: transparent;--twentyone--radiobox--inverted-inner-background: var(--twentyone--color--white)}.twentyone-radio{--fake-element--width: var(--twentyone--radiobox--width);--fake-element--height: var(--twentyone--radiobox--width)}.twentyone-radio .twentyone-fake-element{aspect-ratio:1/1;background:var(--twentyone--radiobox--background);border-color:var(--twentyone--radiobox--border-color);border-style:solid;border-width:var(--twentyone--radiobox--border-width);width:var(--twentyone--radiobox--width);border-radius:50%}.twentyone-radio .twentyone-fake-element::after{aspect-ratio:1;background:var(--twentyone--radiobox--inner-background);content:"";display:block;opacity:0;position:relative;width:var(--twentyone--radiobox--inner-width);border-radius:50%;scale:.75;transition:var(--twentyone--element--transition)}.twentyone-radio input:checked~.twentyone-fake-element{background:var(--twentyone--radiobox--background-active);border-color:var(--twentyone--radiobox--border-color-active)}.twentyone-radio input:checked~.twentyone-fake-element::after{opacity:1;scale:1}.twentyone-radio.is--inverted .twentyone-fake-element{background:var(--twentyone--radiobox--inverted-background);border-color:var(--twentyone--radiobox--inverted-border-color)}.twentyone-radio.is--inverted .twentyone-fake-element::after{background:var(--twentyone--radiobox--inverted-inner-background)}.twentyone-radio.is--inverted input:checked~.twentyone-fake-element{background:var(--twentyone--radiobox--inverted-background-active);border-color:var(--twentyone--radiobox--inverted-border-color-active)}}