1/* To hide the checkbox */
2#checkboxInput {
3  display: none;
4}
5
6.toggleSwitch {
7  display: flex;
8  align-items: center;
9  justify-content: center;
10  position: relative;
11  width: 80px;
12  height: 40px;
13  background-color: rgb(177, 177, 177);
14  border-radius: 20px;
15  cursor: pointer;
16  box-shadow: 3px 3px 6px rgba(24, 24, 24, 0.493) inset;
17  transition-duration: .3s;
18}
19
20.toggleSwitch::after {
21  content: "";
22  position: absolute;
23  height: 40px;
24  width: 40px;
25  left: 0px;
26  background: conic-gradient(rgba(26, 26, 26, 0.555),white,rgba(26, 26, 26, 0.555),white,rgba(26, 26, 26, 0.555));
27  border-radius: 50%;
28  transition-duration: .3s;
29  box-shadow: 5px 2px 7px rgba(8, 8, 8, 0.377);
30}
31
32#checkboxInput:checked+.toggleSwitch::after {
33  transform: translateX(100%) rotate(90deg);
34  transition-duration: .3s;
35}
36/* Switch background change */
37#checkboxInput:checked+.toggleSwitch {
38  background-color: rgb(252, 250, 250);
39  transition-duration: .3s;
40}