1@charset "UTF-8";
2/*!
3 * Pico CSS ✨ v2.1.1 (https://picocss.com)
4 * Copyright 2019-2025 - Licensed under MIT
5 */
6/**
7 * Styles
8 */
9:root,
10:host {
11 --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
12 --pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);
13 --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji);
14 --pico-font-family: var(--pico-font-family-sans-serif);
15 --pico-line-height: 1.5;
16 --pico-font-weight: 400;
17 --pico-font-size: 100%;
18 --pico-text-underline-offset: 0.1rem;
19 --pico-border-radius: 0.25rem;
20 --pico-border-width: 0.0625rem;
21 --pico-outline-width: 0.125rem;
22 --pico-transition: 0.2s ease-in-out;
23 --pico-spacing: 1rem;
24 --pico-typography-spacing-vertical: 1rem;
25 --pico-block-spacing-vertical: var(--pico-spacing);
26 --pico-block-spacing-horizontal: var(--pico-spacing);
27 --pico-grid-column-gap: var(--pico-spacing);
28 --pico-grid-row-gap: var(--pico-spacing);
29 --pico-form-element-spacing-vertical: 0.75rem;
30 --pico-form-element-spacing-horizontal: 1rem;
31 --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
32 --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
33 --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color);
34 --pico-modal-overlay-backdrop-filter: blur(0.375rem);
35 --pico-nav-element-spacing-vertical: 1rem;
36 --pico-nav-element-spacing-horizontal: 0.5rem;
37 --pico-nav-link-spacing-vertical: 0.5rem;
38 --pico-nav-link-spacing-horizontal: 0.5rem;
39 --pico-nav-breadcrumb-divider: ">";
40 --pico-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
41 --pico-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
42 --pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
43 --pico-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
44 --pico-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
45 --pico-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
46 --pico-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
47 --pico-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
48}
49@media (min-width: 576px) {
50 :root,
51 :host {
52 --pico-font-size: 106.25%;
53 }
54}
55@media (min-width: 768px) {
56 :root,
57 :host {
58 --pico-font-size: 112.5%;
59 }
60}
61@media (min-width: 1024px) {
62 :root,
63 :host {
64 --pico-font-size: 118.75%;
65 }
66}
67@media (min-width: 1280px) {
68 :root,
69 :host {
70 --pico-font-size: 125%;
71 }
72}
73@media (min-width: 1536px) {
74 :root,
75 :host {
76 --pico-font-size: 131.25%;
77 }
78}
79
80a {
81 --pico-text-decoration: underline;
82}
83a.secondary, a.contrast {
84 --pico-text-decoration: underline;
85}
86
87small {
88 --pico-font-size: 0.875em;
89}
90
91h1,
92h2,
93h3,
94h4,
95h5,
96h6 {
97 --pico-font-weight: 700;
98}
99
100h1 {
101 --pico-font-size: 2rem;
102 --pico-line-height: 1.125;
103 --pico-typography-spacing-top: 3rem;
104}
105
106h2 {
107 --pico-font-size: 1.75rem;
108 --pico-line-height: 1.15;
109 --pico-typography-spacing-top: 2.625rem;
110}
111
112h3 {
113 --pico-font-size: 1.5rem;
114 --pico-line-height: 1.175;
115 --pico-typography-spacing-top: 2.25rem;
116}
117
118h4 {
119 --pico-font-size: 1.25rem;
120 --pico-line-height: 1.2;
121 --pico-typography-spacing-top: 1.874rem;
122}
123
124h5 {
125 --pico-font-size: 1.125rem;
126 --pico-line-height: 1.225;
127 --pico-typography-spacing-top: 1.6875rem;
128}
129
130h6 {
131 --pico-font-size: 1rem;
132 --pico-line-height: 1.25;
133 --pico-typography-spacing-top: 1.5rem;
134}
135
136thead th,
137thead td,
138tfoot th,
139tfoot td {
140 --pico-font-weight: 600;
141 --pico-border-width: 0.1875rem;
142}
143
144pre,
145code,
146kbd,
147samp {
148 --pico-font-family: var(--pico-font-family-monospace);
149}
150
151kbd {
152 --pico-font-weight: bolder;
153}
154
155input:not([type=submit],
156[type=button],
157[type=reset],
158[type=checkbox],
159[type=radio],
160[type=file]),
161:where(select, textarea) {
162 --pico-outline-width: 0.0625rem;
163}
164
165[type=search] {
166 --pico-border-radius: 5rem;
167}
168
169[type=checkbox],
170[type=radio] {
171 --pico-border-width: 0.125rem;
172}
173
174[type=checkbox][role=switch] {
175 --pico-border-width: 0.1875rem;
176}
177
178details.dropdown summary:not([role=button]) {
179 --pico-outline-width: 0.0625rem;
180}
181
182nav details.dropdown summary:focus-visible {
183 --pico-outline-width: 0.125rem;
184}
185
186[role=search] {
187 --pico-border-radius: 5rem;
188}
189
190[role=search]:has(button.secondary:focus,
191[type=submit].secondary:focus,
192[type=button].secondary:focus,
193[role=button].secondary:focus),
194[role=group]:has(button.secondary:focus,
195[type=submit].secondary:focus,
196[type=button].secondary:focus,
197[role=button].secondary:focus) {
198 --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
199}
200[role=search]:has(button.contrast:focus,
201[type=submit].contrast:focus,
202[type=button].contrast:focus,
203[role=button].contrast:focus),
204[role=group]:has(button.contrast:focus,
205[type=submit].contrast:focus,
206[type=button].contrast:focus,
207[role=button].contrast:focus) {
208 --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
209}
210[role=search] button,
211[role=search] [type=submit],
212[role=search] [type=button],
213[role=search] [role=button],
214[role=group] button,
215[role=group] [type=submit],
216[role=group] [type=button],
217[role=group] [role=button] {
218 --pico-form-element-spacing-horizontal: 2rem;
219}
220
221details summary[role=button]:not(.outline)::after {
222 filter: brightness(0) invert(1);
223}
224
225[aria-busy=true]:not(input, select, textarea):is(button, [type=submit], [type=button], [type=reset], [role=button]):not(.outline)::before {
226 filter: brightness(0) invert(1);
227}
228
229/**
230 * Color schemes
231 */
232[data-theme=light],
233:root:not([data-theme=dark]),
234:host(:not([data-theme=dark])) {
235 color-scheme: light;
236 --pico-background-color: #fff;
237 --pico-color: #373c44;
238 --pico-text-selection-color: rgba(246, 84, 126, 0.25);
239 --pico-muted-color: #646b79;
240 --pico-muted-border-color: rgb(231, 234, 239.5);
241 --pico-primary: #c72259;
242 --pico-primary-background: #d92662;
243 --pico-primary-border: var(--pico-primary-background);
244 --pico-primary-underline: rgba(199, 34, 89, 0.5);
245 --pico-primary-hover: #9d1945;
246 --pico-primary-hover-background: #c72259;
247 --pico-primary-hover-border: var(--pico-primary-hover-background);
248 --pico-primary-hover-underline: var(--pico-primary-hover);
249 --pico-primary-focus: rgba(246, 84, 126, 0.5);
250 --pico-primary-inverse: #fff;
251 --pico-secondary: #5d6b89;
252 --pico-secondary-background: #525f7a;
253 --pico-secondary-border: var(--pico-secondary-background);
254 --pico-secondary-underline: rgba(93, 107, 137, 0.5);
255 --pico-secondary-hover: #48536b;
256 --pico-secondary-hover-background: #48536b;
257 --pico-secondary-hover-border: var(--pico-secondary-hover-background);
258 --pico-secondary-hover-underline: var(--pico-secondary-hover);
259 --pico-secondary-focus: rgba(93, 107, 137, 0.25);
260 --pico-secondary-inverse: #fff;
261 --pico-contrast: #181c25;
262 --pico-contrast-background: #181c25;
263 --pico-contrast-border: var(--pico-contrast-background);
264 --pico-contrast-underline: rgba(24, 28, 37, 0.5);
265 --pico-contrast-hover: #000;
266 --pico-contrast-hover-background: #000;
267 --pico-contrast-hover-border: var(--pico-contrast-hover-background);
268 --pico-contrast-hover-underline: var(--pico-secondary-hover);
269 --pico-contrast-focus: rgba(93, 107, 137, 0.25);
270 --pico-contrast-inverse: #fff;
271 --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
272 --pico-h1-color: #2d3138;
273 --pico-h2-color: #373c44;
274 --pico-h3-color: #424751;
275 --pico-h4-color: #4d535e;
276 --pico-h5-color: #5c6370;
277 --pico-h6-color: #646b79;
278 --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
279 --pico-mark-color: #0f1114;
280 --pico-ins-color: rgb(28.5, 105.5, 84);
281 --pico-del-color: rgb(136, 56.5, 53);
282 --pico-blockquote-border-color: var(--pico-muted-border-color);
283 --pico-blockquote-footer-color: var(--pico-muted-color);
284 --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
285 --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
286 --pico-table-border-color: var(--pico-muted-border-color);
287 --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
288 --pico-code-background-color: rgb(243, 244.5, 246.75);
289 --pico-code-color: #646b79;
290 --pico-code-kbd-background-color: var(--pico-color);
291 --pico-code-kbd-color: var(--pico-background-color);
292 --pico-form-element-background-color: rgb(251, 251.5, 252.25);
293 --pico-form-element-selected-background-color: #dfe3eb;
294 --pico-form-element-border-color: #cfd5e2;
295 --pico-form-element-color: #23262c;
296 --pico-form-element-placeholder-color: var(--pico-muted-color);
297 --pico-form-element-active-background-color: #fff;
298 --pico-form-element-active-border-color: var(--pico-primary-border);
299 --pico-form-element-focus-color: var(--pico-primary-border);
300 --pico-form-element-disabled-opacity: 0.5;
301 --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
302 --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
303 --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
304 --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
305 --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
306 --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
307 --pico-switch-background-color: #bfc7d9;
308 --pico-switch-checked-background-color: var(--pico-primary-background);
309 --pico-switch-color: #fff;
310 --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
311 --pico-range-border-color: #dfe3eb;
312 --pico-range-active-border-color: #bfc7d9;
313 --pico-range-thumb-border-color: var(--pico-background-color);
314 --pico-range-thumb-color: var(--pico-secondary-background);
315 --pico-range-thumb-active-color: var(--pico-primary-background);
316 --pico-accordion-border-color: var(--pico-muted-border-color);
317 --pico-accordion-active-summary-color: var(--pico-primary-hover);
318 --pico-accordion-close-summary-color: var(--pico-color);
319 --pico-accordion-open-summary-color: var(--pico-muted-color);
320 --pico-card-background-color: var(--pico-background-color);
321 --pico-card-border-color: var(--pico-muted-border-color);
322 --pico-card-box-shadow: var(--pico-box-shadow);
323 --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
324 --pico-dropdown-background-color: #fff;
325 --pico-dropdown-border-color: #eff1f4;
326 --pico-dropdown-box-shadow: var(--pico-box-shadow);
327 --pico-dropdown-color: var(--pico-color);
328 --pico-dropdown-hover-background-color: #eff1f4;
329 --pico-loading-spinner-opacity: 0.5;
330 --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
331 --pico-progress-background-color: #dfe3eb;
332 --pico-progress-color: var(--pico-primary-background);
333 --pico-tooltip-background-color: var(--pico-contrast-background);
334 --pico-tooltip-color: var(--pico-contrast-inverse);
335 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
336 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
337}
338[data-theme=light] input:is([type=submit],
339[type=button],
340[type=reset],
341[type=checkbox],
342[type=radio],
343[type=file]),
344:root:not([data-theme=dark]) input:is([type=submit],
345[type=button],
346[type=reset],
347[type=checkbox],
348[type=radio],
349[type=file]),
350:host(:not([data-theme=dark])) input:is([type=submit],
351[type=button],
352[type=reset],
353[type=checkbox],
354[type=radio],
355[type=file]) {
356 --pico-form-element-focus-color: var(--pico-primary-focus);
357}
358
359@media only screen and (prefers-color-scheme: dark) {
360 :root:not([data-theme]),
361 :host(:not([data-theme])) {
362 color-scheme: dark;
363 --pico-background-color: rgb(19, 22.5, 30.5);
364 --pico-color: #c2c7d0;
365 --pico-text-selection-color: rgba(247, 112, 142, 0.1875);
366 --pico-muted-color: #7b8495;
367 --pico-muted-border-color: #202632;
368 --pico-primary: #f7708e;
369 --pico-primary-background: #d92662;
370 --pico-primary-border: var(--pico-primary-background);
371 --pico-primary-underline: rgba(247, 112, 142, 0.5);
372 --pico-primary-hover: #f99eae;
373 --pico-primary-hover-background: #f42c6f;
374 --pico-primary-hover-border: var(--pico-primary-hover-background);
375 --pico-primary-hover-underline: var(--pico-primary-hover);
376 --pico-primary-focus: rgba(247, 112, 142, 0.375);
377 --pico-primary-inverse: #fff;
378 --pico-secondary: #969eaf;
379 --pico-secondary-background: #525f7a;
380 --pico-secondary-border: var(--pico-secondary-background);
381 --pico-secondary-underline: rgba(150, 158, 175, 0.5);
382 --pico-secondary-hover: #b3b9c5;
383 --pico-secondary-hover-background: #5d6b89;
384 --pico-secondary-hover-border: var(--pico-secondary-hover-background);
385 --pico-secondary-hover-underline: var(--pico-secondary-hover);
386 --pico-secondary-focus: rgba(144, 158, 190, 0.25);
387 --pico-secondary-inverse: #fff;
388 --pico-contrast: #dfe3eb;
389 --pico-contrast-background: #eff1f4;
390 --pico-contrast-border: var(--pico-contrast-background);
391 --pico-contrast-underline: rgba(223, 227, 235, 0.5);
392 --pico-contrast-hover: #fff;
393 --pico-contrast-hover-background: #fff;
394 --pico-contrast-hover-border: var(--pico-contrast-hover-background);
395 --pico-contrast-hover-underline: var(--pico-contrast-hover);
396 --pico-contrast-focus: rgba(207, 213, 226, 0.25);
397 --pico-contrast-inverse: #000;
398 --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
399 --pico-h1-color: #f0f1f3;
400 --pico-h2-color: #e0e3e7;
401 --pico-h3-color: #c2c7d0;
402 --pico-h4-color: #b3b9c5;
403 --pico-h5-color: #a4acba;
404 --pico-h6-color: #8891a4;
405 --pico-mark-background-color: #014063;
406 --pico-mark-color: #fff;
407 --pico-ins-color: #62af9a;
408 --pico-del-color: rgb(205.5, 126, 123);
409 --pico-blockquote-border-color: var(--pico-muted-border-color);
410 --pico-blockquote-footer-color: var(--pico-muted-color);
411 --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
412 --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
413 --pico-table-border-color: var(--pico-muted-border-color);
414 --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
415 --pico-code-background-color: rgb(26, 30.5, 40.25);
416 --pico-code-color: #8891a4;
417 --pico-code-kbd-background-color: var(--pico-color);
418 --pico-code-kbd-color: var(--pico-background-color);
419 --pico-form-element-background-color: rgb(28, 33, 43.5);
420 --pico-form-element-selected-background-color: #2a3140;
421 --pico-form-element-border-color: #2a3140;
422 --pico-form-element-color: #e0e3e7;
423 --pico-form-element-placeholder-color: #8891a4;
424 --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
425 --pico-form-element-active-border-color: var(--pico-primary-border);
426 --pico-form-element-focus-color: var(--pico-primary-border);
427 --pico-form-element-disabled-opacity: 0.5;
428 --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
429 --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
430 --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
431 --pico-form-element-valid-border-color: #2a7b6f;
432 --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
433 --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
434 --pico-switch-background-color: #333c4e;
435 --pico-switch-checked-background-color: var(--pico-primary-background);
436 --pico-switch-color: #fff;
437 --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
438 --pico-range-border-color: #202632;
439 --pico-range-active-border-color: #2a3140;
440 --pico-range-thumb-border-color: var(--pico-background-color);
441 --pico-range-thumb-color: var(--pico-secondary-background);
442 --pico-range-thumb-active-color: var(--pico-primary-background);
443 --pico-accordion-border-color: var(--pico-muted-border-color);
444 --pico-accordion-active-summary-color: var(--pico-primary-hover);
445 --pico-accordion-close-summary-color: var(--pico-color);
446 --pico-accordion-open-summary-color: var(--pico-muted-color);
447 --pico-card-background-color: #181c25;
448 --pico-card-border-color: var(--pico-card-background-color);
449 --pico-card-box-shadow: var(--pico-box-shadow);
450 --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
451 --pico-dropdown-background-color: #181c25;
452 --pico-dropdown-border-color: #202632;
453 --pico-dropdown-box-shadow: var(--pico-box-shadow);
454 --pico-dropdown-color: var(--pico-color);
455 --pico-dropdown-hover-background-color: #202632;
456 --pico-loading-spinner-opacity: 0.5;
457 --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
458 --pico-progress-background-color: #202632;
459 --pico-progress-color: var(--pico-primary-background);
460 --pico-tooltip-background-color: var(--pico-contrast-background);
461 --pico-tooltip-color: var(--pico-contrast-inverse);
462 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
463 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
464 }
465 :root:not([data-theme]) input:is([type=submit],
466 [type=button],
467 [type=reset],
468 [type=checkbox],
469 [type=radio],
470 [type=file]),
471 :host(:not([data-theme])) input:is([type=submit],
472 [type=button],
473 [type=reset],
474 [type=checkbox],
475 [type=radio],
476 [type=file]) {
477 --pico-form-element-focus-color: var(--pico-primary-focus);
478 }
479 :root:not([data-theme]) details summary[role=button].contrast:not(.outline)::after,
480 :host(:not([data-theme])) details summary[role=button].contrast:not(.outline)::after {
481 filter: brightness(0);
482 }
483 :root:not([data-theme]) [aria-busy=true]:not(input, select, textarea).contrast:is(button,
484 [type=submit],
485 [type=button],
486 [type=reset],
487 [role=button]):not(.outline)::before,
488 :host(:not([data-theme])) [aria-busy=true]:not(input, select, textarea).contrast:is(button,
489 [type=submit],
490 [type=button],
491 [type=reset],
492 [role=button]):not(.outline)::before {
493 filter: brightness(0);
494 }
495}
496[data-theme=dark] {
497 color-scheme: dark;
498 --pico-background-color: rgb(19, 22.5, 30.5);
499 --pico-color: #c2c7d0;
500 --pico-text-selection-color: rgba(247, 112, 142, 0.1875);
501 --pico-muted-color: #7b8495;
502 --pico-muted-border-color: #202632;
503 --pico-primary: #f7708e;
504 --pico-primary-background: #d92662;
505 --pico-primary-border: var(--pico-primary-background);
506 --pico-primary-underline: rgba(247, 112, 142, 0.5);
507 --pico-primary-hover: #f99eae;
508 --pico-primary-hover-background: #f42c6f;
509 --pico-primary-hover-border: var(--pico-primary-hover-background);
510 --pico-primary-hover-underline: var(--pico-primary-hover);
511 --pico-primary-focus: rgba(247, 112, 142, 0.375);
512 --pico-primary-inverse: #fff;
513 --pico-secondary: #969eaf;
514 --pico-secondary-background: #525f7a;
515 --pico-secondary-border: var(--pico-secondary-background);
516 --pico-secondary-underline: rgba(150, 158, 175, 0.5);
517 --pico-secondary-hover: #b3b9c5;
518 --pico-secondary-hover-background: #5d6b89;
519 --pico-secondary-hover-border: var(--pico-secondary-hover-background);
520 --pico-secondary-hover-underline: var(--pico-secondary-hover);
521 --pico-secondary-focus: rgba(144, 158, 190, 0.25);
522 --pico-secondary-inverse: #fff;
523 --pico-contrast: #dfe3eb;
524 --pico-contrast-background: #eff1f4;
525 --pico-contrast-border: var(--pico-contrast-background);
526 --pico-contrast-underline: rgba(223, 227, 235, 0.5);
527 --pico-contrast-hover: #fff;
528 --pico-contrast-hover-background: #fff;
529 --pico-contrast-hover-border: var(--pico-contrast-hover-background);
530 --pico-contrast-hover-underline: var(--pico-contrast-hover);
531 --pico-contrast-focus: rgba(207, 213, 226, 0.25);
532 --pico-contrast-inverse: #000;
533 --pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024), 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03), 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036), 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
534 --pico-h1-color: #f0f1f3;
535 --pico-h2-color: #e0e3e7;
536 --pico-h3-color: #c2c7d0;
537 --pico-h4-color: #b3b9c5;
538 --pico-h5-color: #a4acba;
539 --pico-h6-color: #8891a4;
540 --pico-mark-background-color: #014063;
541 --pico-mark-color: #fff;
542 --pico-ins-color: #62af9a;
543 --pico-del-color: rgb(205.5, 126, 123);
544 --pico-blockquote-border-color: var(--pico-muted-border-color);
545 --pico-blockquote-footer-color: var(--pico-muted-color);
546 --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
547 --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
548 --pico-table-border-color: var(--pico-muted-border-color);
549 --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
550 --pico-code-background-color: rgb(26, 30.5, 40.25);
551 --pico-code-color: #8891a4;
552 --pico-code-kbd-background-color: var(--pico-color);
553 --pico-code-kbd-color: var(--pico-background-color);
554 --pico-form-element-background-color: rgb(28, 33, 43.5);
555 --pico-form-element-selected-background-color: #2a3140;
556 --pico-form-element-border-color: #2a3140;
557 --pico-form-element-color: #e0e3e7;
558 --pico-form-element-placeholder-color: #8891a4;
559 --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
560 --pico-form-element-active-border-color: var(--pico-primary-border);
561 --pico-form-element-focus-color: var(--pico-primary-border);
562 --pico-form-element-disabled-opacity: 0.5;
563 --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
564 --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
565 --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
566 --pico-form-element-valid-border-color: #2a7b6f;
567 --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
568 --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
569 --pico-switch-background-color: #333c4e;
570 --pico-switch-checked-background-color: var(--pico-primary-background);
571 --pico-switch-color: #fff;
572 --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
573 --pico-range-border-color: #202632;
574 --pico-range-active-border-color: #2a3140;
575 --pico-range-thumb-border-color: var(--pico-background-color);
576 --pico-range-thumb-color: var(--pico-secondary-background);
577 --pico-range-thumb-active-color: var(--pico-primary-background);
578 --pico-accordion-border-color: var(--pico-muted-border-color);
579 --pico-accordion-active-summary-color: var(--pico-primary-hover);
580 --pico-accordion-close-summary-color: var(--pico-color);
581 --pico-accordion-open-summary-color: var(--pico-muted-color);
582 --pico-card-background-color: #181c25;
583 --pico-card-border-color: var(--pico-card-background-color);
584 --pico-card-box-shadow: var(--pico-box-shadow);
585 --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
586 --pico-dropdown-background-color: #181c25;
587 --pico-dropdown-border-color: #202632;
588 --pico-dropdown-box-shadow: var(--pico-box-shadow);
589 --pico-dropdown-color: var(--pico-color);
590 --pico-dropdown-hover-background-color: #202632;
591 --pico-loading-spinner-opacity: 0.5;
592 --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
593 --pico-progress-background-color: #202632;
594 --pico-progress-color: var(--pico-primary-background);
595 --pico-tooltip-background-color: var(--pico-contrast-background);
596 --pico-tooltip-color: var(--pico-contrast-inverse);
597 --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
598 --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
599}
600[data-theme=dark] input:is([type=submit],
601[type=button],
602[type=reset],
603[type=checkbox],
604[type=radio],
605[type=file]) {
606 --pico-form-element-focus-color: var(--pico-primary-focus);
607}
608[data-theme=dark] details summary[role=button].contrast:not(.outline)::after {
609 filter: brightness(0);
610}
611[data-theme=dark] [aria-busy=true]:not(input, select, textarea).contrast:is(button,
612[type=submit],
613[type=button],
614[type=reset],
615[role=button]):not(.outline)::before {
616 filter: brightness(0);
617}
618
619progress,
620[type=checkbox],
621[type=radio],
622[type=range] {
623 accent-color: var(--pico-primary);
624}
625
626/**
627 * Document
628 * Content-box & Responsive typography
629 */
630*,
631*::before,
632*::after {
633 box-sizing: border-box;
634 background-repeat: no-repeat;
635}
636
637::before,
638::after {
639 text-decoration: inherit;
640 vertical-align: inherit;
641}
642
643:where(:root),
644:where(:host) {
645 -webkit-tap-highlight-color: transparent;
646 -webkit-text-size-adjust: 100%;
647 -moz-text-size-adjust: 100%;
648 text-size-adjust: 100%;
649 background-color: var(--pico-background-color);
650 color: var(--pico-color);
651 font-weight: var(--pico-font-weight);
652 font-size: var(--pico-font-size);
653 line-height: var(--pico-line-height);
654 font-family: var(--pico-font-family);
655 text-underline-offset: var(--pico-text-underline-offset);
656 text-rendering: optimizeLegibility;
657 overflow-wrap: break-word;
658 -moz-tab-size: 4;
659 -o-tab-size: 4;
660 tab-size: 4;
661}
662
663/**
664 * Landmarks
665 */
666body {
667 width: 100%;
668 margin: 0;
669}
670
671main {
672 display: block;
673}
674
675body > header,
676body > main,
677body > footer {
678 padding-block: var(--pico-block-spacing-vertical);
679}
680
681/**
682 * Section
683 */
684section {
685 margin-bottom: var(--pico-block-spacing-vertical);
686}
687
688/**
689 * Container
690 */
691.container,
692.container-fluid {
693 width: 100%;
694 margin-right: auto;
695 margin-left: auto;
696 padding-right: var(--pico-spacing);
697 padding-left: var(--pico-spacing);
698}
699
700@media (min-width: 576px) {
701 .container {
702 max-width: 510px;
703 padding-right: 0;
704 padding-left: 0;
705 }
706}
707@media (min-width: 768px) {
708 .container {
709 max-width: 700px;
710 }
711}
712@media (min-width: 1024px) {
713 .container {
714 max-width: 950px;
715 }
716}
717@media (min-width: 1280px) {
718 .container {
719 max-width: 1200px;
720 }
721}
722@media (min-width: 1536px) {
723 .container {
724 max-width: 1450px;
725 }
726}
727
728/**
729 * Grid
730 * Minimal grid system with auto-layout columns
731 */
732.grid {
733 grid-column-gap: var(--pico-grid-column-gap);
734 grid-row-gap: var(--pico-grid-row-gap);
735 display: grid;
736 grid-template-columns: 1fr;
737}
738@media (min-width: 768px) {
739 .grid {
740 grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
741 }
742}
743.grid > * {
744 min-width: 0;
745}
746
747/**
748 * Overflow auto
749 */
750.overflow-auto {
751 overflow: auto;
752}
753
754/**
755 * Typography
756 */
757b,
758strong {
759 font-weight: bolder;
760}
761
762sub,
763sup {
764 position: relative;
765 font-size: 0.75em;
766 line-height: 0;
767 vertical-align: baseline;
768}
769
770sub {
771 bottom: -0.25em;
772}
773
774sup {
775 top: -0.5em;
776}
777
778address,
779blockquote,
780dl,
781ol,
782p,
783pre,
784table,
785ul {
786 margin-top: 0;
787 margin-bottom: var(--pico-typography-spacing-vertical);
788 color: var(--pico-color);
789 font-style: normal;
790 font-weight: var(--pico-font-weight);
791}
792
793h1,
794h2,
795h3,
796h4,
797h5,
798h6 {
799 margin-top: 0;
800 margin-bottom: var(--pico-typography-spacing-vertical);
801 color: var(--pico-color);
802 font-weight: var(--pico-font-weight);
803 font-size: var(--pico-font-size);
804 line-height: var(--pico-line-height);
805 font-family: var(--pico-font-family);
806}
807
808h1 {
809 --pico-color: var(--pico-h1-color);
810}
811
812h2 {
813 --pico-color: var(--pico-h2-color);
814}
815
816h3 {
817 --pico-color: var(--pico-h3-color);
818}
819
820h4 {
821 --pico-color: var(--pico-h4-color);
822}
823
824h5 {
825 --pico-color: var(--pico-h5-color);
826}
827
828h6 {
829 --pico-color: var(--pico-h6-color);
830}
831
832:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
833 margin-top: var(--pico-typography-spacing-top);
834}
835
836p {
837 margin-bottom: var(--pico-typography-spacing-vertical);
838}
839
840hgroup {
841 margin-bottom: var(--pico-typography-spacing-vertical);
842}
843hgroup > * {
844 margin-top: 0;
845 margin-bottom: 0;
846}
847hgroup > *:not(:first-child):last-child {
848 --pico-color: var(--pico-muted-color);
849 --pico-font-weight: unset;
850 font-size: 1rem;
851}
852
853:where(ol, ul) li {
854 margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25);
855}
856
857:where(dl, ol, ul) :where(dl, ol, ul) {
858 margin: 0;
859 margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25);
860}
861
862ul li {
863 list-style: square;
864}
865
866mark {
867 padding: 0.125rem 0.25rem;
868 background-color: var(--pico-mark-background-color);
869 color: var(--pico-mark-color);
870 vertical-align: baseline;
871}
872
873blockquote {
874 display: block;
875 margin: var(--pico-typography-spacing-vertical) 0;
876 padding: var(--pico-spacing);
877 border-right: none;
878 border-left: 0.25rem solid var(--pico-blockquote-border-color);
879 border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
880 border-inline-end: none;
881}
882blockquote footer {
883 margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5);
884 color: var(--pico-blockquote-footer-color);
885}
886
887abbr[title] {
888 border-bottom: 1px dotted;
889 text-decoration: none;
890 cursor: help;
891}
892
893ins {
894 color: var(--pico-ins-color);
895 text-decoration: none;
896}
897
898del {
899 color: var(--pico-del-color);
900}
901
902::-moz-selection {
903 background-color: var(--pico-text-selection-color);
904}
905
906::selection {
907 background-color: var(--pico-text-selection-color);
908}
909
910/**
911 * Link
912 */
913:where(a:not([role=button])),
914[role=link] {
915 --pico-color: var(--pico-primary);
916 --pico-background-color: transparent;
917 --pico-underline: var(--pico-primary-underline);
918 outline: none;
919 background-color: var(--pico-background-color);
920 color: var(--pico-color);
921 -webkit-text-decoration: var(--pico-text-decoration);
922 text-decoration: var(--pico-text-decoration);
923 text-decoration-color: var(--pico-underline);
924 text-underline-offset: 0.125em;
925 transition: background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
926 transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
927 transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
928}
929:where(a:not([role=button])):is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
930[role=link]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
931 --pico-color: var(--pico-primary-hover);
932 --pico-underline: var(--pico-primary-hover-underline);
933 --pico-text-decoration: underline;
934}
935:where(a:not([role=button])):focus-visible,
936[role=link]:focus-visible {
937 box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
938}
939:where(a:not([role=button])).secondary,
940[role=link].secondary {
941 --pico-color: var(--pico-secondary);
942 --pico-underline: var(--pico-secondary-underline);
943}
944:where(a:not([role=button])).secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
945[role=link].secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
946 --pico-color: var(--pico-secondary-hover);
947 --pico-underline: var(--pico-secondary-hover-underline);
948}
949:where(a:not([role=button])).contrast,
950[role=link].contrast {
951 --pico-color: var(--pico-contrast);
952 --pico-underline: var(--pico-contrast-underline);
953}
954:where(a:not([role=button])).contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
955[role=link].contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
956 --pico-color: var(--pico-contrast-hover);
957 --pico-underline: var(--pico-contrast-hover-underline);
958}
959
960a[role=button] {
961 display: inline-block;
962}
963
964/**
965 * Button
966 */
967button {
968 margin: 0;
969 overflow: visible;
970 font-family: inherit;
971 text-transform: none;
972}
973
974button,
975[type=submit],
976[type=reset],
977[type=button] {
978 -webkit-appearance: button;
979}
980
981button,
982[type=submit],
983[type=reset],
984[type=button],
985[type=file]::file-selector-button,
986[role=button] {
987 --pico-background-color: var(--pico-primary-background);
988 --pico-border-color: var(--pico-primary-border);
989 --pico-color: var(--pico-primary-inverse);
990 --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
991 padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
992 border: var(--pico-border-width) solid var(--pico-border-color);
993 border-radius: var(--pico-border-radius);
994 outline: none;
995 background-color: var(--pico-background-color);
996 box-shadow: var(--pico-box-shadow);
997 color: var(--pico-color);
998 font-weight: var(--pico-font-weight);
999 font-size: 1rem;
1000 line-height: var(--pico-line-height);
1001 text-align: center;
1002 text-decoration: none;
1003 cursor: pointer;
1004 -webkit-user-select: none;
1005 -moz-user-select: none;
1006 user-select: none;
1007 transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
1008}
1009button:is([aria-current]:not([aria-current=false])), button:is(:hover, :active, :focus),
1010[type=submit]:is([aria-current]:not([aria-current=false])),
1011[type=submit]:is(:hover, :active, :focus),
1012[type=reset]:is([aria-current]:not([aria-current=false])),
1013[type=reset]:is(:hover, :active, :focus),
1014[type=button]:is([aria-current]:not([aria-current=false])),
1015[type=button]:is(:hover, :active, :focus),
1016[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])),
1017[type=file]::file-selector-button:is(:hover, :active, :focus),
1018[role=button]:is([aria-current]:not([aria-current=false])),
1019[role=button]:is(:hover, :active, :focus) {
1020 --pico-background-color: var(--pico-primary-hover-background);
1021 --pico-border-color: var(--pico-primary-hover-border);
1022 --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
1023 --pico-color: var(--pico-primary-inverse);
1024}
1025button:focus, button:is([aria-current]:not([aria-current=false])):focus,
1026[type=submit]:focus,
1027[type=submit]:is([aria-current]:not([aria-current=false])):focus,
1028[type=reset]:focus,
1029[type=reset]:is([aria-current]:not([aria-current=false])):focus,
1030[type=button]:focus,
1031[type=button]:is([aria-current]:not([aria-current=false])):focus,
1032[type=file]::file-selector-button:focus,
1033[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus,
1034[role=button]:focus,
1035[role=button]:is([aria-current]:not([aria-current=false])):focus {
1036 --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
1037}
1038
1039[type=submit],
1040[type=reset],
1041[type=button] {
1042 margin-bottom: var(--pico-spacing);
1043}
1044
1045:is(button, [type=submit], [type=button], [role=button]).secondary,
1046[type=reset],
1047[type=file]::file-selector-button {
1048 --pico-background-color: var(--pico-secondary-background);
1049 --pico-border-color: var(--pico-secondary-border);
1050 --pico-color: var(--pico-secondary-inverse);
1051 cursor: pointer;
1052}
1053:is(button, [type=submit], [type=button], [role=button]).secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
1054[type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
1055[type=file]::file-selector-button:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
1056 --pico-background-color: var(--pico-secondary-hover-background);
1057 --pico-border-color: var(--pico-secondary-hover-border);
1058 --pico-color: var(--pico-secondary-inverse);
1059}
1060:is(button, [type=submit], [type=button], [role=button]).secondary:focus, :is(button, [type=submit], [type=button], [role=button]).secondary:is([aria-current]:not([aria-current=false])):focus,
1061[type=reset]:focus,
1062[type=reset]:is([aria-current]:not([aria-current=false])):focus,
1063[type=file]::file-selector-button:focus,
1064[type=file]::file-selector-button:is([aria-current]:not([aria-current=false])):focus {
1065 --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
1066}
1067
1068:is(button, [type=submit], [type=button], [role=button]).contrast {
1069 --pico-background-color: var(--pico-contrast-background);
1070 --pico-border-color: var(--pico-contrast-border);
1071 --pico-color: var(--pico-contrast-inverse);
1072}
1073:is(button, [type=submit], [type=button], [role=button]).contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
1074 --pico-background-color: var(--pico-contrast-hover-background);
1075 --pico-border-color: var(--pico-contrast-hover-border);
1076 --pico-color: var(--pico-contrast-inverse);
1077}
1078:is(button, [type=submit], [type=button], [role=button]).contrast:focus, :is(button, [type=submit], [type=button], [role=button]).contrast:is([aria-current]:not([aria-current=false])):focus {
1079 --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
1080}
1081
1082:is(button, [type=submit], [type=button], [role=button]).outline,
1083[type=reset].outline {
1084 --pico-background-color: transparent;
1085 --pico-color: var(--pico-primary);
1086 --pico-border-color: var(--pico-primary);
1087}
1088:is(button, [type=submit], [type=button], [role=button]).outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
1089[type=reset].outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
1090 --pico-background-color: transparent;
1091 --pico-color: var(--pico-primary-hover);
1092 --pico-border-color: var(--pico-primary-hover);
1093}
1094
1095:is(button, [type=submit], [type=button], [role=button]).outline.secondary,
1096[type=reset].outline {
1097 --pico-color: var(--pico-secondary);
1098 --pico-border-color: var(--pico-secondary);
1099}
1100:is(button, [type=submit], [type=button], [role=button]).outline.secondary:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
1101[type=reset].outline:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
1102 --pico-color: var(--pico-secondary-hover);
1103 --pico-border-color: var(--pico-secondary-hover);
1104}
1105
1106:is(button, [type=submit], [type=button], [role=button]).outline.contrast {
1107 --pico-color: var(--pico-contrast);
1108 --pico-border-color: var(--pico-contrast);
1109}
1110:is(button, [type=submit], [type=button], [role=button]).outline.contrast:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
1111 --pico-color: var(--pico-contrast-hover);
1112 --pico-border-color: var(--pico-contrast-hover);
1113}
1114
1115:where(button, [type=submit], [type=reset], [type=button], [role=button])[disabled],
1116:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]) {
1117 opacity: 0.5;
1118 pointer-events: none;
1119}
1120
1121/**
1122 * Table
1123 */
1124:where(table) {
1125 width: 100%;
1126 border-collapse: collapse;
1127 border-spacing: 0;
1128 text-indent: 0;
1129}
1130
1131th,
1132td {
1133 padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
1134 border-bottom: var(--pico-border-width) solid var(--pico-table-border-color);
1135 background-color: var(--pico-background-color);
1136 color: var(--pico-color);
1137 font-weight: var(--pico-font-weight);
1138 text-align: left;
1139 text-align: start;
1140}
1141
1142tfoot th,
1143tfoot td {
1144 border-top: var(--pico-border-width) solid var(--pico-table-border-color);
1145 border-bottom: 0;
1146}
1147
1148table.striped tbody tr:nth-child(odd) th,
1149table.striped tbody tr:nth-child(odd) td {
1150 background-color: var(--pico-table-row-stripped-background-color);
1151}
1152
1153/**
1154 * Embedded content
1155 */
1156:where(audio, canvas, iframe, img, svg, video) {
1157 vertical-align: middle;
1158}
1159
1160audio,
1161video {
1162 display: inline-block;
1163}
1164
1165audio:not([controls]) {
1166 display: none;
1167 height: 0;
1168}
1169
1170:where(iframe) {
1171 border-style: none;
1172}
1173
1174img {
1175 max-width: 100%;
1176 height: auto;
1177 border-style: none;
1178}
1179
1180:where(svg:not([fill])) {
1181 fill: currentColor;
1182}
1183
1184svg:not(:root),
1185svg:not(:host) {
1186 overflow: hidden;
1187}
1188
1189/**
1190 * Code
1191 */
1192pre,
1193code,
1194kbd,
1195samp {
1196 font-size: 0.875em;
1197 font-family: var(--pico-font-family);
1198}
1199
1200pre code,
1201pre samp {
1202 font-size: inherit;
1203 font-family: inherit;
1204}
1205
1206pre {
1207 -ms-overflow-style: scrollbar;
1208 overflow: auto;
1209}
1210
1211pre,
1212code,
1213kbd,
1214samp {
1215 border-radius: var(--pico-border-radius);
1216 background: var(--pico-code-background-color);
1217 color: var(--pico-code-color);
1218 font-weight: var(--pico-font-weight);
1219 line-height: initial;
1220}
1221
1222code,
1223kbd,
1224samp {
1225 display: inline-block;
1226 padding: 0.375rem;
1227}
1228
1229pre {
1230 display: block;
1231 margin-bottom: var(--pico-spacing);
1232 overflow-x: auto;
1233}
1234pre > code,
1235pre > samp {
1236 display: block;
1237 padding: var(--pico-spacing);
1238 background: none;
1239 line-height: var(--pico-line-height);
1240}
1241
1242kbd {
1243 background-color: var(--pico-code-kbd-background-color);
1244 color: var(--pico-code-kbd-color);
1245 vertical-align: baseline;
1246}
1247
1248/**
1249 * Figure
1250 */
1251figure {
1252 display: block;
1253 margin: 0;
1254 padding: 0;
1255}
1256figure figcaption {
1257 padding: calc(var(--pico-spacing) * 0.5) 0;
1258 color: var(--pico-muted-color);
1259}
1260
1261/**
1262 * Misc
1263 */
1264hr {
1265 height: 0;
1266 margin: var(--pico-typography-spacing-vertical) 0;
1267 border: 0;
1268 border-top: 1px solid var(--pico-muted-border-color);
1269 color: inherit;
1270}
1271
1272[hidden],
1273template {
1274 display: none !important;
1275}
1276
1277canvas {
1278 display: inline-block;
1279}
1280
1281/**
1282 * Basics form elements
1283 */
1284input,
1285optgroup,
1286select,
1287textarea {
1288 margin: 0;
1289 font-size: 1rem;
1290 line-height: var(--pico-line-height);
1291 font-family: inherit;
1292 letter-spacing: inherit;
1293}
1294
1295input {
1296 overflow: visible;
1297}
1298
1299select {
1300 text-transform: none;
1301}
1302
1303legend {
1304 max-width: 100%;
1305 padding: 0;
1306 color: inherit;
1307 white-space: normal;
1308}
1309
1310textarea {
1311 overflow: auto;
1312}
1313
1314[type=checkbox],
1315[type=radio] {
1316 padding: 0;
1317}
1318
1319::-webkit-inner-spin-button,
1320::-webkit-outer-spin-button {
1321 height: auto;
1322}
1323
1324[type=search] {
1325 -webkit-appearance: textfield;
1326 outline-offset: -2px;
1327}
1328
1329[type=search]::-webkit-search-decoration {
1330 -webkit-appearance: none;
1331}
1332
1333::-webkit-file-upload-button {
1334 -webkit-appearance: button;
1335 font: inherit;
1336}
1337
1338::-moz-focus-inner {
1339 padding: 0;
1340 border-style: none;
1341}
1342
1343:-moz-focusring {
1344 outline: none;
1345}
1346
1347:-moz-ui-invalid {
1348 box-shadow: none;
1349}
1350
1351::-ms-expand {
1352 display: none;
1353}
1354
1355[type=file],
1356[type=range] {
1357 padding: 0;
1358 border-width: 0;
1359}
1360
1361input:not([type=checkbox], [type=radio], [type=range]) {
1362 height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
1363}
1364
1365fieldset {
1366 width: 100%;
1367 margin: 0;
1368 margin-bottom: var(--pico-spacing);
1369 padding: 0;
1370 border: 0;
1371}
1372
1373label,
1374fieldset legend {
1375 display: block;
1376 margin-bottom: calc(var(--pico-spacing) * 0.375);
1377 color: var(--pico-color);
1378 font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
1379}
1380
1381fieldset legend {
1382 margin-bottom: calc(var(--pico-spacing) * 0.5);
1383}
1384
1385input:not([type=checkbox], [type=radio]),
1386button[type=submit],
1387select,
1388textarea {
1389 width: 100%;
1390}
1391
1392input:not([type=checkbox], [type=radio], [type=range], [type=file]),
1393select,
1394textarea {
1395 -webkit-appearance: none;
1396 -moz-appearance: none;
1397 appearance: none;
1398 padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
1399}
1400
1401input,
1402select,
1403textarea {
1404 --pico-background-color: var(--pico-form-element-background-color);
1405 --pico-border-color: var(--pico-form-element-border-color);
1406 --pico-color: var(--pico-form-element-color);
1407 --pico-box-shadow: none;
1408 border: var(--pico-border-width) solid var(--pico-border-color);
1409 border-radius: var(--pico-border-radius);
1410 outline: none;
1411 background-color: var(--pico-background-color);
1412 box-shadow: var(--pico-box-shadow);
1413 color: var(--pico-color);
1414 font-weight: var(--pico-font-weight);
1415 transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
1416}
1417
1418input:not([type=submit],
1419[type=button],
1420[type=reset],
1421[type=checkbox],
1422[type=radio],
1423[readonly]):is(:active, :focus),
1424:where(select, textarea):not([readonly]):is(:active, :focus) {
1425 --pico-background-color: var(--pico-form-element-active-background-color);
1426}
1427
1428input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),
1429:where(select, textarea):not([readonly]):is(:active, :focus) {
1430 --pico-border-color: var(--pico-form-element-active-border-color);
1431}
1432
1433input:not([type=submit],
1434[type=button],
1435[type=reset],
1436[type=range],
1437[type=file],
1438[readonly]):focus,
1439:where(select, textarea):not([readonly]):focus {
1440 --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
1441}
1442
1443input:not([type=submit], [type=button], [type=reset])[disabled],
1444select[disabled],
1445textarea[disabled],
1446label[aria-disabled=true],
1447:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
1448 opacity: var(--pico-form-element-disabled-opacity);
1449 pointer-events: none;
1450}
1451
1452label[aria-disabled=true] input[disabled] {
1453 opacity: 1;
1454}
1455
1456:where(input, select, textarea):not([type=checkbox],
1457[type=radio],
1458[type=date],
1459[type=datetime-local],
1460[type=month],
1461[type=time],
1462[type=week],
1463[type=range])[aria-invalid] {
1464 padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
1465 padding-left: var(--pico-form-element-spacing-horizontal);
1466 padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
1467 padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
1468 background-position: center right 0.75rem;
1469 background-size: 1rem auto;
1470 background-repeat: no-repeat;
1471}
1472:where(input, select, textarea):not([type=checkbox],
1473[type=radio],
1474[type=date],
1475[type=datetime-local],
1476[type=month],
1477[type=time],
1478[type=week],
1479[type=range])[aria-invalid=false]:not(select) {
1480 background-image: var(--pico-icon-valid);
1481}
1482:where(input, select, textarea):not([type=checkbox],
1483[type=radio],
1484[type=date],
1485[type=datetime-local],
1486[type=month],
1487[type=time],
1488[type=week],
1489[type=range])[aria-invalid=true]:not(select) {
1490 background-image: var(--pico-icon-invalid);
1491}
1492:where(input, select, textarea)[aria-invalid=false] {
1493 --pico-border-color: var(--pico-form-element-valid-border-color);
1494}
1495:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
1496 --pico-border-color: var(--pico-form-element-valid-active-border-color) !important;
1497}
1498:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus):not([type=checkbox], [type=radio]) {
1499 --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important;
1500}
1501:where(input, select, textarea)[aria-invalid=true] {
1502 --pico-border-color: var(--pico-form-element-invalid-border-color);
1503}
1504:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
1505 --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important;
1506}
1507:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus):not([type=checkbox], [type=radio]) {
1508 --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important;
1509}
1510
1511[dir=rtl] :where(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false]) {
1512 background-position: center left 0.75rem;
1513}
1514
1515input::placeholder,
1516input::-webkit-input-placeholder,
1517textarea::placeholder,
1518textarea::-webkit-input-placeholder,
1519select:invalid {
1520 color: var(--pico-form-element-placeholder-color);
1521 opacity: 1;
1522}
1523
1524input:not([type=checkbox], [type=radio]),
1525select,
1526textarea {
1527 margin-bottom: var(--pico-spacing);
1528}
1529
1530select::-ms-expand {
1531 border: 0;
1532 background-color: transparent;
1533}
1534select:not([multiple], [size]) {
1535 padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
1536 padding-left: var(--pico-form-element-spacing-horizontal);
1537 padding-inline-start: var(--pico-form-element-spacing-horizontal);
1538 padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
1539 background-image: var(--pico-icon-chevron);
1540 background-position: center right 0.75rem;
1541 background-size: 1rem auto;
1542 background-repeat: no-repeat;
1543}
1544select[multiple] option:checked {
1545 background: var(--pico-form-element-selected-background-color);
1546 color: var(--pico-form-element-color);
1547}
1548
1549[dir=rtl] select:not([multiple], [size]) {
1550 background-position: center left 0.75rem;
1551}
1552
1553textarea {
1554 display: block;
1555 resize: vertical;
1556}
1557textarea[aria-invalid] {
1558 --pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
1559 background-position: top right 0.75rem !important;
1560 background-size: 1rem var(--pico-icon-height) !important;
1561}
1562
1563:where(input, select, textarea, fieldset, .grid) + small {
1564 display: block;
1565 width: 100%;
1566 margin-top: calc(var(--pico-spacing) * -0.75);
1567 margin-bottom: var(--pico-spacing);
1568 color: var(--pico-muted-color);
1569}
1570:where(input, select, textarea, fieldset, .grid)[aria-invalid=false] + small {
1571 color: var(--pico-ins-color);
1572}
1573:where(input, select, textarea, fieldset, .grid)[aria-invalid=true] + small {
1574 color: var(--pico-del-color);
1575}
1576
1577label > :where(input, select, textarea) {
1578 margin-top: calc(var(--pico-spacing) * 0.25);
1579}
1580
1581/**
1582 * Checkboxes, Radios and Switches
1583 */
1584label:has([type=checkbox], [type=radio]) {
1585 width: -moz-fit-content;
1586 width: fit-content;
1587 cursor: pointer;
1588}
1589
1590[type=checkbox],
1591[type=radio] {
1592 -webkit-appearance: none;
1593 -moz-appearance: none;
1594 appearance: none;
1595 width: 1.25em;
1596 height: 1.25em;
1597 margin-top: -0.125em;
1598 margin-inline-end: 0.5em;
1599 border-width: var(--pico-border-width);
1600 vertical-align: middle;
1601 cursor: pointer;
1602}
1603[type=checkbox]::-ms-check,
1604[type=radio]::-ms-check {
1605 display: none;
1606}
1607[type=checkbox]:checked, [type=checkbox]:checked:active, [type=checkbox]:checked:focus,
1608[type=radio]:checked,
1609[type=radio]:checked:active,
1610[type=radio]:checked:focus {
1611 --pico-background-color: var(--pico-primary-background);
1612 --pico-border-color: var(--pico-primary-border);
1613 background-image: var(--pico-icon-checkbox);
1614 background-position: center;
1615 background-size: 0.75em auto;
1616 background-repeat: no-repeat;
1617}
1618[type=checkbox] ~ label,
1619[type=radio] ~ label {
1620 display: inline-block;
1621 margin-bottom: 0;
1622 cursor: pointer;
1623}
1624[type=checkbox] ~ label:not(:last-of-type),
1625[type=radio] ~ label:not(:last-of-type) {
1626 margin-inline-end: 1em;
1627}
1628
1629[type=checkbox]:indeterminate {
1630 --pico-background-color: var(--pico-primary-background);
1631 --pico-border-color: var(--pico-primary-border);
1632 background-image: var(--pico-icon-minus);
1633 background-position: center;
1634 background-size: 0.75em auto;
1635 background-repeat: no-repeat;
1636}
1637
1638[type=radio] {
1639 border-radius: 50%;
1640}
1641[type=radio]:checked, [type=radio]:checked:active, [type=radio]:checked:focus {
1642 --pico-background-color: var(--pico-primary-inverse);
1643 border-width: 0.35em;
1644 background-image: none;
1645}
1646
1647[type=checkbox][role=switch] {
1648 --pico-background-color: var(--pico-switch-background-color);
1649 --pico-color: var(--pico-switch-color);
1650 width: 2.25em;
1651 height: 1.25em;
1652 border: var(--pico-border-width) solid var(--pico-border-color);
1653 border-radius: 1.25em;
1654 background-color: var(--pico-background-color);
1655 line-height: 1.25em;
1656}
1657[type=checkbox][role=switch]:not([aria-invalid]) {
1658 --pico-border-color: var(--pico-switch-background-color);
1659}
1660[type=checkbox][role=switch]:before {
1661 display: block;
1662 aspect-ratio: 1;
1663 height: 100%;
1664 border-radius: 50%;
1665 background-color: var(--pico-color);
1666 box-shadow: var(--pico-switch-thumb-box-shadow);
1667 content: "";
1668 transition: margin 0.1s ease-in-out;
1669}
1670[type=checkbox][role=switch]:focus {
1671 --pico-background-color: var(--pico-switch-background-color);
1672 --pico-border-color: var(--pico-switch-background-color);
1673}
1674[type=checkbox][role=switch]:checked {
1675 --pico-background-color: var(--pico-switch-checked-background-color);
1676 --pico-border-color: var(--pico-switch-checked-background-color);
1677 background-image: none;
1678}
1679[type=checkbox][role=switch]:checked::before {
1680 margin-inline-start: calc(2.25em - 1.25em);
1681}
1682[type=checkbox][role=switch][disabled] {
1683 --pico-background-color: var(--pico-border-color);
1684}
1685
1686[type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus,
1687[type=checkbox][role=switch][aria-invalid=false]:checked,
1688[type=checkbox][role=switch][aria-invalid=false]:checked:active,
1689[type=checkbox][role=switch][aria-invalid=false]:checked:focus {
1690 --pico-background-color: var(--pico-form-element-valid-border-color);
1691}
1692[type=checkbox]:checked[aria-invalid=true], [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true],
1693[type=checkbox][role=switch]:checked[aria-invalid=true],
1694[type=checkbox][role=switch]:checked:active[aria-invalid=true],
1695[type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
1696 --pico-background-color: var(--pico-form-element-invalid-border-color);
1697}
1698
1699[type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus,
1700[type=radio][aria-invalid=false]:checked,
1701[type=radio][aria-invalid=false]:checked:active,
1702[type=radio][aria-invalid=false]:checked:focus,
1703[type=checkbox][role=switch][aria-invalid=false]:checked,
1704[type=checkbox][role=switch][aria-invalid=false]:checked:active,
1705[type=checkbox][role=switch][aria-invalid=false]:checked:focus {
1706 --pico-border-color: var(--pico-form-element-valid-border-color);
1707}
1708[type=checkbox]:checked[aria-invalid=true], [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true],
1709[type=radio]:checked[aria-invalid=true],
1710[type=radio]:checked:active[aria-invalid=true],
1711[type=radio]:checked:focus[aria-invalid=true],
1712[type=checkbox][role=switch]:checked[aria-invalid=true],
1713[type=checkbox][role=switch]:checked:active[aria-invalid=true],
1714[type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
1715 --pico-border-color: var(--pico-form-element-invalid-border-color);
1716}
1717
1718/**
1719 * Input type color
1720 */
1721[type=color]::-webkit-color-swatch-wrapper {
1722 padding: 0;
1723}
1724[type=color]::-moz-focus-inner {
1725 padding: 0;
1726}
1727[type=color]::-webkit-color-swatch {
1728 border: 0;
1729 border-radius: calc(var(--pico-border-radius) * 0.5);
1730}
1731[type=color]::-moz-color-swatch {
1732 border: 0;
1733 border-radius: calc(var(--pico-border-radius) * 0.5);
1734}
1735
1736/**
1737 * Input type datetime
1738 */
1739input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
1740 --pico-icon-position: 0.75rem;
1741 --pico-icon-width: 1rem;
1742 padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position));
1743 background-image: var(--pico-icon-date);
1744 background-position: center right var(--pico-icon-position);
1745 background-size: var(--pico-icon-width) auto;
1746 background-repeat: no-repeat;
1747}
1748input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
1749 background-image: var(--pico-icon-time);
1750}
1751
1752[type=date]::-webkit-calendar-picker-indicator,
1753[type=datetime-local]::-webkit-calendar-picker-indicator,
1754[type=month]::-webkit-calendar-picker-indicator,
1755[type=time]::-webkit-calendar-picker-indicator,
1756[type=week]::-webkit-calendar-picker-indicator {
1757 width: var(--pico-icon-width);
1758 margin-right: calc(var(--pico-icon-width) * -1);
1759 margin-left: var(--pico-icon-position);
1760 opacity: 0;
1761}
1762
1763@-moz-document url-prefix() {
1764 [type=date],
1765 [type=datetime-local],
1766 [type=month],
1767 [type=time],
1768 [type=week] {
1769 padding-right: var(--pico-form-element-spacing-horizontal) !important;
1770 background-image: none !important;
1771 }
1772}
1773[dir=rtl] :is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
1774 text-align: right;
1775}
1776
1777/**
1778 * Input type file
1779 */
1780[type=file] {
1781 --pico-color: var(--pico-muted-color);
1782 margin-left: calc(var(--pico-outline-width) * -1);
1783 padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
1784 padding-left: var(--pico-outline-width);
1785 border: 0;
1786 border-radius: 0;
1787 background: none;
1788}
1789[type=file]::file-selector-button {
1790 margin-right: calc(var(--pico-spacing) / 2);
1791 padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
1792}
1793[type=file]:is(:hover, :active, :focus)::file-selector-button {
1794 --pico-background-color: var(--pico-secondary-hover-background);
1795 --pico-border-color: var(--pico-secondary-hover-border);
1796}
1797[type=file]:focus::file-selector-button {
1798 --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
1799}
1800
1801/**
1802 * Input type range
1803 */
1804[type=range] {
1805 -webkit-appearance: none;
1806 -moz-appearance: none;
1807 appearance: none;
1808 width: 100%;
1809 height: 1.25rem;
1810 background: none;
1811}
1812[type=range]::-webkit-slider-runnable-track {
1813 width: 100%;
1814 height: 0.375rem;
1815 border-radius: var(--pico-border-radius);
1816 background-color: var(--pico-range-border-color);
1817 -webkit-transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
1818 transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
1819}
1820[type=range]::-moz-range-track {
1821 width: 100%;
1822 height: 0.375rem;
1823 border-radius: var(--pico-border-radius);
1824 background-color: var(--pico-range-border-color);
1825 -moz-transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
1826 transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
1827}
1828[type=range]::-ms-track {
1829 width: 100%;
1830 height: 0.375rem;
1831 border-radius: var(--pico-border-radius);
1832 background-color: var(--pico-range-border-color);
1833 -ms-transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
1834 transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
1835}
1836[type=range]::-webkit-slider-thumb {
1837 -webkit-appearance: none;
1838 width: 1.25rem;
1839 height: 1.25rem;
1840 margin-top: -0.4375rem;
1841 border: 2px solid var(--pico-range-thumb-border-color);
1842 border-radius: 50%;
1843 background-color: var(--pico-range-thumb-color);
1844 cursor: pointer;
1845 -webkit-transition: background-color var(--pico-transition), transform var(--pico-transition);
1846 transition: background-color var(--pico-transition), transform var(--pico-transition);
1847}
1848[type=range]::-moz-range-thumb {
1849 -webkit-appearance: none;
1850 width: 1.25rem;
1851 height: 1.25rem;
1852 margin-top: -0.4375rem;
1853 border: 2px solid var(--pico-range-thumb-border-color);
1854 border-radius: 50%;
1855 background-color: var(--pico-range-thumb-color);
1856 cursor: pointer;
1857 -moz-transition: background-color var(--pico-transition), transform var(--pico-transition);
1858 transition: background-color var(--pico-transition), transform var(--pico-transition);
1859}
1860[type=range]::-ms-thumb {
1861 -webkit-appearance: none;
1862 width: 1.25rem;
1863 height: 1.25rem;
1864 margin-top: -0.4375rem;
1865 border: 2px solid var(--pico-range-thumb-border-color);
1866 border-radius: 50%;
1867 background-color: var(--pico-range-thumb-color);
1868 cursor: pointer;
1869 -ms-transition: background-color var(--pico-transition), transform var(--pico-transition);
1870 transition: background-color var(--pico-transition), transform var(--pico-transition);
1871}
1872[type=range]:active, [type=range]:focus-within {
1873 --pico-range-border-color: var(--pico-range-active-border-color);
1874 --pico-range-thumb-color: var(--pico-range-thumb-active-color);
1875}
1876[type=range]:active::-webkit-slider-thumb {
1877 transform: scale(1.25);
1878}
1879[type=range]:active::-moz-range-thumb {
1880 transform: scale(1.25);
1881}
1882[type=range]:active::-ms-thumb {
1883 transform: scale(1.25);
1884}
1885
1886/**
1887 * Input type search
1888 */
1889input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
1890 padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
1891 background-image: var(--pico-icon-search);
1892 background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem);
1893 background-size: 1rem auto;
1894 background-repeat: no-repeat;
1895}
1896input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
1897 padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important;
1898 background-position: center left 1.125rem, center right 0.75rem;
1899}
1900input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=false] {
1901 background-image: var(--pico-icon-search), var(--pico-icon-valid);
1902}
1903input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=true] {
1904 background-image: var(--pico-icon-search), var(--pico-icon-invalid);
1905}
1906
1907[dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
1908 background-position: center right 1.125rem;
1909}
1910[dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {
1911 background-position: center right 1.125rem, center left 0.75rem;
1912}
1913
1914/**
1915 * Accordion (<details>)
1916 */
1917details {
1918 display: block;
1919 margin-bottom: var(--pico-spacing);
1920}
1921details summary {
1922 line-height: 1rem;
1923 list-style-type: none;
1924 cursor: pointer;
1925 transition: color var(--pico-transition);
1926}
1927details summary:not([role]) {
1928 color: var(--pico-accordion-close-summary-color);
1929}
1930details summary::-webkit-details-marker {
1931 display: none;
1932}
1933details summary::marker {
1934 display: none;
1935}
1936details summary::-moz-list-bullet {
1937 list-style-type: none;
1938}
1939details summary::after {
1940 display: block;
1941 width: 1rem;
1942 height: 1rem;
1943 margin-inline-start: calc(var(--pico-spacing, 1rem) * 0.5);
1944 float: right;
1945 transform: rotate(-90deg);
1946 background-image: var(--pico-icon-chevron);
1947 background-position: right center;
1948 background-size: 1rem auto;
1949 background-repeat: no-repeat;
1950 content: "";
1951 transition: transform var(--pico-transition);
1952}
1953details summary:focus {
1954 outline: none;
1955}
1956details summary:focus:not([role]) {
1957 color: var(--pico-accordion-active-summary-color);
1958}
1959details summary:focus-visible:not([role]) {
1960 outline: var(--pico-outline-width) solid var(--pico-primary-focus);
1961 outline-offset: calc(var(--pico-spacing, 1rem) * 0.5);
1962 color: var(--pico-primary);
1963}
1964details summary[role=button] {
1965 width: 100%;
1966 text-align: left;
1967}
1968details summary[role=button]::after {
1969 height: calc(1rem * var(--pico-line-height, 1.5));
1970}
1971details[open] > summary {
1972 margin-bottom: var(--pico-spacing);
1973}
1974details[open] > summary:not([role]):not(:focus) {
1975 color: var(--pico-accordion-open-summary-color);
1976}
1977details[open] > summary::after {
1978 transform: rotate(0);
1979}
1980
1981[dir=rtl] details summary {
1982 text-align: right;
1983}
1984[dir=rtl] details summary::after {
1985 float: left;
1986 background-position: left center;
1987}
1988
1989/**
1990 * Card (<article>)
1991 */
1992article {
1993 margin-bottom: var(--pico-block-spacing-vertical);
1994 padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
1995 border-radius: var(--pico-border-radius);
1996 background: var(--pico-card-background-color);
1997 box-shadow: var(--pico-card-box-shadow);
1998}
1999article > header,
2000article > footer {
2001 margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
2002 margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
2003 padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
2004 background-color: var(--pico-card-sectioning-background-color);
2005}
2006article > header {
2007 margin-top: calc(var(--pico-block-spacing-vertical) * -1);
2008 margin-bottom: var(--pico-block-spacing-vertical);
2009 border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
2010 border-top-right-radius: var(--pico-border-radius);
2011 border-top-left-radius: var(--pico-border-radius);
2012}
2013article > footer {
2014 margin-top: var(--pico-block-spacing-vertical);
2015 margin-bottom: calc(var(--pico-block-spacing-vertical) * -1);
2016 border-top: var(--pico-border-width) solid var(--pico-card-border-color);
2017 border-bottom-right-radius: var(--pico-border-radius);
2018 border-bottom-left-radius: var(--pico-border-radius);
2019}
2020
2021/**
2022 * Dropdown (details.dropdown)
2023 */
2024details.dropdown {
2025 position: relative;
2026 border-bottom: none;
2027}
2028details.dropdown > summary::after,
2029details.dropdown > button::after,
2030details.dropdown > a::after {
2031 display: block;
2032 width: 1rem;
2033 height: calc(1rem * var(--pico-line-height, 1.5));
2034 margin-inline-start: 0.25rem;
2035 float: right;
2036 transform: rotate(0deg) translateX(0.2rem);
2037 background-image: var(--pico-icon-chevron);
2038 background-position: right center;
2039 background-size: 1rem auto;
2040 background-repeat: no-repeat;
2041 content: "";
2042}
2043
2044nav details.dropdown {
2045 margin-bottom: 0;
2046}
2047
2048details.dropdown > summary:not([role]) {
2049 height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
2050 padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
2051 border: var(--pico-border-width) solid var(--pico-form-element-border-color);
2052 border-radius: var(--pico-border-radius);
2053 background-color: var(--pico-form-element-background-color);
2054 color: var(--pico-form-element-placeholder-color);
2055 line-height: inherit;
2056 cursor: pointer;
2057 -webkit-user-select: none;
2058 -moz-user-select: none;
2059 user-select: none;
2060 transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
2061}
2062details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
2063 border-color: var(--pico-form-element-active-border-color);
2064 background-color: var(--pico-form-element-active-background-color);
2065}
2066details.dropdown > summary:not([role]):focus {
2067 box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
2068}
2069details.dropdown > summary:not([role]):focus-visible {
2070 outline: none;
2071}
2072details.dropdown > summary:not([role])[aria-invalid=false] {
2073 --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
2074 --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
2075 --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
2076}
2077details.dropdown > summary:not([role])[aria-invalid=true] {
2078 --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
2079 --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
2080 --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
2081}
2082
2083nav details.dropdown {
2084 display: inline;
2085 margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
2086}
2087nav details.dropdown > summary::after {
2088 transform: rotate(0deg) translateX(0rem);
2089}
2090nav details.dropdown > summary:not([role]) {
2091 height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
2092 padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
2093}
2094nav details.dropdown > summary:not([role]):focus-visible {
2095 box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
2096}
2097
2098details.dropdown > summary + ul {
2099 display: flex;
2100 z-index: 99;
2101 position: absolute;
2102 left: 0;
2103 flex-direction: column;
2104 width: 100%;
2105 min-width: -moz-fit-content;
2106 min-width: fit-content;
2107 margin: 0;
2108 margin-top: var(--pico-outline-width);
2109 padding: 0;
2110 border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
2111 border-radius: var(--pico-border-radius);
2112 background-color: var(--pico-dropdown-background-color);
2113 box-shadow: var(--pico-dropdown-box-shadow);
2114 color: var(--pico-dropdown-color);
2115 white-space: nowrap;
2116 opacity: 0;
2117 transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
2118}
2119details.dropdown > summary + ul[dir=rtl] {
2120 right: 0;
2121 left: auto;
2122}
2123details.dropdown > summary + ul li {
2124 width: 100%;
2125 margin-bottom: 0;
2126 padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
2127 list-style: none;
2128}
2129details.dropdown > summary + ul li:first-of-type {
2130 margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
2131}
2132details.dropdown > summary + ul li:last-of-type {
2133 margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
2134}
2135details.dropdown > summary + ul li a {
2136 display: block;
2137 margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
2138 padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
2139 overflow: hidden;
2140 border-radius: 0;
2141 color: var(--pico-dropdown-color);
2142 text-decoration: none;
2143 text-overflow: ellipsis;
2144}
2145details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current=false]) {
2146 background-color: var(--pico-dropdown-hover-background-color);
2147}
2148details.dropdown > summary + ul li label {
2149 width: 100%;
2150}
2151details.dropdown > summary + ul li:has(label):hover {
2152 background-color: var(--pico-dropdown-hover-background-color);
2153}
2154
2155details.dropdown[open] > summary {
2156 margin-bottom: 0;
2157}
2158
2159details.dropdown[open] > summary + ul {
2160 transform: scaleY(1);
2161 opacity: 1;
2162 transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
2163}
2164
2165details.dropdown[open] > summary::before {
2166 display: block;
2167 z-index: 1;
2168 position: fixed;
2169 width: 100vw;
2170 height: 100vh;
2171 inset: 0;
2172 background: none;
2173 content: "";
2174 cursor: default;
2175}
2176
2177label > details.dropdown {
2178 margin-top: calc(var(--pico-spacing) * 0.25);
2179}
2180
2181/**
2182 * Group ([role="group"], [role="search"])
2183 */
2184[role=search],
2185[role=group] {
2186 display: inline-flex;
2187 position: relative;
2188 width: 100%;
2189 margin-bottom: var(--pico-spacing);
2190 border-radius: var(--pico-border-radius);
2191 box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
2192 vertical-align: middle;
2193 transition: box-shadow var(--pico-transition);
2194}
2195[role=search] > *,
2196[role=search] input:not([type=checkbox], [type=radio]),
2197[role=search] select,
2198[role=group] > *,
2199[role=group] input:not([type=checkbox], [type=radio]),
2200[role=group] select {
2201 position: relative;
2202 flex: 1 1 auto;
2203 margin-bottom: 0;
2204}
2205[role=search] > *:not(:first-child),
2206[role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
2207[role=search] select:not(:first-child),
2208[role=group] > *:not(:first-child),
2209[role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
2210[role=group] select:not(:first-child) {
2211 margin-left: 0;
2212 border-top-left-radius: 0;
2213 border-bottom-left-radius: 0;
2214}
2215[role=search] > *:not(:last-child),
2216[role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
2217[role=search] select:not(:last-child),
2218[role=group] > *:not(:last-child),
2219[role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
2220[role=group] select:not(:last-child) {
2221 border-top-right-radius: 0;
2222 border-bottom-right-radius: 0;
2223}
2224[role=search] > *:focus,
2225[role=search] input:not([type=checkbox], [type=radio]):focus,
2226[role=search] select:focus,
2227[role=group] > *:focus,
2228[role=group] input:not([type=checkbox], [type=radio]):focus,
2229[role=group] select:focus {
2230 z-index: 2;
2231}
2232[role=search] button:not(:first-child),
2233[role=search] [type=submit]:not(:first-child),
2234[role=search] [type=reset]:not(:first-child),
2235[role=search] [type=button]:not(:first-child),
2236[role=search] [role=button]:not(:first-child),
2237[role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
2238[role=search] select:not(:first-child),
2239[role=group] button:not(:first-child),
2240[role=group] [type=submit]:not(:first-child),
2241[role=group] [type=reset]:not(:first-child),
2242[role=group] [type=button]:not(:first-child),
2243[role=group] [role=button]:not(:first-child),
2244[role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
2245[role=group] select:not(:first-child) {
2246 margin-left: calc(var(--pico-border-width) * -1);
2247}
2248[role=search] button,
2249[role=search] [type=submit],
2250[role=search] [type=reset],
2251[role=search] [type=button],
2252[role=search] [role=button],
2253[role=group] button,
2254[role=group] [type=submit],
2255[role=group] [type=reset],
2256[role=group] [type=button],
2257[role=group] [role=button] {
2258 width: auto;
2259}
2260@supports selector(:has(*)) {
2261 [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus),
2262 [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) {
2263 --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button);
2264 }
2265 [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
2266 [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
2267 [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
2268 [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select {
2269 border-color: transparent;
2270 }
2271 [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
2272 [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) {
2273 --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input);
2274 }
2275 [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
2276 [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
2277 [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
2278 [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
2279 [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
2280 [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
2281 [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
2282 [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button] {
2283 --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border);
2284 --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border);
2285 }
2286 [role=search] button:focus,
2287 [role=search] [type=submit]:focus,
2288 [role=search] [type=reset]:focus,
2289 [role=search] [type=button]:focus,
2290 [role=search] [role=button]:focus,
2291 [role=group] button:focus,
2292 [role=group] [type=submit]:focus,
2293 [role=group] [type=reset]:focus,
2294 [role=group] [type=button]:focus,
2295 [role=group] [role=button]:focus {
2296 box-shadow: none;
2297 }
2298}
2299
2300[role=search] > *:first-child {
2301 border-top-left-radius: 5rem;
2302 border-bottom-left-radius: 5rem;
2303}
2304[role=search] > *:last-child {
2305 border-top-right-radius: 5rem;
2306 border-bottom-right-radius: 5rem;
2307}
2308
2309/**
2310 * Loading ([aria-busy=true])
2311 */
2312[aria-busy=true]:not(input, select, textarea, html, form) {
2313 white-space: nowrap;
2314}
2315[aria-busy=true]:not(input, select, textarea, html, form)::before {
2316 display: inline-block;
2317 width: 1em;
2318 height: 1em;
2319 background-image: var(--pico-icon-loading);
2320 background-size: 1em auto;
2321 background-repeat: no-repeat;
2322 content: "";
2323 vertical-align: -0.125em;
2324}
2325[aria-busy=true]:not(input, select, textarea, html, form):not(:empty)::before {
2326 margin-inline-end: calc(var(--pico-spacing) * 0.5);
2327}
2328[aria-busy=true]:not(input, select, textarea, html, form):empty {
2329 text-align: center;
2330}
2331
2332button[aria-busy=true],
2333[type=submit][aria-busy=true],
2334[type=button][aria-busy=true],
2335[type=reset][aria-busy=true],
2336[role=button][aria-busy=true],
2337a[aria-busy=true] {
2338 pointer-events: none;
2339}
2340
2341/**
2342 * Modal (<dialog>)
2343 */
2344:root,
2345:host {
2346 --pico-scrollbar-width: 0px;
2347}
2348
2349dialog {
2350 display: flex;
2351 z-index: 999;
2352 position: fixed;
2353 top: 0;
2354 right: 0;
2355 bottom: 0;
2356 left: 0;
2357 align-items: center;
2358 justify-content: center;
2359 width: inherit;
2360 min-width: 100%;
2361 height: inherit;
2362 min-height: 100%;
2363 padding: 0;
2364 border: 0;
2365 -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2366 backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2367 background-color: var(--pico-modal-overlay-background-color);
2368 color: var(--pico-color);
2369}
2370dialog > article {
2371 width: 100%;
2372 max-height: calc(100vh - var(--pico-spacing) * 2);
2373 margin: var(--pico-spacing);
2374 overflow: auto;
2375}
2376@media (min-width: 576px) {
2377 dialog > article {
2378 max-width: 510px;
2379 }
2380}
2381@media (min-width: 768px) {
2382 dialog > article {
2383 max-width: 700px;
2384 }
2385}
2386dialog > article > header > * {
2387 margin-bottom: 0;
2388}
2389dialog > article > header .close, dialog > article > header :is(a, button)[rel=prev] {
2390 margin: 0;
2391 margin-left: var(--pico-spacing);
2392 padding: 0;
2393 float: right;
2394}
2395dialog > article > footer {
2396 text-align: right;
2397}
2398dialog > article > footer button,
2399dialog > article > footer [role=button] {
2400 margin-bottom: 0;
2401}
2402dialog > article > footer button:not(:first-of-type),
2403dialog > article > footer [role=button]:not(:first-of-type) {
2404 margin-left: calc(var(--pico-spacing) * 0.5);
2405}
2406dialog > article .close, dialog > article :is(a, button)[rel=prev] {
2407 display: block;
2408 width: 1rem;
2409 height: 1rem;
2410 margin-top: calc(var(--pico-spacing) * -1);
2411 margin-bottom: var(--pico-spacing);
2412 margin-left: auto;
2413 border: none;
2414 background-image: var(--pico-icon-close);
2415 background-position: center;
2416 background-size: auto 1rem;
2417 background-repeat: no-repeat;
2418 background-color: transparent;
2419 opacity: 0.5;
2420 transition: opacity var(--pico-transition);
2421}
2422dialog > article .close:is([aria-current]:not([aria-current=false]), :hover, :active, :focus), dialog > article :is(a, button)[rel=prev]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
2423 opacity: 1;
2424}
2425dialog:not([open]), dialog[open=false] {
2426 display: none;
2427}
2428
2429.modal-is-open {
2430 padding-right: var(--pico-scrollbar-width, 0px);
2431 overflow: hidden;
2432 pointer-events: none;
2433 touch-action: none;
2434}
2435.modal-is-open dialog {
2436 pointer-events: auto;
2437 touch-action: auto;
2438}
2439
2440:where(.modal-is-opening, .modal-is-closing) dialog,
2441:where(.modal-is-opening, .modal-is-closing) dialog > article {
2442 animation-duration: 0.2s;
2443 animation-timing-function: ease-in-out;
2444 animation-fill-mode: both;
2445}
2446:where(.modal-is-opening, .modal-is-closing) dialog {
2447 animation-duration: 0.8s;
2448 animation-name: modal-overlay;
2449}
2450:where(.modal-is-opening, .modal-is-closing) dialog > article {
2451 animation-delay: 0.2s;
2452 animation-name: modal;
2453}
2454
2455.modal-is-closing dialog,
2456.modal-is-closing dialog > article {
2457 animation-delay: 0s;
2458 animation-direction: reverse;
2459}
2460
2461@keyframes modal-overlay {
2462 from {
2463 -webkit-backdrop-filter: none;
2464 backdrop-filter: none;
2465 background-color: transparent;
2466 }
2467}
2468@keyframes modal {
2469 from {
2470 transform: translateY(-100%);
2471 opacity: 0;
2472 }
2473}
2474/**
2475 * Nav
2476 */
2477:where(nav li)::before {
2478 float: left;
2479 content: "";
2480}
2481
2482nav,
2483nav ul {
2484 display: flex;
2485}
2486
2487nav {
2488 justify-content: space-between;
2489 overflow: visible;
2490}
2491nav ol,
2492nav ul {
2493 align-items: center;
2494 margin-bottom: 0;
2495 padding: 0;
2496 list-style: none;
2497}
2498nav ol:first-of-type,
2499nav ul:first-of-type {
2500 margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
2501}
2502nav ol:last-of-type,
2503nav ul:last-of-type {
2504 margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1);
2505}
2506nav li {
2507 display: inline-block;
2508 margin: 0;
2509 padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal);
2510}
2511nav li :where(a, [role=link]) {
2512 display: inline-block;
2513 margin: calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1);
2514 padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);
2515 border-radius: var(--pico-border-radius);
2516}
2517nav li :where(a, [role=link]):not(:hover) {
2518 text-decoration: none;
2519}
2520nav li button,
2521nav li [role=button],
2522nav li [type=button],
2523nav li input:not([type=checkbox], [type=radio], [type=range], [type=file]),
2524nav li select {
2525 height: auto;
2526 margin-right: inherit;
2527 margin-bottom: 0;
2528 margin-left: inherit;
2529 padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
2530}
2531nav[aria-label=breadcrumb] {
2532 align-items: center;
2533 justify-content: start;
2534}
2535nav[aria-label=breadcrumb] ul li:not(:first-child) {
2536 margin-inline-start: var(--pico-nav-link-spacing-horizontal);
2537}
2538nav[aria-label=breadcrumb] ul li a {
2539 margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 0;
2540 margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) * -1);
2541}
2542nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
2543 display: inline-block;
2544 position: absolute;
2545 width: calc(var(--pico-nav-link-spacing-horizontal) * 4);
2546 margin: 0 calc(var(--pico-nav-link-spacing-horizontal) * -1);
2547 content: var(--pico-nav-breadcrumb-divider);
2548 color: var(--pico-muted-color);
2549 text-align: center;
2550 text-decoration: none;
2551 white-space: nowrap;
2552}
2553nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]) {
2554 background-color: transparent;
2555 color: inherit;
2556 text-decoration: none;
2557 pointer-events: none;
2558}
2559
2560aside nav,
2561aside ol,
2562aside ul,
2563aside li {
2564 display: block;
2565}
2566aside li {
2567 padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) var(--pico-nav-element-spacing-horizontal);
2568}
2569aside li a {
2570 display: block;
2571}
2572aside li [role=button] {
2573 margin: inherit;
2574}
2575
2576[dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {
2577 content: "\\";
2578}
2579
2580/**
2581 * Progress
2582 */
2583progress {
2584 display: inline-block;
2585 vertical-align: baseline;
2586}
2587
2588progress {
2589 -webkit-appearance: none;
2590 -moz-appearance: none;
2591 display: inline-block;
2592 appearance: none;
2593 width: 100%;
2594 height: 0.5rem;
2595 margin-bottom: calc(var(--pico-spacing) * 0.5);
2596 overflow: hidden;
2597 border: 0;
2598 border-radius: var(--pico-border-radius);
2599 background-color: var(--pico-progress-background-color);
2600 color: var(--pico-progress-color);
2601}
2602progress::-webkit-progress-bar {
2603 border-radius: var(--pico-border-radius);
2604 background: none;
2605}
2606progress[value]::-webkit-progress-value {
2607 background-color: var(--pico-progress-color);
2608 -webkit-transition: inline-size var(--pico-transition);
2609 transition: inline-size var(--pico-transition);
2610}
2611progress::-moz-progress-bar {
2612 background-color: var(--pico-progress-color);
2613}
2614@media (prefers-reduced-motion: no-preference) {
2615 progress:indeterminate {
2616 background: var(--pico-progress-background-color) linear-gradient(to right, var(--pico-progress-color) 30%, var(--pico-progress-background-color) 30%) top left/150% 150% no-repeat;
2617 animation: progress-indeterminate 1s linear infinite;
2618 }
2619 progress:indeterminate[value]::-webkit-progress-value {
2620 background-color: transparent;
2621 }
2622 progress:indeterminate::-moz-progress-bar {
2623 background-color: transparent;
2624 }
2625}
2626
2627@media (prefers-reduced-motion: no-preference) {
2628 [dir=rtl] progress:indeterminate {
2629 animation-direction: reverse;
2630 }
2631}
2632
2633@keyframes progress-indeterminate {
2634 0% {
2635 background-position: 200% 0;
2636 }
2637 100% {
2638 background-position: -200% 0;
2639 }
2640}
2641/**
2642 * Tooltip ([data-tooltip])
2643 */
2644[data-tooltip] {
2645 position: relative;
2646}
2647[data-tooltip]:not(a, button, input, [role=button]) {
2648 border-bottom: 1px dotted;
2649 text-decoration: none;
2650 cursor: help;
2651}
2652[data-tooltip][data-placement=top]::before, [data-tooltip][data-placement=top]::after, [data-tooltip]::before, [data-tooltip]::after {
2653 display: block;
2654 z-index: 99;
2655 position: absolute;
2656 bottom: 100%;
2657 left: 50%;
2658 padding: 0.25rem 0.5rem;
2659 overflow: hidden;
2660 transform: translate(-50%, -0.25rem);
2661 border-radius: var(--pico-border-radius);
2662 background: var(--pico-tooltip-background-color);
2663 content: attr(data-tooltip);
2664 color: var(--pico-tooltip-color);
2665 font-style: normal;
2666 font-weight: var(--pico-font-weight);
2667 font-size: 0.875rem;
2668 text-decoration: none;
2669 text-overflow: ellipsis;
2670 white-space: nowrap;
2671 opacity: 0;
2672 pointer-events: none;
2673}
2674[data-tooltip][data-placement=top]::after, [data-tooltip]::after {
2675 padding: 0;
2676 transform: translate(-50%, 0rem);
2677 border-top: 0.3rem solid;
2678 border-right: 0.3rem solid transparent;
2679 border-left: 0.3rem solid transparent;
2680 border-radius: 0;
2681 background-color: transparent;
2682 content: "";
2683 color: var(--pico-tooltip-background-color);
2684}
2685[data-tooltip][data-placement=bottom]::before, [data-tooltip][data-placement=bottom]::after {
2686 top: 100%;
2687 bottom: auto;
2688 transform: translate(-50%, 0.25rem);
2689}
2690[data-tooltip][data-placement=bottom]:after {
2691 transform: translate(-50%, -0.3rem);
2692 border: 0.3rem solid transparent;
2693 border-bottom: 0.3rem solid;
2694}
2695[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {
2696 top: 50%;
2697 right: 100%;
2698 bottom: auto;
2699 left: auto;
2700 transform: translate(-0.25rem, -50%);
2701}
2702[data-tooltip][data-placement=left]:after {
2703 transform: translate(0.3rem, -50%);
2704 border: 0.3rem solid transparent;
2705 border-left: 0.3rem solid;
2706}
2707[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {
2708 top: 50%;
2709 right: auto;
2710 bottom: auto;
2711 left: 100%;
2712 transform: translate(0.25rem, -50%);
2713}
2714[data-tooltip][data-placement=right]:after {
2715 transform: translate(-0.3rem, -50%);
2716 border: 0.3rem solid transparent;
2717 border-right: 0.3rem solid;
2718}
2719[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
2720 opacity: 1;
2721}
2722@media (hover: hover) and (pointer: fine) {
2723 [data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
2724 --pico-tooltip-slide-to: translate(-50%, -0.25rem);
2725 transform: translate(-50%, 0.75rem);
2726 animation-duration: 0.2s;
2727 animation-fill-mode: forwards;
2728 animation-name: tooltip-slide;
2729 opacity: 0;
2730 }
2731 [data-tooltip]:focus::after, [data-tooltip]:hover::after {
2732 --pico-tooltip-caret-slide-to: translate(-50%, 0rem);
2733 transform: translate(-50%, -0.25rem);
2734 animation-name: tooltip-caret-slide;
2735 }
2736 [data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::before, [data-tooltip][data-placement=bottom]:hover::after {
2737 --pico-tooltip-slide-to: translate(-50%, 0.25rem);
2738 transform: translate(-50%, -0.75rem);
2739 animation-name: tooltip-slide;
2740 }
2741 [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::after {
2742 --pico-tooltip-caret-slide-to: translate(-50%, -0.3rem);
2743 transform: translate(-50%, -0.5rem);
2744 animation-name: tooltip-caret-slide;
2745 }
2746 [data-tooltip][data-placement=left]:focus::before, [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::before, [data-tooltip][data-placement=left]:hover::after {
2747 --pico-tooltip-slide-to: translate(-0.25rem, -50%);
2748 transform: translate(0.75rem, -50%);
2749 animation-name: tooltip-slide;
2750 }
2751 [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::after {
2752 --pico-tooltip-caret-slide-to: translate(0.3rem, -50%);
2753 transform: translate(0.05rem, -50%);
2754 animation-name: tooltip-caret-slide;
2755 }
2756 [data-tooltip][data-placement=right]:focus::before, [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::before, [data-tooltip][data-placement=right]:hover::after {
2757 --pico-tooltip-slide-to: translate(0.25rem, -50%);
2758 transform: translate(-0.75rem, -50%);
2759 animation-name: tooltip-slide;
2760 }
2761 [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after {
2762 --pico-tooltip-caret-slide-to: translate(-0.3rem, -50%);
2763 transform: translate(-0.05rem, -50%);
2764 animation-name: tooltip-caret-slide;
2765 }
2766}
2767@keyframes tooltip-slide {
2768 to {
2769 transform: var(--pico-tooltip-slide-to);
2770 opacity: 1;
2771 }
2772}
2773@keyframes tooltip-caret-slide {
2774 50% {
2775 opacity: 0;
2776 }
2777 to {
2778 transform: var(--pico-tooltip-caret-slide-to);
2779 opacity: 1;
2780 }
2781}
2782
2783/**
2784 * Accessibility & User interaction
2785 */
2786[aria-controls] {
2787 cursor: pointer;
2788}
2789
2790[aria-disabled=true],
2791[disabled] {
2792 cursor: not-allowed;
2793}
2794
2795[aria-hidden=false][hidden] {
2796 display: initial;
2797}
2798
2799[aria-hidden=false][hidden]:not(:focus) {
2800 clip: rect(0, 0, 0, 0);
2801 position: absolute;
2802}
2803
2804a,
2805area,
2806button,
2807input,
2808label,
2809select,
2810summary,
2811textarea,
2812[tabindex] {
2813 -ms-touch-action: manipulation;
2814}
2815
2816[dir=rtl] {
2817 direction: rtl;
2818}
2819
2820/**
2821 * Reduce Motion Features
2822 */
2823@media (prefers-reduced-motion: reduce) {
2824 *:not([aria-busy=true]),
2825 :not([aria-busy=true])::before,
2826 :not([aria-busy=true])::after {
2827 background-attachment: initial !important;
2828 animation-duration: 1ms !important;
2829 animation-delay: -1ms !important;
2830 animation-iteration-count: 1 !important;
2831 scroll-behavior: auto !important;
2832 transition-delay: 0s !important;
2833 transition-duration: 0s !important;
2834 }
2835}