* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --hue: 223;
    --trans-dur: 0.4s;
    --trans-timing: cubic-bezier(0.65, 0, 0.35, 1);
    font-size: calc(40px + (80 - 40) * (100vw - 320px) / (2560 - 320));
}

body,
input {
    color: hsl(var(--hue), 10%, 10%);
    font: 1em/1.5 sans-serif;
}

body {
    background-color: hsl(var(--hue), 10%, 90%);
    display: flex;
    height: 100vh;
    transition:
        background-color var(--trans-dur),
        color var(--trans-dur);
}

.switch,
.switch__input {
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.switch {
    margin: auto;
}

.switch__input,
.switch__input:before {
    background-color: hsl(var(--hue), 10%, 10%);
}

.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: hsl(var(--hue), 10%, 90%);
    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: hsl(var(--hue), 10%, 90%);
    top: calc(50% - 0.375em);
    left: calc(50% - 0.375em);
    width: 0.75em;
    height: 0.75em;
}

.switch__icon-part--2 {
    background-color: hsl(var(--hue), 10%, 10%);
    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 hsl(var(--hue), 10%, 10%) inset;
    width: 1.25em;
    height: 1.25em;
    transform: scale(0.25);
}

.switch__icon-part--3~.switch__icon-part {
    background-color: hsl(var(--hue), 10%, 10%);
    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: hsl(var(--hue), 10%, 90%);
}

.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 hsl(var(--hue), 10%, 10%) 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);
}

body:has(.switch__input:checked) {
    background-color: hsl(var(--hue), 10%, 10%);
    color: hsl(var(--hue), 10%, 90%);
}