:root{--hue:223;--trans-dur:0.4s;--trans-timing:cubic-bezier(0.65,0,0.35,1)}input.switch__input{color:var(--dark-sec)}.switch,.switch__input{font-size:30px;position:relative;-webkit-tap-highlight-color:transparent}.switch{margin:auto}.switch__input,.switch__input:before{background-color:var(--light-sec)}.switch__input{border-radius:0.75em;cursor:pointer;display:block;width:3em;height:1.5em;transition:background-color var(--trans-dur) var(--trans-timing);-webkit-appearance:none;appearance:none}.switch__input:before{border-radius:50%;content:"";display:block;position:absolute;top:0.125em;left:0.125em;width:1.25em;height:1.25em;transition:background-color var(--trans-dur) var(--trans-timing),transform var(--trans-dur) var(--trans-timing)}.switch__icon,.switch__icon-part{display:block;position:absolute;top:0;left:0}.switch__icon{background-color:var(--dark-sec);border-radius:50%;overflow:hidden;pointer-events:none;top:0.125em;left:0.125em;width:1.25em;height:1.25em;transition:transform var(--trans-dur) var(--trans-timing)}.switch__icon-part{transition:box-shadow var(--trans-dur) var(--trans-timing),transform var(--trans-dur) var(--trans-timing)}.switch__icon-part--1,.switch__icon-part--2,.switch__icon-part--3{border-radius:50%}.switch__icon-part--1{background-color:var(--dark-sec);top:calc(50% - 0.375em);left:calc(50% - 0.375em);width:0.75em;height:0.75em}.switch__icon-part--2{background-color:var(--light-sec);top:calc(50% - 0.4375em);left:calc(50% - 0.0625em);width:0.5em;height:0.5em;transform:translate(-0.1875em,0.1875em) scale(0.2)}.switch__icon-part--3{box-shadow:0 0 0 0.625em var(--light-sec) inset;width:1.25em;height:1.25em;transform:scale(0.25)}.switch__icon-part--3 ~ .switch__icon-part{background-color:var(--light-sec);border-radius:0.0625em;top:50%;left:50%;width:0.125em;height:0.1875em;transform-origin:50% 0}.switch__icon-part--4{transform:translateX(-50%) rotate(0) translateY(0.25em)}.switch__icon-part--5{transform:translateX(-50%) rotate(45deg) translateY(0.25em)}.switch__icon-part--6{transform:translateX(-50%) rotate(90deg) translateY(0.25em)}.switch__icon-part--7{transform:translateX(-50%) rotate(135deg) translateY(0.25em)}.switch__icon-part--8{transform:translateX(-50%) rotate(180deg) translateY(0.25em)}.switch__icon-part--9{transform:translateX(-50%) rotate(225deg) translateY(0.25em)}.switch__icon-part--10{transform:translateX(-50%) rotate(270deg) translateY(0.25em)}.switch__icon-part--11{transform:translateX(-50%) rotate(315deg) translateY(0.25em)}.switch__sr{overflow:hidden;position:absolute;width:1px;height:1px}.switch__input:checked{background-color:var(--dark-sec)}.switch__input:checked:before,.switch__input:checked ~ .switch__icon{transform:translateX(1.5em)}.switch__input:checked ~ .switch__icon .switch__icon-part--2{transform:translate(0,0) scale(1)}.switch__input:checked ~ .switch__icon .switch__icon-part--3{box-shadow:0 0 0 0.25em var(--light-sec) inset;transform:scale(1)}.switch__input:checked ~ .switch__icon .switch__icon-part--4{transform:translateX(-50%) rotate(0) translateY(0.625em) scale(0)}.switch__input:checked ~ .switch__icon .switch__icon-part--5{transform:translateX(-50%) rotate(45deg) translateY(0.625em) scale(0)}.switch__input:checked ~ .switch__icon .switch__icon-part--6{transform:translateX(-50%) rotate(90deg) translateY(0.625em) scale(0)}.switch__input:checked ~ .switch__icon .switch__icon-part--7{transform:translateX(-50%) rotate(135deg) translateY(0.625em) scale(0)}.switch__input:checked ~ .switch__icon .switch__icon-part--8{transform:translateX(-50%) rotate(180deg) translateY(0.625em) scale(0)}.switch__input:checked ~ .switch__icon .switch__icon-part--9{transform:translateX(-50%) rotate(225deg) translateY(0.625em) scale(0)}.switch__input:checked ~ .switch__icon .switch__icon-part--10{transform:translateX(-50%) rotate(270deg) translateY(0.625em) scale(0)}.switch__input:checked ~ .switch__icon .switch__icon-part--11{transform:translateX(-50%) rotate(315deg) translateY(0.625em) scale(0)}