@vuesax-alpha/nightly/theme-chalk/vs-radio.css

A Component Library for Vue 3

.vs-radio-wrapper{--vs-radio-width:20px;--vs-radio-height:20px;--vs-radio-min-width:20px;--vs-radio-min-height:20px;display:flex;justify-content:flex-start;align-items:center;position:relative;gap:6px}.vs-radio-wrapper.is-active .vs-radio__effect--icon{opacity:0;transition:var(--vs-transition-ease);transform:scale(1.3)}.vs-radio-wrapper.is-active .vs-radio__effect:after{border:7px solid rgba(var(--vs-color),1);box-shadow:0 3px 12px 0 rgba(var(--vs-color),.3)}.vs-radio-wrapper:not(.is-active) .vs-radio input:hover~.vs-radio__effect .vs-radio__effect--icon{opacity:.7}.vs-radio-wrapper.is-loading{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vs-radio-wrapper.is-loading .vs-radio__effect:after{opacity:.1}.vs-radio-wrapper.is-label-before label{order:-1}.vs-radio-wrapper label{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vs-radio-wrapper.is-disabled{opacity:.5;pointer-events:none}.vs-radio-wrapper.is-disabled .vs-radio__effect{background:rgba(var(--vs-gray-3),1)}.vs-radio-wrapper.is-disabled label{pointer-events:none}.vs-radio{width:var(--vs-radio-width);height:var(--vs-radio-height);min-width:var(--vs-radio-min-width);min-height:var(--vs-radio-min-height);margin:0;padding:0;border-radius:50%;position:relative;z-index:10}.vs-radio__effect{display:flex;justify-content:center;align-items:center;position:absolute;width:100%;height:100%;border-radius:inherit;left:0;top:0;transition:var(--vs-transition-ease);box-sizing:border-box;z-index:10}.vs-radio__effect--icon{transition:var(--vs-transition-ease)}.vs-radio__effect--icon i{font-size:.75rem}.vs-radio__effect:after{content:"";position:absolute;width:100%;height:100%;border-radius:inherit;border:2px solid rgba(var(--vs-text),.35);box-sizing:border-box;transition:var(--vs-transition-ease);display:block;box-shadow:0 0 0 0 rgba(var(--vs-color),.4)}.vs-radio input{margin:0;padding:0;width:100%;height:100%;position:relative;z-index:100;opacity:0;cursor:pointer}.vs-radio input:active~.vs-radio__effect:after{transform:scale(.9)}.vs-radio input:not(:checked)~.vs-radio__effect .vs-radio__effect--loading .vs-icon-loading{color:rgba(var(--vs-divider),1)}.vs-radio input:checked~.vs-radio__effect:after{border:7px solid rgba(var(--vs-color),1);animation-name:radio;animation-duration:4s;animation-play-state:paused;animation-iteration-count:infinite;box-shadow:0 3px 10px 0 rgba(var(--vs-color),.4)}