1/* The switch - the box around the slider */
2.switch {
3  /* Variables */
4 --switch_width: 2em;
5 --switch_height: 1em;
6 --thumb_color: #e8e8e8;
7 --track_color: #e8e8e8;
8 --track_active_color: #888;
9 --outline_color: #000;
10 font-size: 17px;
11 position: relative;
12 display: inline-block;
13 width: var(--switch_width);
14 height: var(--switch_height);
15}
16
17/* Hide default HTML checkbox */
18.switch input {
19 opacity: 0;
20 width: 0;
21 height: 0;
22}
23
24/* The slider */
25.slider {
26 box-sizing: border-box;
27 border: 2px solid var(--outline_color);
28 position: absolute;
29 cursor: pointer;
30 top: 0;
31 left: 0;
32 right: 0;
33 bottom: 0;
34 background-color: var(--track_color);
35 transition: .15s;
36 border-radius: var(--switch_height);
37}
38
39.slider:before {
40 box-sizing: border-box;
41 position: absolute;
42 content: "";
43 height: var(--switch_height);
44 width: var(--switch_height);
45 border: 2px solid var(--outline_color);
46 border-radius: 100%;
47 left: -2px;
48 bottom: -2px;
49 background-color: var(--thumb_color);
50 transform: translateY(-0.2em);
51 box-shadow: 0 0.2em 0 var(--outline_color);
52 transition: .15s;
53}
54
55input:checked + .slider {
56 background-color: var(--track_active_color);
57}
58
59input:focus-visible + .slider {
60 box-shadow: 0 0 0 2px var(--track_active_color);
61}
62
63/* Raise thumb when hovered */
64input:hover + .slider:before {
65 transform: translateY(-0.3em);
66 box-shadow: 0 0.3em 0 var(--outline_color);
67}
68
69input:checked + .slider:before {
70 transform: translateX(calc(var(--switch_width) - var(--switch_height))) translateY(-0.2em);
71}
72
73/* Raise thumb when hovered & checked */
74input:hover:checked + .slider:before {
75 transform: translateX(calc(var(--switch_width) - var(--switch_height))) translateY(-0.3em);
76 box-shadow: 0 0.3em 0 var(--outline_color);
77}