@anyblades/blades 2.4.8 → 3.0.0-alpha.1

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