:root{--blue-background: #c2e9f6;--blue-border: #108DAD;--blue-color: #96dcee;--yellow-background: #fffaa8;--yellow-border: #f5eb71;--indigo-background: #808fc7;--indigo-border: #808BBC;--indigo-color: #6b7abb;--gray-border: #e8e8ea;--gray-dots: #e8e8ea}@keyframes reverse{0%{left:47px;width:40px}60%{left:3px;width:80px}to{left:3px}}@keyframes switch{0%{left:3px}60%{left:3px;width:80px}to{left:47px;width:40px}}.toggle--checkbox{opacity:0;display:none}.toggle--checkbox:focus+.toggle--label{outline:solid 3px var(--button-border);transition:outline .1s ease-in}.container--toggle{display:grid;min-height:30px;grid-area:toggle;margin:0}.toggle--label{width:100px;height:54px;background:var(--indigo-color);border-radius:100px;border:3px solid var(--indigo-border);display:flex;position:relative;transition:all .35s ease-in;color:var(--indigo-color)}.toggle--checkbox:checked+.toggle--label{background:var(--blue-color);color:var(--blue-color);border-color:var(--blue-border)}.toggle--checkbox:checked+.toggle--label:before{animation-name:reverse;animation-duration:.35s;animation-fill-mode:forwards;transition:all .36s ease-in;background:var(--yellow-background);border-color:var(--yellow-border)}.toggle--label:before{animation-name:switch;animation-duration:.35s;animation-fill-mode:forwards;content:"";width:40px;height:40px;border:3px solid var(--gray-border);top:1px;left:3px;position:absolute;border-radius:40px;background:#fff}.toggle--label:after{transition-delay:0ms;transition:all .25s ease-in;position:absolute;content:"";box-shadow:var(--gray-dots) -14px 0 0 1px,var(--gray-dots) -22px 12px 0 -1px;left:80px;top:10px;width:6px;height:6px;background:transparent;border-radius:50%;opacity:1}.toggle--checkbox:checked+.toggle--label:after{transition-delay:50ms;opacity:0}.toggle--checkbox:checked+.toggle--label .toggle--label-background{width:5px;left:65px;top:22px}.toggle--checkbox:checked+.toggle--label .toggle--label-background:before{top:-4px;left:-5px;width:20px;height:5px}.toggle--checkbox:checked+.toggle--label .toggle--label-background:after{top:3px;width:20px;height:5px;left:-10px}.toggle--label-background{border-radius:5px;position:relative;background:#fff;left:32px;width:6px;transition:all .15s ease-in;top:25px;height:4px}.toggle--label-background:before{content:"";position:absolute;width:4px;height:4px;top:-15px;border-radius:5px;background:#fff;left:-20px;transition:all .15s ease-in}.toggle--label-background:after{content:"";position:absolute;width:4px;height:4px;left:-20px;top:10px;border-radius:5px;background:#fff;transition:all .15s ease-in}