@anyblades/blades 2.4.9 → 3.0.0-alpha.2

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