1/* The switch - the box around the slider */
2.switch {
3  position: relative;
4  display: flex;
5  align-items: center;
6  justify-content: center;
7  width: 3.8em;
8  height: 3.8em;
9}
10
11.torch {
12  margin-top: 0.9em;
13  margin-left: 0.95em;
14  width: 30px;
15  height: 30px;
16  transform: rotate(-45deg);
17}
18
19.slider .b {
20  position: relative;
21  top: -3.3em;
22  transform: rotate(270deg);
23}
24
25.slider .bling_85 {
26  stroke: #fff;
27  stroke-width: 2.5;
28  stroke-linecap: round;
29  stroke-dasharray: 3;
30  stroke-dashoffset: 15;
31  transition: all 0.3s ease;
32}
33
34/* Hide default HTML checkbox */
35.switch input {
36  opacity: 0;
37  width: 0;
38  height: 0;
39}
40
41/* The slider */
42.slider {
43  position: absolute;
44  cursor: pointer;
45  top: 0;
46  left: 0;
47  right: 0;
48  bottom: 0;
49  transition: .4s;
50  border-radius: 50%;
51  background-color: rgba(116, 115, 115, 0.2);
52  backdrop-filter: blur(5px);
53  -webkit-backdrop-filter: blur(5px);
54  border: 1px solid rgba(255, 255, 255, 0.3);
55}
56
57.chk_85:checked + .slider {
58  animation: tap 0.3s linear forwards;
59}
60
61.chk_85:checked + .slider .bling_85 {
62  animation: bling_8561328 0.3s linear forwards;
63  animation-delay: 0.2s;
64}
65
66.chk_85:checked + .slider {
67  background-color: #FFA133;
68}
69
70.chk_85:focus + .slider {
71  box-shadow: 0 0 1px #FFA133;
72}
73
74@keyframes bling_8561328 {
75  50% {
76    stroke-dasharray: 3;
77    stroke-dashoffset: 12;
78  }
79
80  100% {
81    stroke-dasharray: 3;
82    stroke-dashoffset: 9;
83  }
84}
85
86@keyframes tap {
87  50% {
88    scale: 0.9;
89  }
90
91  100% {
92    scale: 1;
93  }
94}