@anyblades/blades 3.0.0 → 3.1.0-alpha.1

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