1.toggle-checkbox {
2  position: absolute;
3  opacity: 0;
4  cursor: pointer;
5  height: 0;
6  width: 0;
7}
8
9.toggle-slot {
10  font-size: 10px;
11  position: relative;
12  height: 3.5em;
13  width: 7em;
14  border: 0px solid transparent;
15  border-radius: 10em;
16  background-color: white;
17  transition: background-color 250ms;
18}
19
20.toggle-checkbox:checked ~ .toggle-slot {
21  background-color: #374151;
22}
23
24.toggle-button {
25  transform: translate(0.3em, 0.25em);
26  position: absolute;
27  height: 3em;
28  width: 3em;
29  border-radius: 50%;
30  background-color: #ffeccf;
31  box-shadow: inset 0px 0px 0px 0.75em #ffbb52;
32  transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.26,2,.46,.71);
33}
34
35.toggle-checkbox:checked ~ .toggle-slot .toggle-button {
36  background-color: #485367;
37  box-shadow: inset 0px 0px 0px 0.75em white;
38  transform: translate(3.65em, 0.25em);
39}
40
41.sun-icon {
42  position: absolute;
43  height: 6em;
44  width: 6em;
45  color: #ffbb52;
46}
47
48.sun-icon-wrapper {
49  position: absolute;
50  height: 6em;
51  width: 6em;
52  opacity: 1;
53  transform: translate(2em, 2em) rotate(15deg);
54  transform-origin: 50% 50%;
55  transition: opacity 150ms, transform 500ms cubic-bezier(.26,2,.46,.71);
56}
57
58.toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {
59  opacity: 0;
60  transform: translate(3em, 2em) rotate(0deg);
61}
62
63.moon-icon {
64  position: absolute;
65  height: 6em;
66  width: 6em;
67  color: white;
68}
69
70.moon-icon-wrapper {
71  position: absolute;
72  height: 6em;
73  width: 6em;
74  opacity: 0;
75  transform: translate(11em, 2em) rotate(0deg);
76  transform-origin: 50% 50%;
77  transition: opacity 150ms, transform 500ms cubic-bezier(.26,2.5,.46,.71);
78}
79
80.toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper {
81  opacity: 1;
82  transform: translate(2em, 2em) rotate(-15deg);
83}