1.toggle-switch {
2  position: relative;
3  width: 100px;
4  height: 50px;
5  --light: #d8dbe0;
6  --dark: #28292c;
7  --link: rgb(27, 129, 112);
8  --link-hover: rgb(24, 94, 82);
9}
10
11.switch-label {
12  position: absolute;
13  width: 100%;
14  height: 50px;
15  background-color: var(--dark);
16  border-radius: 25px;
17  cursor: pointer;
18  border: 3px solid var(--dark);
19}
20
21.checkbox {
22  position: absolute;
23  display: none;
24}
25
26.slider {
27  position: absolute;
28  width: 100%;
29  height: 100%;
30  border-radius: 25px;
31  -webkit-transition: 0.3s;
32  transition: 0.3s;
33}
34
35.checkbox:checked ~ .slider {
36  background-color: var(--light);
37}
38
39.slider::before {
40  content: "";
41  position: absolute;
42  top: 10px;
43  left: 10px;
44  width: 25px;
45  height: 25px;
46  border-radius: 50%;
47  -webkit-box-shadow: inset 12px -4px 0px 0px var(--light);
48  box-shadow: inset 12px -4px 0px 0px var(--light);
49  background-color: var(--dark);
50  -webkit-transition: 0.3s;
51  transition: 0.3s;
52}
53
54.checkbox:checked ~ .slider::before {
55  -webkit-transform: translateX(50px);
56  -ms-transform: translateX(50px);
57  transform: translateX(50px);
58  background-color: var(--dark);
59  -webkit-box-shadow: none;
60  box-shadow: none;
61}
62