material-inspired-component-library/dist/radio.css

The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.

:root{--md-sys-motion-duration-short1: 50ms;--md-sys-motion-duration-short2: 100ms;--md-sys-motion-duration-short3: 150ms;--md-sys-motion-duration-short4: 200ms;--md-sys-motion-duration-medium1: 250ms;--md-sys-motion-duration-medium2: 300ms;--md-sys-motion-duration-medium3: 350ms;--md-sys-motion-duration-medium4: 400ms;--md-sys-motion-duration-long1: 450ms;--md-sys-motion-duration-long2: 500ms;--md-sys-motion-duration-long3: 550ms;--md-sys-motion-duration-long4: 600ms;--md-sys-motion-duration-extra-long1: 700ms;--md-sys-motion-duration-extra-long2: 800ms;--md-sys-motion-duration-extra-long3: 900ms;--md-sys-motion-duration-extra-long4: 1000ms}body{--md-sys-ripple-background-color: var(--md-sys-color-on-surface);--md-sys-ripple-opacity: 20%;--md-sys-ripple-duration: var(--md-sys-motion-duration-extra-long4)}:root{--md-sys-target-size: 48px;--md-sys-shape-corner-none: 0px;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-large-increased: 20px;--md-sys-shape-corner-extra-large: 28px;--md-sys-shape-corner-extra-large-increased: 32px;--md-sys-shape-corner-extra-extra-large: 48px;--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px;--md-sys-state-hover-state-layer-opacity: 8%;--md-sys-state-focus-state-layer-opacity: 10%;--md-sys-state-pressed-state-layer-opacity: 10%;--md-sys-state-dragged-state-layer-opacity: 16%;--md-sys-state-focus-indicator-outer-offset: 2px;--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-radio-border-width: 2px;--md-sys-radio-container-size: 20px;--md-sys-radio-state-layer-size: 40px}input[type=radio].micl-radio{--md-sys-radio-motion-effects: cubic-bezier(0.34, 0.88, 0.34, 1);--md-sys-radio-motion-duration: 300ms;--md-sys-radio-motion-duration-reverse: 200ms;--md-sys-ripple-background-color: var(--md-sys-color-primary);appearance:none;box-sizing:border-box;position:relative;width:var(--md-sys-target-size);height:var(--md-sys-target-size);margin:0;border:calc((var(--md-sys-target-size) - var(--md-sys-radio-state-layer-size))/2) solid rgba(0,0,0,0);background-clip:content-box;background-color:rgba(0,0,0,0);border-radius:var(--md-sys-shape-corner-full);outline-offset:-7px;transition:background-color var(--md-sys-radio-motion-duration) linear}input[type=radio].micl-radio::after{content:"";box-sizing:border-box;position:absolute;width:var(--md-sys-radio-container-size);height:var(--md-sys-radio-container-size);inset:0;margin:auto;padding:calc(var(--md-sys-radio-container-size)/2 - var(--md-sys-radio-border-width));border:var(--md-sys-radio-border-width) solid var(--md-sys-color-on-surface-variant);background-color:var(--md-sys-color-primary);background-clip:content-box;border-radius:var(--md-sys-shape-corner-full);transition:padding var(--md-sys-radio-motion-duration-reverse) var(--md-sys-radio-motion-effects),border-color var(--md-sys-radio-motion-duration-reverse) cubic-bezier(0.2, 0, 0, 1)}input[type=radio].micl-radio:checked::after{border-color:var(--md-sys-color-primary);padding:3px;transition:padding var(--md-sys-radio-motion-duration) var(--md-sys-radio-motion-effects),border-color var(--md-sys-radio-motion-duration) cubic-bezier(0.2, 0, 0, 1)}input[type=radio].micl-radio:not(:disabled){--miclripple: 1;position:relative;overflow:hidden;cursor:pointer}input[type=radio].micl-radio:not(:disabled)::before{content:"";position:absolute;display:block;inset-block-start:calc(var(--y)*1px);inset-inline-start:calc(var(--x)*1px);width:calc(var(--d)*1px);height:calc(var(--d)*1px);border-radius:50%;background:var(--md-sys-ripple-background-color);opacity:calc(var(--o, 1)*var(--md-sys-ripple-opacity, 0.3));pointer-events:none;transition:calc(var(--t, 0)*var(--md-sys-ripple-duration)) cubic-bezier(0.05, 0.7, 0.1, 1);transform:translate(-50%, -50%) scale(var(--s, 1));transform-origin:center}input[type=radio].micl-radio:not(:disabled):hover{background-color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-hover-state-layer-opacity))}input[type=radio].micl-radio:not(:disabled):hover:checked{background-color:rgb(from var(--md-sys-color-primary) r g b/var(--md-sys-state-hover-state-layer-opacity))}input[type=radio].micl-radio:not(:disabled):hover::after{border-color:var(--md-sys-color-on-surface)}input[type=radio].micl-radio:not(:disabled):hover:checked::after{border-color:var(--md-sys-color-primary)}input[type=radio].micl-radio:not(:disabled):focus-visible{background-color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-focus-state-layer-opacity));outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary)}input[type=radio].micl-radio:not(:disabled):focus-visible:checked{background-color:rgb(from var(--md-sys-color-primary) r g b/var(--md-sys-state-focus-state-layer-opacity))}input[type=radio].micl-radio:not(:disabled):focus-visible::after{border-color:var(--md-sys-color-on-surface)}input[type=radio].micl-radio:not(:disabled):focus-visible:checked::after{border-color:var(--md-sys-color-primary)}input[type=radio].micl-radio:not(:disabled):active{background-color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-pressed-state-layer-opacity))}input[type=radio].micl-radio:not(:disabled):active:checked{background-color:rgb(from var(--md-sys-color-primary) r g b/var(--md-sys-state-pressed-state-layer-opacity))}input[type=radio].micl-radio:not(:disabled):active::after{border-color:var(--md-sys-color-on-surface)}input[type=radio].micl-radio:not(:disabled):active:checked::after{border-color:var(--md-sys-color-primary)}input[type=radio].micl-radio:disabled{opacity:38%}input[type=radio].micl-radio:disabled::after{border-color:var(--md-sys-color-on-surface)}input[type=radio].micl-radio:disabled:checked::after{background-color:var(--md-sys-color-on-surface)}input[type=radio].micl-radio:not(:disabled)+label,label:has(+input[type=radio].micl-radio:not(:disabled)){cursor:pointer}input[type=radio].micl-radio+label,label+input[type=radio].micl-radio{color:var(--md-sys-color-on-surface)}