1/* The switch - the box around the slider */
2.switch {
3  font-size: 17px;
4  position: relative;
5  display: inline-block;
6  width: 3.5em;
7  height: 2em;
8}
9
10/* Hide default HTML checkbox */
11.switch input {
12  opacity: 0;
13  width: 0;
14  height: 0;
15}
16
17/* The slider */
18.slider {
19  position: absolute;
20  cursor: pointer;
21  inset: 0;
22  background: #9fccfa;
23  border-radius: 50px;
24  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
25}
26
27.slider:before {
28  position: absolute;
29  content: "";
30  display: flex;
31  align-items: center;
32  justify-content: center;
33  height: 2em;
34  width: 2em;
35  inset: 0;
36  background-color: white;
37  border-radius: 50px;
38  box-shadow: 0 10px 20px rgba(0,0,0,0.4);
39  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
40}
41
42.switch input:checked + .slider {
43  background: #0974f1;
44}
45
46.switch input:focus + .slider {
47  box-shadow: 0 0 1px #0974f1;
48}
49
50.switch input:checked + .slider:before {
51  transform: translateX(1.6em);
52}