1.switch {
2 --secondary-container: #3a4b39;
3 --primary: #84da89;
4 font-size: 17px;
5 position: relative;
6 display: inline-block;
7 width: 3.7em;
8 height: 1.8em;
9}
10
11.switch input {
12 display: none;
13 opacity: 0;
14 width: 0;
15 height: 0;
16}
17
18.slider {
19 position: absolute;
20 cursor: pointer;
21 top: 0;
22 left: 0;
23 right: 0;
24 bottom: 0;
25 background-color: #313033;
26 transition: .2s;
27 border-radius: 30px;
28}
29
30.slider:before {
31 position: absolute;
32 content: "";
33 height: 1.4em;
34 width: 1.4em;
35 border-radius: 20px;
36 left: 0.2em;
37 bottom: 0.2em;
38 background-color: #aeaaae;
39 transition: .4s;
40}
41
42input:checked + .slider::before {
43 background-color: var(--primary);
44}
45
46input:checked + .slider {
47 background-color: var(--secondary-container);
48}
49
50input:focus + .slider {
51 box-shadow: 0 0 1px var(--secondary-container);
52}
53
54input:checked + .slider:before {
55 transform: translateX(1.9em);
56}