@fremtind/jkl-radio-button/radio-button.min.css

Jøkul style for radio button

:root,
[data-layout-density=comfortable],
[data-density=comfortable]{--jkl-radio-button-height:3rem;--jkl-radio-button-line-height:2rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translate3d(0,0.0625rem,0);--jkl-radio-button-dot-margin:0.75rem 0.5rem 0.75rem 0;--jkl-radio-button-dot-size:1rem;--jkl-radio-button-label-font-size:var(--jkl-body-font-size);--jkl-radio-button-label-line-height:var(--jkl-body-line-height);--jkl-radio-button-label-font-weight:var(--jkl-body-font-weight)}@media (width >= 0) and (max-width: 679px){:root,
  [data-layout-density=comfortable],
  [data-density=comfortable]{--jkl-radio-button-height:2.5rem;--jkl-radio-button-line-height:1.75rem;--jkl-radio-button-size:1.5rem;--jkl-radio-button-text-margin:0.5rem 0;--jkl-radio-button-text-transform:translate3d(0,0,0);--jkl-radio-button-dot-margin:0.625rem 0.5rem 0.625rem 0;--jkl-radio-button-dot-size:1rem}}[data-layout-density=compact],
[data-density=compact]{--jkl-radio-button-height:1.75rem;--jkl-radio-button-line-height:1.5rem;--jkl-radio-button-size:1.125rem;--jkl-radio-button-text-margin:0.25rem 0;--jkl-radio-button-text-transform:translate3d(0,0,0);--jkl-radio-button-dot-margin:0.4375rem 0.5rem 0.4375rem 0;--jkl-radio-button-dot-size:0.625rem;--jkl-radio-button-label-font-size:var(--jkl-small-font-size);--jkl-radio-button-label-line-height:var(--jkl-small-line-height);--jkl-radio-button-label-font-weight:var(--jkl-small-font-weight)}@keyframes jkl-dot-in-uglsvpr{0%{transform:scale(0.8)}100%{transform:scale(1)}}.jkl-radio-button{--ring-color:var(--jkl-color-border-action);--dot-color:transparent;--background-color:transparent;--text-color:var(--jkl-color-text-default);display:flex;min-height:var(--jkl-radio-button-height);color:var(--text-color);position:relative;outline:0;border-style:none;outline-style:none}.jkl-radio-button:active, .jkl-radio-button:hover, .jkl-radio-button:focus{outline:0;outline-style:none}@media screen and (forced-colors: active){.jkl-radio-button{outline:revert;border-style:revert;outline-style:revert}.jkl-radio-button:active, .jkl-radio-button:hover, .jkl-radio-button:focus{outline:revert;outline-style:revert}}.jkl-radio-button__input{position:absolute;opacity:0;top:var(--jkl-radio-button-size);left:calc(-0.5 * var(--jkl-radio-button-size))}.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after{--dot-color:var(--jkl-color-border-action);animation:jkl-dot-in-uglsvpr 150ms ease}@media screen and (forced-colors: active){.jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after{background-color:ButtonText}}.jkl-radio-button--error .jkl-radio-button__input:checked + .jkl-radio-button__label > .jkl-radio-button__dot::after{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__input:focus-visible + .jkl-radio-button__label{--background-color:var(--jkl-color-background-input-focus)}.jkl-radio-button__input:focus-visible + .jkl-radio-button__label > .jkl-radio-button__dot{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-radio-button--error .jkl-radio-button__input:focus-visible + .jkl-radio-button__label{--background-color:var(--jkl-color-background-alert-error);--dot-color:var(--jkl-color-text-on-alert)}.jkl-radio-button__label{cursor:pointer;display:flex;align-items:flex-start;font-size:var(--jkl-radio-button-label-font-size);line-height:var(--jkl-radio-button-label-line-height);font-weight:var(--jkl-radio-button-label-font-weight)}.jkl-radio-button__label:hover > .jkl-radio-button__dot{outline:1px solid var(--ring-color)}.jkl-radio-button__label:active > .jkl-radio-button__dot .jkl-radio-button__label::after{scale:0.9}.jkl-radio-button__dot{display:inline-block;position:relative;box-sizing:border-box;margin:var(--jkl-radio-button-dot-margin);flex-shrink:0;height:var(--jkl-radio-button-size);width:var(--jkl-radio-button-size);border-radius:50%;border:0.0625rem solid var(--ring-color);background-color:var(--background-color);transition-property:background-color,outline;transition-timing-function:ease;transition-duration:150ms}.jkl-radio-button__dot::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;scale:1;height:var(--jkl-radio-button-dot-size);width:var(--jkl-radio-button-dot-size);border-radius:50%;background-color:var(--dot-color);transition-property:transform;transition-timing-function:ease;transition-duration:150ms}@media screen and (forced-colors: active){.jkl-radio-button__dot{outline:revert;border:1px solid ButtonText}}.jkl-radio-button__text{display:inline-block;margin:var(--jkl-radio-button-text-margin);transform:var(--jkl-radio-button-text-transform)}.jkl-radio-button--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-radio-button--inline{display:inline-flex;margin-top:unset;margin-right:1.5rem}.jkl-radio-button + .jkl-form-support-label{margin-left:calc(var(--jkl-radio-button-size) + 0.5rem);margin-top:-0.375rem;margin-bottom:0.5rem}