1.form {
2  display: flex;
3}
4
5.input {
6  color: var(--fg);
7  font: 1em/1.5 Helvetica, sans-serif;
8}
9
10.form, .label {
11  width: 100%;
12}
13
14.form {
15  margin: auto;
16  max-width: 24em;
17  padding: 0 1.5em;
18}
19
20.label {
21  display: block;
22  text-align: center;
23  color: rgb(132, 248, 0);
24  -webkit-tap-highlight-color: transparent;
25}
26
27.label:first-child .input {
28  border-radius: 0.5em 0 0 0.5em;
29  box-shadow: 0.1em 0 0 #2726267f inset,
30		-0.1em 0 0 #27262600 inset,
31		0 0.1em 0 #afa490 inset,
32		0 -0.1em 0 #ffffff3f,
33		0 0.2em 0.5em #0000007f,
34		0 -0.1em 0 #926086 inset,
35		-0.1em -0.2em 0 #ffffff7f inset,
36		0.2em 0 0 #ffffff7f inset;
37}
38
39.label:last-child .input {
40  border-radius: 0 0.5em 0.5em 0;
41  box-shadow: 0 -0.1em 0 #926086 inset,
42		0.1em 0 0 #2726267f inset,
43		-0.1em 0 0 #2726267f inset,
44		0 0.1em 0 #afa490 inset,
45		-0.1em 0 0 #afa490 inset,
46		0 -0.1em 0 #ffffff3f,
47		0 0.2em 0.5em #0000007f,
48		-0.1em -0.1em 0 0.1em #ffffff7f inset;
49}
50
51.label:first-child .input:checked {
52  box-shadow: 0.1em 0 0 #272626af inset,
53		-0.1em 0 0 #272626 inset,
54		0 0.1em 0 #847a62 inset,
55		0 -0.1em 0 #ffffff3f,
56		0 0.1em 0 #ffffff7f,
57		0 -0.1em 0 #722257 inset,
58		-0.1em -0.2em 0 #ffffff7f inset,
59		0.2em 0 0 #ffffff7f inset;
60}
61
62.label:last-child .input:checked {
63  box-shadow: 0.1em 0 0 #272626af inset,
64		-0.1em 0 0 #272626 inset,
65		0 -0.1em 0 #722257 inset,
66		0 0.1em 0 #847a62 inset,
67		-0.1em 0 0 #847a62 inset,
68		0 -0.1em 0 #ffffff3f,
69		0 0.1em 0 #ffffff7f,
70		-0.1em -0.1em 0 0.1em #ffffff7f inset;
71}
72
73.input {
74  background-image: linear-gradient(#ffffff 33%,#414751 58%,#837b52,#c5baa1,#c3adaa);
75  border-radius: 0;
76  box-shadow: 0.1em 0 0 #2726267f inset,
77		-0.1em 0 0 #27262600 inset,
78		0 0.1em 0 #afa490 inset,
79		0 -0.1em 0 #ffffff3f,
80		0 0.2em 0.5em #0000007f,
81		0 -0.1em 0 #926086 inset,
82		-0.1em -0.2em 0 #ffffff7f inset;
83  cursor: pointer;
84  display: block;
85  margin-bottom: 0.5em;
86  width: 100%;
87  height: 1em;
88  transition: box-shadow var(--transDur) ease-in-out;
89  -webkit-appearance: none;
90  -moz-appearance: none;
91  appearance: none;
92}
93
94.input:checked {
95  background-image: linear-gradient(#ffffff 33%,#414751 58%,#827a7b,#c0b6ac,#c3adaa);
96  box-shadow: 0.1em 0 0 #272626af inset,
97		-0.1em 0 0 #272626 inset,
98		0 0.1em 0 #847a62 inset,
99		0 -0.1em 0 #ffffff3f,
100		0 0.1em 0 #ffffff7f,
101		0 -0.1em 0 #722257 inset,
102		-0.1em -0.2em 0 #ffffff7f inset;
103}
104
105.input:checked + .span {
106  opacity: 1;
107  color: red
108}
109
110.input:focus {
111  outline: transparent;
112}
113
114.input + .span {
115  opacity: 0.65;
116  transition: opacity var(--transDur) ease-in-out;
117}
118
119/* Dark mode */
120@media (prefers-color-scheme: dark) {
121  :root {
122    --bg: #5c6270;
123    --fg: #e3e4e8;
124  }
125
126  .label:first-child .input {
127    box-shadow: 0.1em 0 0 #2726267f inset,
128			-0.1em 0 0 #27262600 inset,
129			0 0.1em 0 #afa490 inset,
130			0 -0.1em 0 #0000001f,
131			0 0.2em 0.5em #0000007f,
132			0 -0.1em 0 #926086 inset,
133			-0.1em -0.2em 0 #ffffff7f inset,
134			0.2em 0 0 #ffffff7f inset;
135  }
136
137  .label:last-child .input {
138    box-shadow: 0 -0.1em 0 #926086 inset,
139			0.1em 0 0 #2726267f inset,
140			-0.1em 0 0 #2726267f inset,
141			0 0.1em 0 #afa490 inset,
142			-0.1em 0 0 #afa490 inset,
143			0 -0.1em 0 #0000001f,
144			0 0.2em 0.5em #0000007f,
145			-0.1em -0.1em 0 0.1em #ffffff7f inset;
146  }
147
148  .label:first-child .input:checked {
149    box-shadow: 0.1em 0 0 #272626af inset,
150			-0.1em 0 0 #272626 inset,
151			0 0.1em 0 #847a62 inset,
152			0 -0.1em 0 #0000007f,
153			0 0.1em 0 #0000007f,
154			0 -0.1em 0 #722257 inset,
155			-0.1em -0.2em 0 #ffffff7f inset,
156			0.2em 0 0 #ffffff7f inset
157  }
158
159  .label:last-child .input:checked {
160    box-shadow: 0.1em 0 0 #272626af inset,
161			-0.1em 0 0 #272626 inset,
162			0 -0.1em 0 #722257 inset,
163			0 0.1em 0 #847a62 inset,
164			-0.1em 0 0 #847a62 inset,
165			0 -0.1em 0 #0000001f,
166			0 0.1em 0 #0000007f,
167			-0.1em -0.1em 0 0.1em #ffffff7f inset;
168  }
169
170  .input {
171    box-shadow: 0.1em 0 0 #2726267f inset,
172			-0.1em 0 0 #27262600 inset,
173			0 0.1em 0 #afa490 inset,
174			0 -0.1em 0 #0000001f,
175			0 0.2em 0.5em #0000007f,
176			0 -0.1em 0 #926086 inset,
177			-0.1em -0.2em 0 #ffffff7f inset;
178  }
179
180  .input:checked {
181    box-shadow: 0.1em 0 0 #272626af inset,
182			-0.1em 0 0 #272626af inset,
183			0 0.1em 0 #847a62 inset,
184			0 -0.1em 0 #0000007f,
185			0 0.1em 0 #0000007f,
186			0 -0.1em 0 #722257 inset,
187			-0.1em -0.2em 0 #ffffff7f inset;
188  }
189}