@lunalytics/ui/dist/assets/switch.css

React based component library created to be used in Lunalytics

body{font-size:var(--lunaui-size-md);font-weight:var(--lunaui-weight-medium);line-height:1.5;color:var(--lunaui-text-color);isolation:isolate}.luna-switch{display:flex;justify-content:center;align-items:center;cursor:pointer}.luna-switch-slider{display:inline-block;width:3.5em;height:2em;background-color:var(--lunaui-accent-600);border-radius:1em;position:relative;transition:.3s all ease-in-out}.luna-switch-slider:after{content:"";display:inline-block;width:1.5em;height:1.5em;background-color:#ddd;border-radius:.75em;position:absolute;top:.25em;transform:translate(.25em);box-shadow:10px 0 40px #0000001a;transition:.3s all ease-in-out}.luna-switch input[type=checkbox]:checked+.luna-switch-slider{background-color:var(--lunaui-primary-600)}.luna-switch input[type=checkbox]:checked+.luna-switch-slider.blue{background-color:var(--lunaui-blue-600)}.luna-switch input[type=checkbox]:checked+.luna-switch-slider.green{background-color:var(--lunaui-green-600)}.luna-switch input[type=checkbox]:checked+.luna-switch-slider.red{background-color:var(--lunaui-red-600)}.luna-switch input[type=checkbox]:checked+.luna-switch-slider.yellow{background-color:var(--lunaui-yellow-600)}.luna-switch input[type=checkbox]:checked+.luna-switch-slider.orange{background-color:var(--lunaui-orange-600)}.luna-switch input[type=checkbox]:checked+.luna-switch-slider.purple{background-color:var(--lunaui-purple-600)}.luna-switch input[type=checkbox]:checked+.luna-switch-slider.pink{background-color:var(--lunaui-pink-600)}.luna-switch input[type=checkbox]:checked+.luna-switch-slider.gray{background-color:var(--lunaui-gray-600)}.luna-switch input[type=checkbox]:checked+.luna-switch-slider:after{transform:translate(1.75em);box-shadow:-10px 0 40px #0000001a}.luna-switch input[type=checkbox]{display:none}.luna-switch input[type=checkbox]:active+.luna-switch-slider:after{width:2.5em}.luna-switch input[type=checkbox]:checked:active+.luna-switch-slider:after{transform:translate(1.75em)}.luna-switch-text{margin-left:.5rem;font-size:var(--lunaui-size-lg)}