1.switch {
2  position: relative;
3  height: 1.5rem;
4  width: 3rem;
5  cursor: pointer;
6  appearance: none;
7  -webkit-appearance: none;
8  border-radius: 9999px;
9  background-color: rgba(100, 116, 139, 0.377);
10  transition: all .3s ease;
11}
12
13.switch:checked {
14  background-color: rgba(236, 72, 153, 1);
15}
16
17.switch::before {
18  position: absolute;
19  content: "";
20  left: calc(1.5rem - 1.6rem);
21  top: calc(1.5rem - 1.6rem);
22  display: block;
23  height: 1.6rem;
24  width: 1.6rem;
25  cursor: pointer;
26  border: 1px solid rgba(100, 116, 139, 0.527);
27  border-radius: 9999px;
28  background-color: rgba(255, 255, 255, 1);
29  box-shadow: 0 3px 10px rgba(100, 116, 139, 0.327);
30  transition: all .3s ease;
31}
32
33.switch:hover::before {
34  box-shadow: 0 0 0px 8px rgba(0, 0, 0, .15)
35}
36
37.switch:checked:hover::before {
38  box-shadow: 0 0 0px 8px rgba(236, 72, 153, .15)
39}
40
41.switch:checked:before {
42  transform: translateX(100%);
43  border-color: rgba(236, 72, 153, 1);
44}