1/* Switch - Container */
2.switch {
3  --primary: #50F080;
4  --secondary: #F05050;
5  --dark: #505050;
6  --light: #D0D0D0;
7  background-color: var(--dark);
8  position: relative;
9  display: inline-block;
10  border-radius: 1rem;
11  cursor: pointer;
12  width: 50px;
13  height: 25px;
14}
15
16/* Hide default HTML checkbox */
17.checkbox {
18  opacity: 0
19}
20
21/* The slider */
22.slider {
23  position: absolute;
24  left: 0;
25  top: 50%;
26  width: 50%;
27  height: 100%;
28  transition: .4s;
29  border-radius: 100%;
30  transform: translateY(-50%);
31  border: 4px solid var(--dark);
32  background-color: var(--secondary);
33}
34
35.checkbox:checked + .slider {
36  background-color: var(--primary);
37  transform: translate(100%, -50%);
38}