smart-webcomponents-react/source/styles/components/smart.radiobutton.css

[](https://jqwidgets.com/license/)

.smart-toggle-box{display:inline-block;outline:0;height:var(--smart-editor-height);cursor:pointer}.smart-toggle-box.smart-element{border:none;background:0 0}.smart-toggle-box .smart-container,.smart-toggle-box.smart-container{position:relative;display:flex;align-items:center}.smart-toggle-box .smart-ripple{background:var(--smart-primary)}.smart-toggle-box .smart-overlay{top:0;height:100%;background:var(--smart-primary);width:var(--smart-editor-height);position:absolute;left:2px;border-radius:100%;padding:0;opacity:0;box-sizing:content-box;transition:opacity 280ms ease-in-out;margin:0}.smart-toggle-box .smart-label{color:var(--smart-background-color);background:inherit;font-size:inherit;font-family:inherit;margin:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:auto}.smart-toggle-box.smart-check-box .smart-input{width:var(--smart-check-box-default-size);min-width:var(--smart-check-box-default-size);height:var(--smart-check-box-default-size);min-height:var(--smart-check-box-default-size);background-color:var(--smart-background);box-sizing:initial;border:var(--smart-border-width) solid var(--smart-border);display:inline-block;color:var(--smart-background-color);border-top-left-radius:var(--smart-border-top-left-radius);border-top-right-radius:var(--smart-border-top-right-radius);border-bottom-left-radius:var(--smart-border-bottom-left-radius);border-bottom-right-radius:var(--smart-border-bottom-right-radius);margin:0 0 0 8px;transition:background linear .2s;position:relative}.smart-toggle-box.smart-check-box .smart-input:after{font-family:var(--smart-font-family-icon);display:flex;justify-content:center;align-content:center;height:100%;align-items:center}.smart-toggle-box.smart-check-box[checked] .smart-input:after{font-weight:100;content:var(--smart-icon-check);pointer-events:none}.smart-toggle-box.smart-check-box[checked=null] .smart-input:after{content:"-";margin-top:-1px}.smart-toggle-box.smart-radio-button .smart-input{width:var(--smart-radio-button-default-size);min-width:var(--smart-radio-button-default-size);height:var(--smart-radio-button-default-size);min-height:var(--smart-radio-button-default-size);background-color:var(--smart-background);box-sizing:initial;border-style:solid;border-width:var(--smart-border-width);border-color:var(--smart-border);display:inline-block;border-radius:100%;color:var(--smart-background-color);margin:0 0 0 8px;position:relative}.smart-toggle-box.smart-radio-button .smart-input:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50%;height:50%;font-style:normal;text-decoration:inherit;font-variant:normal;text-transform:none;color:inherit;border-radius:50%;line-height:100%}.smart-toggle-box.smart-radio-button[checked] .smart-input:after{font-size:15px;font-weight:100;background:var(--smart-primary-color)}.smart-toggle-box.smart-radio-button[checked][hover]:not([focus]) .smart-input::after{background:var(--smart-ui-state-color-hover)}.smart-toggle-box[active] .smart-input,.smart-toggle-box[checked] .smart-input{border-color:var(--smart-ui-state-border-active);background-color:var(--smart-ui-state-active);color:var(--smart-ui-state-color-active)}.smart-toggle-box[active]:focus .smart-overlay,.smart-toggle-box[active][focus] .smart-overlay{opacity:.4}.smart-toggle-box[hover] .smart-input{border-color:var(--smart-ui-state-border-hover);background-color:var(--smart-ui-state-hover);color:var(--smart-ui-state-color-hover)}.smart-toggle-box:focus .smart-input,.smart-toggle-box[focus] .smart-input{outline:0;overflow:visible;border-color:var(--smart-primary);background-color:var(--smart-primary);color:var(--smart-primary-color)}.smart-toggle-box:focus .smart-overlay,.smart-toggle-box[focus] .smart-overlay{opacity:.3}.smart-toggle-box[readonly],.smart-toggle-box[readonly] .smart-input,.smart-toggle-box[readonly] .smart-label{cursor:initial}.smart-toggle-box[check-mode=input]{cursor:default}.smart-toggle-box[check-mode=input] .smart-input,.smart-toggle-box[check-mode=label] .smart-label{cursor:pointer}.smart-toggle-box[right-to-left] .smart-container,.smart-toggle-box[right-to-left] .smart-hidden-input{direction:rtl}.smart-toggle-box[right-to-left] .smart-overlay{left:initial;right:2px}.smart-toggle-box[right-to-left] .smart-input{margin:0 8px 0 0}
smart-radio-button .smart-overlay,smart-radio-button .smart-ripple{background:var(--smart-radio-button-background-active)}smart-radio-button{display:inline-block;height:var(--smart-editor-height);outline:0;font-family:var(--smart-radio-button-font-family);font-size:var(--smart-radio-button-font-size);cursor:pointer}smart-radio-button .smart-container{position:relative;display:flex;align-items:center}smart-radio-button .smart-overlay{height:100%;width:var(--smart-editor-height);position:absolute;left:2px;border-radius:100%;padding:0;opacity:0;box-sizing:content-box;transition:opacity 280ms ease-in-out}smart-radio-button .smart-label{color:var(--smart-on-background);font-size:var(--smart-font-size);font-family:var(--smart-font-family);margin:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:auto}smart-radio-button .smart-input{width:var(--smart-radio-button-default-size);min-width:var(--smart-radio-button-default-size);height:var(--smart-radio-button-default-size);min-height:var(--smart-radio-button-default-size);background-color:var(--smart-radio-button-background);box-sizing:initial;border-style:solid;border-width:var(--smart-radio-button-border-width);border-color:var(--smart-radio-button-border);display:inline-block;border-top-left-radius:var(--smart-radio-button-border-top-left-radius);border-top-right-radius:var(--smart-radio-button-border-top-right-radius);border-bottom-left-radius:var(--smart-radio-button-border-bottom-left-radius);border-bottom-right-radius:var(--smart-radio-button-border-bottom-right-radius);color:red;margin:0 0 0 8px;position:relative}smart-radio-button .smart-input:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50%;height:50%;font-style:normal;text-decoration:inherit;font-variant:normal;text-transform:none;color:inherit;border-radius:50%;line-height:100%}smart-radio-button[check-mode=input],smart-radio-button[check-mode=label]{cursor:default}smart-radio-button[check-mode=input] .smart-input,smart-radio-button[check-mode=label] .smart-input{cursor:pointer}smart-radio-button[readonly],smart-radio-button[readonly] .smart-input,smart-radio-button[readonly] .smart-label{cursor:initial}smart-radio-button[hover] .smart-input{border-color:var(--smart-radio-button-border-hover);background-color:var(--smart-radio-button-background-hover);color:var(--smart-radio-button-color-hover)}smart-radio-button[active] .smart-input,smart-radio-button[checked] .smart-input{border-color:var(--smart-radio-button-border-active);color:var(--smart-radio-button-color-active)}smart-radio-button[checked] .smart-input{background-color:var(--smart-radio-button-background-active)}smart-radio-button[checked] .smart-input:after{font-size:15px;font-weight:100;background:var(--smart-radio-button-color-active)}smart-radio-button[active] .smart-input{background-color:var(--smart-radio-button-background-active)}smart-radio-button[active]:focus .smart-overlay,smart-radio-button[active][focus] .smart-overlay{opacity:.4}smart-radio-button:focus .smart-overlay{opacity:.3}smart-radio-button:focus .smart-input,smart-radio-button[focus] .smart-input{border-color:var(--smart-radio-button-border-focus);background-color:var(--smart-radio-button-background-focus);color:var(--smart-radio-button-color-focus);outline:0;overflow:visible}smart-radio-button[right-to-left] .smart-container{justify-content:flex-end}smart-radio-button[right-to-left] .smart-label{direction:rtl;order:2}smart-radio-button[right-to-left] .smart-input{order:3;margin:0 8px 0 0}smart-radio-button[right-to-left] .smart-overlay{left:initial;right:2px}