Checkbox into switch magic

by Felis Catus

HTML

<input type="checkbox">

SCSS

$switch-rail: rgb(164, 211, 205);
$accent-color: #007E82;
input[type='checkbox']{
appearance: none;
                outline: none;
                cursor: pointer;
                width: 30px;
                height: 18px;
                border-radius: 8px;
                background-image: radial-gradient(circle at center, $accent-color 7px, transparent 7px),
                    radial-gradient(circle at 15px 10px, #000000c0 5px, transparent 9px), 
                    radial-gradient(circle at 5px center, $switch-rail 5px, transparent 5px),
                    linear-gradient(to right, white 5px, transparent 3px),
                    radial-gradient(circle at 25px center, $switch-rail 5px, transparent 5px),
                    linear-gradient(to left, white 5px, transparent 3px),
                    linear-gradient(to top, white 3px, #3da69880 4px, #3da69880 14px, white 13px);
                background-position: -7px, -7px, 0, 0, 0, 0, 0;
                transition: background-position 100ms linear, filter 150ms ease;
                filter: grayscale(1);
                &:checked {
                    background-position: 7px, 7px, 0, 0, 0, 0, 0;
                    filter: grayscale(0);
                }
}