1.toggle {
2  position: relative;
3  display: inline-block;
4  width: 60px;
5  height: 34px;
6}
7
8.toggle input {
9  opacity: 0;
10  width: 0;
11  height: 0;
12  transition: transform 0.2s ease-in-out;
13}
14
15.slider {
16  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
17  position: absolute;
18  cursor: pointer;
19  top: 0;
20  left: 0;
21  right: 0;
22  bottom: 0;
23  background-color: #FF3CAC;
24  background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
25  transition: 0.2 ease-in-out;
26  border-radius: 34px;
27}
28
29.slider:before {
30  position: absolute;
31  content: "";
32  height: 26px;
33  width: 26px;
34  left: 4px;
35  bottom: 4px;
36  background-color: #4158D0;
37  background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
38  transition: transform 0.3s ease-in-out;
39  border-radius: 50%;
40  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
41}
42
43.input:checked + .slider {
44  background-color: #8BC6EC;
45  background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
46}
47
48.input:checked + .slider:before {
49  transform: translateX(26px);
50}
51