.ios-toggle{--toggle-width:50px;--toggle-height:28px;--toggle-padding:3px;--toggle-bg:#ccc;--toggle-bg-checked:#4cd964;--toggle-circle-bg:#fff;position:relative;display:inline-block;width:var(--toggle-width);height:var(--toggle-height)}.ios-toggle input{opacity:0;width:0;height:0}.ios-toggle .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--toggle-bg);transition:.4s;border-radius:999px}.ios-toggle .slider::before{content:"";position:absolute;background-color:var(--toggle-circle-bg);height:calc(var(--toggle-height) - var(--toggle-padding) * 2);width:calc(var(--toggle-height) - var(--toggle-padding) * 2);left:var(--toggle-padding);bottom:var(--toggle-padding);transition:.4s;border-radius:50%}.ios-toggle input:checked+.slider{background-color:var(--toggle-bg-checked)}.ios-toggle input:checked+.slider::before{transform:translateX(calc(var(--toggle-width) - var(--toggle-height)))}.ios-toggle.blue,.ios-toggle.green{--toggle-width:32px;--toggle-height:20px;--toggle-bg:#888}.blue{--toggle-bg-checked:#007aff}.green{--toggle-bg-checked:rgb(29 203 0)}