1/* The switch - the box around the slider */
2.switch {
3  --sizeVar: 2em;
4  --color-primary: #dedede;
5  --color-secondary: #aaaaaa;
6  --color-primary-on: #1d9bf0;
7  --color-secondary-on: #ffffff;
8  position: absolute;
9  width: calc(var(--sizeVar) * 2);
10  height: var(--sizeVar);
11  background-color: var(--color-primary);
12  border-radius: var(--sizeVar);
13  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset;
14  cursor: pointer;
15  transform: translate(-50%, -50%);
16  transition: background-color 150ms ease-out;
17}
18
19.switch::after {
20  content: "";
21  position: absolute;
22  margin: calc(var(--sizeVar) / 10);
23  height: calc(var(--sizeVar) - calc(var(--sizeVar) / 5));
24  width: calc(var(--sizeVar) - calc(var(--sizeVar) / 5));
25  background-color: var(--color-secondary);
26  border-radius: var(--sizeVar);
27  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05) inset, 0 2px 4px rgba(0, 0, 0, 0.3);
28  transition: transform 150ms ease-out, background-color 150ms ease-out;
29}
30
31.switch:has(input:checked)::after {
32  transform: translateX(var(--sizeVar));
33  background-color: var(--color-secondary-on);
34}
35
36.switch:has(input:checked) {
37  background-color: var(--color-primary-on);
38}
39
40/* Hide default HTML checkbox */
41.switch input {
42  opacity: 0;
43  width: 0;
44  height: 0;
45}