1/* Default */
2.theme {
3  display: flex;
4  align-items: center;
5  -webkit-tap-highlight-color: transparent;
6}
7
8.theme__fill,
9.theme__icon {
10  transition: 0.3s;
11}
12
13.theme__fill {
14  background-color: var(--bg);
15  display: block;
16  mix-blend-mode: difference;
17  position: fixed;
18  inset: 0;
19  height: 100%;
20  transform: translateX(-100%);
21}
22
23.theme__icon,
24.theme__toggle {
25  z-index: 1;
26}
27
28.theme__icon,
29.theme__icon-part {
30  position: absolute;
31}
32
33.theme__icon {
34  display: block;
35  top: 0.5em;
36  left: 0.5em;
37  width: 1.5em;
38  height: 1.5em;
39}
40
41.theme__icon-part {
42  border-radius: 50%;
43  box-shadow: 0.4em -0.4em 0 0.5em hsl(0,0%,100%) inset;
44  top: calc(50% - 0.5em);
45  left: calc(50% - 0.5em);
46  width: 1em;
47  height: 1em;
48  transition: box-shadow var(--transDur) ease-in-out,
49		opacity var(--transDur) ease-in-out,
50		transform var(--transDur) ease-in-out;
51  transform: scale(0.5);
52}
53
54.theme__icon-part ~ .theme__icon-part {
55  background-color: hsl(0,0%,100%);
56  border-radius: 0.05em;
57  top: 50%;
58  left: calc(50% - 0.05em);
59  transform: rotate(0deg) translateY(0.5em);
60  transform-origin: 50% 0;
61  width: 0.1em;
62  height: 0.2em;
63}
64
65.theme__icon-part:nth-child(3) {
66  transform: rotate(45deg) translateY(0.45em);
67}
68
69.theme__icon-part:nth-child(4) {
70  transform: rotate(90deg) translateY(0.45em);
71}
72
73.theme__icon-part:nth-child(5) {
74  transform: rotate(135deg) translateY(0.45em);
75}
76
77.theme__icon-part:nth-child(6) {
78  transform: rotate(180deg) translateY(0.45em);
79}
80
81.theme__icon-part:nth-child(7) {
82  transform: rotate(225deg) translateY(0.45em);
83}
84
85.theme__icon-part:nth-child(8) {
86  transform: rotate(270deg) translateY(0.5em);
87}
88
89.theme__icon-part:nth-child(9) {
90  transform: rotate(315deg) translateY(0.5em);
91}
92
93.theme__label,
94.theme__toggle,
95.theme__toggle-wrap {
96  position: relative;
97}
98
99.theme__toggle,
100.theme__toggle:before {
101  display: block;
102}
103
104.theme__toggle {
105  background-color: hsl(48,90%,85%);
106  border-radius: 25% / 50%;
107  box-shadow: 0 0 0 0.125em var(--primaryT);
108  padding: 0.25em;
109  width: 6em;
110  height: 3em;
111  -webkit-appearance: none;
112  appearance: none;
113  transition: background-color var(--transDur) ease-in-out,
114		box-shadow 0.15s ease-in-out,
115		transform var(--transDur) ease-in-out;
116}
117
118.theme__toggle:before {
119  background-color: hsl(48,90%,55%);
120  border-radius: 50%;
121  content: "";
122  width: 2.5em;
123  height: 2.5em;
124  transition: 0.3s;
125}
126
127.theme__toggle:focus {
128  box-shadow: 0 0 0 0.125em var(--primary);
129  outline: transparent;
130}
131
132/* Checked */
133.theme__toggle:checked {
134  background-color: hsl(198,90%,15%);
135}
136
137.theme__toggle:checked:before,
138.theme__toggle:checked ~ .theme__icon {
139  transform: translateX(3em);
140}
141
142.theme__toggle:checked:before {
143  background-color: hsl(198,90%,55%);
144}
145
146.theme__toggle:checked ~ .theme__fill {
147  transform: translateX(0);
148}
149
150.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(1) {
151  box-shadow: 0.2em -0.2em 0 0.2em hsl(0,0%,100%) inset;
152  transform: scale(1);
153  top: 0.2em;
154  left: -0.2em;
155}
156
157.theme__toggle:checked ~ .theme__icon .theme__icon-part ~ .theme__icon-part {
158  opacity: 0;
159}
160
161.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(2) {
162  transform: rotate(45deg) translateY(0.8em);
163}
164
165.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(3) {
166  transform: rotate(90deg) translateY(0.8em);
167}
168
169.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(4) {
170  transform: rotate(135deg) translateY(0.8em);
171}
172
173.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(5) {
174  transform: rotate(180deg) translateY(0.8em);
175}
176
177.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(6) {
178  transform: rotate(225deg) translateY(0.8em);
179}
180
181.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(7) {
182  transform: rotate(270deg) translateY(0.8em);
183}
184
185.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(8) {
186  transform: rotate(315deg) translateY(0.8em);
187}
188
189.theme__toggle:checked ~ .theme__icon .theme__icon-part:nth-child(9) {
190  transform: rotate(360deg) translateY(0.8em);
191}
192
193.theme__toggle-wrap {
194  margin: 0 0.75em;
195}
196
197@supports selector(:focus-visible) {
198  .theme__toggle:focus {
199    box-shadow: 0 0 0 0.125em var(--primaryT);
200  }
201
202  .theme__toggle:focus-visible {
203    box-shadow: 0 0 0 0.125em var(--primary);
204  }
205}