1.switch {
2  --input-focus: #2d8cf0;
3  --font-color: #323232;
4  --font-color-sub: #666;
5  --bg-color: #fff;
6  --bg-color-alt: #666;
7  --main-color: #323232;
8  position: relative;
9  display: flex;
10  flex-direction: column;
11  justify-content: center;
12  align-items: center;
13  gap: 30px;
14  width: 50px;
15  height: 20px;
16}
17
18.toggle {
19  opacity: 0;
20  width: 0;
21  height: 0;
22}
23
24.slider {
25  box-sizing: border-box;
26  border-radius: 5px;
27  border: 2px solid var(--main-color);
28  box-shadow: 4px 4px var(--main-color);
29  position: absolute;
30  cursor: pointer;
31  top: 0;
32  left: 0;
33  right: 0;
34  bottom: 0;
35  background-color: var(--bg-colorcolor);
36  transition: 0.3s;
37}
38
39.slider:before {
40  box-sizing: border-box;
41  position: absolute;
42  content: "";
43  height: 20px;
44  width: 20px;
45  border: 2px solid var(--main-color);
46  border-radius: 5px;
47  left: -2px;
48  bottom: 2px;
49  background-color: var(--bg-color);
50  box-shadow: 0 3px 0 var(--main-color);
51  transition: 0.3s;
52}
53
54.toggle:checked + .slider {
55  background-color: var(--input-focus);
56}
57
58.toggle:checked + .slider:before {
59  transform: translateX(30px);
60}