1.switch {
2  --switch-width: 3.5em;
3  --switch-height: calc(var(--switch-width) / 2);
4  --left-ball-color: black;
5  --right-ball-color: white;
6  width: var(--switch-width);
7  height: var(--switch-height);
8  border-radius: calc(var(--switch-height) / 2);
9  background-color: var(--left-ball-color);
10  position: relative;
11  overflow: hidden;
12}
13
14.switch input[type="checkbox"] {
15  width: 100%;
16  position: absolute;
17  height: 100%;
18  margin: 0;
19  opacity: 0;
20}
21
22.switch .left {
23  position: absolute;
24  width: calc(var(--switch-width) / 3);
25  height: calc(var(--switch-height) / 1.5);
26  background-color: var(--left-ball-color);
27  border-radius: 50%;
28  left: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
29  top: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
30  z-index: 2;
31  pointer-events: none;
32}
33
34.switch .right {
35  position: absolute;
36  width: calc(var(--switch-width) / 3);
37  height: calc(var(--switch-height) / 1.5);
38  background-color: var(--right-ball-color);
39  border-radius: 50%;
40  right: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
41  top: calc((var(--switch-height) - (var(--switch-height) / 1.5)) / 2);
42  z-index: 2;
43  pointer-events: none;
44}
45
46.switch .switcher {
47  position: absolute;
48  width: calc(100% + var(--switch-width) / 3);
49  height: 100%;
50  background-color: var(--right-ball-color);
51  z-index: 1;
52  left: calc(-50% + var(--switch-width) / (3 * 2));
53  pointer-events: none;
54  transition: left 500ms ease;
55  border-top-left-radius: calc(var(--switch-width) / 3);
56  border-bottom-left-radius: calc(var(--switch-width) / 3);
57}
58
59.switch .switcher:before {
60  position: absolute;
61  content: '';
62  width: calc(var(--switch-width) / 3);
63  height: 100%;
64  background-color: var(--left-ball-color);
65  display: block;
66  border-bottom-right-radius: 50%;
67  border-top-right-radius: 50%;
68  z-index: 2;
69}
70
71.switch .switcher:after {
72  position: absolute;
73  content: '';
74  width: calc(var(--switch-width) / 3);
75  height: 100%;
76  background-color: var(--right-ball-color);
77  display: block;
78  border-bottom-left-radius: 50%;
79  border-top-left-radius: 50%;
80}
81
82.switch input:checked ~ .switcher {
83  left: 100%;
84}
85
86.switch input:checked ~ .switcher:before {
87  display: none;
88}