1/* Dark Mode Only ;) */
2
3/* The switch - the box around the slider */
4.switch {
5  font-size: 17px;
6  position: relative;
7  display: inline-block;
8  width: 3.5em;
9  height: .5em;
10}
11
12/* Hide default HTML checkbox */
13.switch input {
14  opacity: 0;
15  width: 0;
16  height: 0;
17}
18
19/* The slider */
20.slider {
21  position: absolute;
22  cursor: pointer;
23  top: 0;
24  left: 0;
25  right: 0;
26  bottom: 0;
27  background-color: #5B5B5B;
28  transition: .4s;
29  border-radius: 30px;
30  display: flex;
31  align-items: center;
32}
33
34.slider .circle {
35  background-color: #212121;
36  height: 3em;
37  width: 3em;
38  border-radius: 50%;
39  position: absolute;
40  left: 0;
41  transform: translateX(-50%);
42  transition: .4s;
43}
44
45.slider .circle::before {
46  position: absolute;
47  content: "";
48  height: 2.3em;
49  width: 2.3em;
50  border-radius: 50%;
51  left: 50%;
52  top: 50%;
53  transform: translate(-50%, -50%);
54  background-color: rgb(182, 182, 182);
55  transition: .4s;
56}
57
58.slider .circle::after {
59  content: '';
60  background-color: #212121;
61  height: 1.7em;
62  width: 1.7em;
63  border-radius: 50%;
64  position: absolute;
65  top: 50%;
66  left: 50%;
67  transform: translate(-50%, -50%);
68  transition: .4s;
69}
70
71input:checked + .slider .circle {
72  transform: translateX(2em);
73  transition: .4s;
74}
75
76input:checked + .slider .circle::before {
77  background-color: #e1e1e1;
78  transition: .4s;
79}
80
81input:checked + .slider .circle::after {
82  width: 0;
83  height: 0;
84  transition: .4s;
85}