.c-form-switch {--c-switch-height: 42px;--c-switch-width: 84px;--c-switch-radius: 45px;--c-toggle-radius: 50%;--c-toggle-width: calc(var(--c-switch-height) * 0.8);--c-toggle-height: calc(var(--c-switch-height) * 0.8);--c-toggle-top: calc((var(--c-switch-height) - (var(--c-switch-height) * 0.8)) / 2);--c-toggle-left: calc((var(--c-switch-height) - (var(--c-switch-height) * 0.8)) / 2);--c-toggle-left-checked: calc(var(--c-switch-width) - var(--c-toggle-width) - var(--c-toggle-left));--c-toggle-color: white;--c-toggle-checked-color: white;--c-input-radius: calc(var(--c-switch-height) / 2);display: flex;border-radius: var(--c-switch-radius);width: var(--c-switch-width);height: var(--c-switch-height);position: relative;}.c-form-switch.c-rectangle {--c-switch-height: 32px;--c-switch-width: 48px;--c-switch-radius: 0px;--c-toggle-radius: 0px;--c-input-radius: 0px;--c-toggle-width: 16px;--c-toggle-height: 28px;--c-toggle-top: 2px;--c-toggle-left: 2px;--c-toggle-checked-color: var(--secondary-alpha);}.c-form-switch > input {width: var(--c-switch-width);height: var(--c-switch-height);display: block;margin: 0;appearance: none;-webkit-appearance: none;-moz-appearance: none;background: var(--light-grey);border-radius: var(--c-input-radius);transition: background-color .15s;}.c-form-switch > input:checked {background: var(--secondary);color: #fff;}.c-form-switch > input::before {content: ' ';width: var(--c-toggle-width);height: var(--c-toggle-height);display: flex;align-items: center;justify-content: center;position: absolute;left: var(--c-toggle-top);top: var(--c-toggle-left);border-radius: var(--c-toggle-radius);background-color: var(--c-toggle-color);transition: all .15s;}.c-form-switch > input:checked::before {color: #0f0;left: var(--c-toggle-left-checked);background-color: var(--c-toggle-checked-color);}.c-form-switch > input:after {content: attr(turn-off);position: absolute;color: var(--dark);font-weight: bold;width: calc(var(--c-switch-height) * 0.8);height: calc(var(--c-switch-height) * 0.8);display: flex;align-items: center;justify-content: center;left: calc((var(--c-switch-height) - (var(--c-switch-height) * 0.8)) / 2 + (var(--c-switch-width) - (var(--c-switch-height))));top: calc((var(--c-switch-height) - (var(--c-switch-height) * 0.8)) / 2);}.c-form-switch > input:checked:after {content: attr(turn-on);left: calc((var(--c-switch-height) - (var(--c-switch-height) * 0.8)) / 2);color: var(--white);}.c-form-switch-2 {display: flex;width: 100%;height: var(--c-switch-height);position: relative;}.c-form-switch-2 > input {width: 0;height: var(--c-switch-height);display: block;margin: 0;appearance: none;-webkit-appearance: none;-moz-appearance: none;background: var(--light-grey);transition: background-color .15s;border-top-left-radius: 1rem;}.c-form-switch-2 > label {height: 100%;width: 100%;position: relative;background: var(--light-grey);border-top-left-radius: 1rem;}.c-form-switch-2 > label:before {content: attr(data-off);position: absolute;color: black;left: 0;flex: 1;z-index: 2;width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;}.c-form-switch-2 > label:after {content: attr(data-on);position: absolute;color: black;z-index: 2;left: 50%;width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;}.c-form-switch-2 > input::before {content: ' ';width: 50%;height: 100%;display: flex;align-items: center;justify-content: center;position: absolute;left: 0;top: 0;background-color: var(--secondary-alpha);transition: all .25s;border-top-left-radius: 1rem;z-index: 1;}.c-form-switch-2 > input:checked::before {left: 50%;border-top-left-radius: 0;}.c-form-switch-2 > input:not(:checked) ~ label::before {color: var(--secondary);}.c-form-switch-2 > input:checked ~ label::after {color: var(--secondary);}