.radio{--_size:1.5em;--_accent:var(--clr-blue-400);--_transition: ;--_btn-transition: ;--_input-transition: ;display:grid;grid-auto-flow:column;grid-template-columns:auto 1fr;grid-gap:.5em;gap:.5em;align-items:center;cursor:pointer}@media(prefers-reduced-motion:no-preference){.radio{--_transition:scale 100ms ease;--_btn-transition:border-color 100ms ease;--_input-transition:outline-offset 100ms ease}}.radio__btn{display:grid}.radio__btn>*{grid-area:1/1}.radio__btn>input{-webkit-appearance:none;-moz-appearance:none;appearance:none;inline-size:100%;block-size:100%;border-radius:50%;transition:var(--_input-transition)}.radio__btn>input:not(:checked)~span:after{scale:0}.radio__btn>input:focus-visible{outline-offset:.2em}.radio__btn>input:checked~span{border-color:var(--_accent);border-width:3px}.radio__btn>input:checked~span:before{scale:1}.radio__btn>input:is(:focus-visible,:hover)~span{box-shadow:0 0 0 .5em hsl(from var(--_accent) h s l/.1)}.radio__btn>span{--_surface-color:var(--clr-neutral-100);display:grid;inline-size:var(--_size);block-size:var(--_size);border:2px solid var(--clr-neutral-800);border-radius:50%;position:relative;transition:var(--_btn-transition)}.radio__btn>span:after,.radio__btn>span:before{content:"";position:absolute;inset:0;margin:auto;border-radius:50%;transition:var(--_transition);place-self:center}.radio__btn>span:before{inline-size:100%;block-size:100%;background-color:var(--_surface-color);scale:0;z-index:1}.radio__btn>span:after{inline-size:calc(var(--_size)/2.1);block-size:calc(var(--_size)/2.1);background-color:var(--_accent);z-index:2}.radio[data-accent-color=blue]{--_accent:var(--clr-blue-400)}.radio[data-accent-color=green]{--_accent:var(--clr-green-400)}.radio[data-accent-color=yellow]{--_accent:var(--clr-yellow-400)}.radio[data-accent-color=red]{--_accent:var(--clr-red-400)}