1/* The switch - the box around the slider */
2#theme-toggle-button {
3  font-size: 17px;
4  position: relative;
5  display: inline-block;
6  width: 7em;
7  cursor: pointer;
8}
9
10/* Hide default HTML checkbox */
11#toggle {
12  opacity: 0;
13  width: 0;
14  height: 0;
15}
16
17#container,
18#patches,
19#stars,
20#button,
21#sun,
22#moon,
23#cloud {
24  transition-property: all;
25  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
26  transition-duration: 0.25s;
27}
28
29/* night sky background */
30#toggle:checked + svg #container {
31  fill: #2b4360;
32}
33
34/* move button to right when checked */
35#toggle:checked + svg #button {
36  transform: translate(28px, 2.333px);
37}
38
39/* show/hide sun and moon based on checkbox state */
40#sun {
41  opacity: 1;
42}
43
44#toggle:checked + svg #sun {
45  opacity: 0;
46}
47
48#moon {
49  opacity: 0;
50}
51
52#toggle:checked + svg #moon {
53  opacity: 1;
54}
55
56/* show or hide background items on checkbox state */
57#cloud {
58  opacity: 1;
59}
60
61#toggle:checked + svg #cloud {
62  opacity: 0;
63}
64
65#stars {
66  opacity: 0;
67}
68
69#toggle:checked + svg #stars {
70  opacity: 1;
71}
72