.switch-btn-wrapper{position:relative;width:100px;height:40px}.switch-btn-checkbox{display:none}.switch-btn{position:relative;display:block;width:100%;height:100%;border-radius:20px;background-color:#ccc;cursor:pointer;transition:background-color .3s ease;font-weight:700;font-size:14px;padding:0;box-shadow:0 0 5px #00000026;overflow:hidden}.switch-btn-text{position:absolute;top:50%;transform:translateY(-50%);width:100%;padding:0 1em 0 1.5em;color:#fff;z-index:1;transition:opacity .2s ease,text-align .2s ease,padding .2s ease;pointer-events:none}.switch-btn-text.off{text-align:right;opacity:1}.switch-btn-text.on{text-align:left;opacity:0}.switch-btn-circle{position:absolute;top:5px;left:5px;width:30px;height:30px;background-color:#fff;border-radius:50%;transition:left .3s ease;z-index:2}.switch-btn-checkbox:checked+.switch-btn{background-color:#7367f0}.switch-btn-checkbox:checked+.switch-btn .on{opacity:1}.switch-btn-checkbox:checked+.switch-btn .off{opacity:0}.switch-btn-checkbox:checked+.switch-btn .switch-btn-circle{left:calc(100% - 36px)}