@start-base/react-form-elements/Switch/styles.css

Simplify form elements and form management. Selection of user friendly inputs and wide customization abilities to match your design and functionality.

.SUI-Switch-module-switch-B2hSx{display:inline-flex;flex-direction:column;margin-bottom:var(--rfe-spacing);position:relative}.SUI-Switch-module-inputRoot-6OeFT{align-items:center;display:flex}.SUI-Switch-module-label-XF-H4{color:var(--rfe-color);cursor:pointer;font-size:var(--rfe-font-size);line-height:20px;margin-top:1px;pointer-events:all}.SUI-Switch-module-errorLabel-vrpUP{color:var(--rfe-color-error);font-size:var(--rfe-error-font-size);margin-top:var(--rfe-label-spacing);pointer-events:none}.SUI-Switch-module-switchCheckbox-kZlDZ{height:0;left:0;opacity:0;position:fixed;top:0;width:0;z-index:0}.SUI-Switch-module-switchCheckbox-kZlDZ:focus-visible~.SUI-Switch-module-switchLabel--ceYZ{box-shadow:var(--rfe-focus)}.SUI-Switch-module-switchLabel--ceYZ{background-color:var(--rfe-background);border:1px solid var(--rfe-border);border-radius:20px;cursor:pointer;display:block;height:28px;margin:0 16px 0 0;min-width:56px;overflow:hidden;position:relative;transition:all .25s;width:56px}.SUI-Switch-module-switchLabel--ceYZ:hover{box-shadow:var(--rfe-focus)}.SUI-Switch-module-switchSwitch-5R4CI{background:var(--rfe-background);border:1px solid var(--rfe-border);border-radius:100px;bottom:0;display:block;height:20px;margin:1px;position:absolute;right:29px;top:2px;width:20px}.SUI-Switch-module-switchInnerChecked-wR3OK{background:var(--rfe-background-selected);margin-left:0}.SUI-Switch-module-noLabel-wvNd3{margin:0}.SUI-Switch-module-switchSwitchChecked-d8vX8{right:2px}.SUI-Switch-module-inputError-Wr0p3{border-color:var(--rfe-color-error)!important}.SUI-Switch-module-disabled-8KOQD{background:var(--rfe-background-disabled);box-shadow:none!important;cursor:not-allowed!important}.SUI-Switch-module-disabled-8KOQD span{background:var(--rfe-background)}