.toggle{--toggle-padding: 4px;--toggle-height: 40px;--toggle-width: 200px;--toggle-color-background: #fff;--toggle-color-off: #ccc;--toggle-color-on: #fff;--toggle-color-knob: #1799DD;--toggle-color-shadow: #0004;box-sizing:border-box;display:inline-block;border:solid 2px var(--toggle-color-off);width:auto;border-radius:calc(var(--toggle-height)/2);box-shadow:0 0 3px var(--toggle-color-shadow);background-color:var(--toggle-color-background);width:var(--toggle-width);height:var(--toggle-height);position:relative}.toggle-input{position:absolute;appearance:none;height:100%;width:100%;z-index:20;cursor:pointer}.toggle .options{display:block;position:relative;width:100%;height:100%}.toggle .option{position:absolute;display:flex;align-items:center;justify-content:center;top:var(--toggle-padding);width:calc(50% - var(--toggle-padding) * 2);height:calc(100% - var(--toggle-padding) * 2);z-index:10;transition:color .2s}.toggle .option--0{left:var(--toggle-padding)}.toggle .option--1{right:var(--toggle-padding)}.toggle .knob{position:absolute;top:var(--toggle-padding);left:var(--toggle-padding);width:calc(50% - var(--toggle-padding) * 2);height:calc(100% - var(--toggle-padding) * 2);border-radius:calc(var(--toggle-height)/2 - var(--toggle-padding));transition:left .2s;background-color:var(--toggle-color-knob)}.toggle-input:checked+.knob{left:calc(50% + var(--toggle-padding))}.toggle-input:not(:checked)~.options .option--0,.toggle-input:checked~.options .option--1{color:var(--toggle-color-on)}.toggle-input:checked~.options .option--0,.toggle-input:not(:checked)~.options .option--1{color:var(--toggle-color-off)}