.prs-radio { --chk-size: 1rem; appearance: none; border: 1px solid currentColor; width: var(--chk-size); height: var(--chk-size); color: var(--prs-c-gray-600); flex-shrink: 0; cursor: pointer; border-radius: 9999px; transition-property: var(--prs-transition-property); transition-timing-function: var(--prs-transition-timing); transition-duration: var(--prs-transition-duration); &:focus-visible { outline: 2px solid var(--prs-c-primary); outline-offset: 1px; } &.prs-radio_focus { outline: 2px solid var(--prs-c-primary); outline-offset: 1px; } &:checked { --chk-bg: var(--prs-c-primary); --chk-fg: var(--prs-c-white); color: var(--chk-bg); background-color: var(--chk-fg); box-shadow: inset 0 0 0 calc(var(--chk-size)/4) currentColor, inset 0 0 0 calc(var(--chk-size)/4) currentColor; } &:disabled { background-color: var(--prs-c-gray-100); color: var(--prs-c-gray-300); cursor: not-allowed; } &:checked:disabled { border-color: var(--prs-c-gray-300); background-color: var(--prs-c-gray-300); color: var(--prs-c-gray-100); } &.prs-radio-lg { --chk-size: 1.5rem; } &.prs-radio-xl { --chk-size: 2rem; } }