balm-ui/components/radio/radio.css

A modular and customizable UI library based on Material Design and Vue 3

.mdc-touch-target-wrapper{display:inline}.mdc-radio{padding:10px}.mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:rgba(0,0,0,.54)}.mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle{border-color:#018786;border-color:var(--mdc-theme-secondary,#018786)}.mdc-radio .mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio .mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio [aria-disabled=true] .mdc-radio__native-control+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio [aria-disabled=true] .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio [aria-disabled=true] .mdc-radio__native-control:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:rgba(0,0,0,.38)}.mdc-radio .mdc-radio__background:before{background-color:#018786;background-color:var(--mdc-theme-secondary,#018786);height:40px;left:-10px;top:-10px;width:40px}.mdc-radio .mdc-radio__native-control{height:40px;left:0;right:0;top:0;width:40px}@media (-ms-high-contrast:active),screen and (forced-colors:active){.mdc-radio.mdc-radio--disabled .mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio.mdc-radio--disabled .mdc-radio__native-control:disabled:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio.mdc-radio--disabled .mdc-radio__native-control:disabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio.mdc-radio--disabled [aria-disabled=true] .mdc-radio__native-control+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio.mdc-radio--disabled [aria-disabled=true] .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio.mdc-radio--disabled [aria-disabled=true] .mdc-radio__native-control:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:GrayText}}.mdc-radio{box-sizing:content-box;cursor:pointer;flex:0 0 auto;will-change:opacity,transform,border-color,color}.mdc-radio,.mdc-radio__background{display:inline-block;height:20px;position:relative;width:20px}.mdc-radio__background{box-sizing:border-box}.mdc-radio__background:before{border-radius:50%;content:"";opacity:0;pointer-events:none;position:absolute;transform:scale(0);transition:opacity .12s cubic-bezier(.4,0,.6,1) 0s,transform .12s cubic-bezier(.4,0,.6,1) 0s}.mdc-radio__outer-circle{border-radius:50%;border-style:solid;border-width:2px;transition:border-color .12s cubic-bezier(.4,0,.6,1) 0s}.mdc-radio__inner-circle,.mdc-radio__outer-circle{box-sizing:border-box;height:100%;left:0;position:absolute;top:0;width:100%}.mdc-radio__inner-circle{border-radius:50%;border-style:solid;border-width:10px;transform:scale(0);transition:transform .12s cubic-bezier(.4,0,.6,1) 0s,border-color .12s cubic-bezier(.4,0,.6,1) 0s}.mdc-radio__native-control{cursor:inherit;margin:0;opacity:0;padding:0;position:absolute;z-index:1}.mdc-radio--touch{margin:4px}.mdc-radio--touch .mdc-radio__native-control{height:48px;left:-4px;right:-4px;top:-4px;width:48px}.mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__focus-ring,.mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__focus-ring{border:2px solid transparent;border-radius:6px;box-sizing:content-box;height:100%;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}@media screen and (forced-colors:active){.mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__focus-ring,.mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__focus-ring{border-color:CanvasText}}.mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__focus-ring:after,.mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__focus-ring:after{border:2px solid transparent;border-radius:8px;content:"";display:block;height:calc(100% + 4px);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:calc(100% + 4px)}@media screen and (forced-colors:active){.mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__focus-ring:after,.mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__focus-ring:after{border-color:CanvasText}}.mdc-radio__native-control:checked+.mdc-radio__background,.mdc-radio__native-control:disabled+.mdc-radio__background{transition:opacity .12s cubic-bezier(0,0,.2,1) 0s,transform .12s cubic-bezier(0,0,.2,1) 0s}.mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__outer-circle,.mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__outer-circle{transition:border-color .12s cubic-bezier(0,0,.2,1) 0s}.mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle,.mdc-radio__native-control:disabled+.mdc-radio__background .mdc-radio__inner-circle{transition:transform .12s cubic-bezier(0,0,.2,1) 0s,border-color .12s cubic-bezier(0,0,.2,1) 0s}.mdc-radio--disabled{cursor:default;pointer-events:none}.mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.5);transition:transform .12s cubic-bezier(0,0,.2,1) 0s,border-color .12s cubic-bezier(0,0,.2,1) 0s}.mdc-radio__native-control:disabled+.mdc-radio__background,[aria-disabled=true] .mdc-radio__native-control+.mdc-radio__background{cursor:default}.mdc-radio__native-control:focus+.mdc-radio__background:before{opacity:.12;transform:scale(1);transition:opacity .12s cubic-bezier(0,0,.2,1) 0s,transform .12s cubic-bezier(0,0,.2,1) 0s}@keyframes mdc-ripple-fg-radius-in{0%{animation-timing-function:cubic-bezier(.4,0,.2,1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-opacity-in{0%{animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity,0)}}@keyframes mdc-ripple-fg-opacity-out{0%{animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity,0)}to{opacity:0}}.mdc-radio{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:rgba(0,0,0,0);will-change:transform,opacity}.mdc-radio .mdc-radio__ripple:after,.mdc-radio .mdc-radio__ripple:before{border-radius:50%;content:"";opacity:0;pointer-events:none;position:absolute}.mdc-radio .mdc-radio__ripple:before{transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-radio .mdc-radio__ripple:after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple:before{transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple:after{left:0;top:0;transform:scale(0);transform-origin:center center}.mdc-radio.mdc-ripple-upgraded--unbounded .mdc-radio__ripple:after{left:var(--mdc-ripple-left,0);top:var(--mdc-ripple-top,0)}.mdc-radio.mdc-ripple-upgraded--foreground-activation .mdc-radio__ripple:after{animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-radio.mdc-ripple-upgraded--foreground-deactivation .mdc-radio__ripple:after{animation:mdc-ripple-fg-opacity-out .15s;transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-radio .mdc-radio__ripple:after,.mdc-radio .mdc-radio__ripple:before{height:100%;left:0;top:0;width:100%}.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple:after,.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple:before{height:var(--mdc-ripple-fg-size,100%);left:var(--mdc-ripple-left,0);top:var(--mdc-ripple-top,0);width:var(--mdc-ripple-fg-size,100%)}.mdc-radio.mdc-ripple-upgraded .mdc-radio__ripple:after{height:var(--mdc-ripple-fg-size,100%);width:var(--mdc-ripple-fg-size,100%)}.mdc-radio .mdc-radio__ripple:after,.mdc-radio .mdc-radio__ripple:before{background-color:#018786;background-color:var(--mdc-ripple-color,var(--mdc-theme-secondary,#018786))}.mdc-radio.mdc-ripple-surface--hover .mdc-radio__ripple:before,.mdc-radio:hover .mdc-radio__ripple:before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity,.04)}.mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__ripple:before,.mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__ripple:before{opacity:.12;opacity:var(--mdc-ripple-focus-opacity,.12);transition-duration:75ms}.mdc-radio:not(.mdc-ripple-upgraded) .mdc-radio__ripple:after{transition:opacity .15s linear}.mdc-radio:not(.mdc-ripple-upgraded):active .mdc-radio__ripple:after{opacity:.12;opacity:var(--mdc-ripple-press-opacity,.12);transition-duration:75ms}.mdc-radio.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity,0.12)}.mdc-radio.mdc-ripple-upgraded .mdc-radio__background:before,.mdc-radio.mdc-ripple-upgraded--background-focused .mdc-radio__background:before{content:none}.mdc-radio__ripple{height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}