@anyblades/blades 3.1.0-beta.7 → 3.1.0

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 (74) hide show
  1. package/README.md +173 -140
  2. package/css/blades.css +6 -6
  3. package/css/blades.min.css +6 -6
  4. package/css/blades.ninja.css +6 -6
  5. package/css/blades.ninja.min.css +6 -6
  6. package/css/float-label.css +1 -1
  7. package/css/float-label.min.css +1 -1
  8. package/css/layered/README.md +164 -0
  9. package/css/layered/_compact.css +30 -0
  10. package/css/layered/_utilities.css +23 -0
  11. package/css/layered/_variables-blades.css +8 -0
  12. package/css/layered/_variables.css +258 -0
  13. package/css/layered/blades.layered.css +6 -6
  14. package/css/layered/blades.layered.min.css +6 -6
  15. package/css/layered/components/_accordion.css +93 -0
  16. package/css/layered/components/_card.css +37 -0
  17. package/css/layered/components/_dropdown-popover.css +89 -0
  18. package/css/layered/components/_dropdown.css +188 -0
  19. package/css/layered/components/_group.css +89 -0
  20. package/css/layered/components/_index.css +950 -0
  21. package/css/layered/components/_loading.css +51 -0
  22. package/css/layered/components/_modal-modern.css +17 -0
  23. package/css/layered/components/_modal.css +144 -0
  24. package/css/layered/components/_nav.css +114 -0
  25. package/css/layered/components/_progress.css +68 -0
  26. package/css/layered/components/_timeline.css +7 -0
  27. package/css/layered/components/_tooltip.css +158 -0
  28. package/css/layered/content/_button.css +125 -0
  29. package/css/layered/content/_code-block.css +17 -0
  30. package/css/layered/content/_code.css +46 -0
  31. package/css/layered/content/_embedded-content.css +33 -0
  32. package/css/layered/content/_figure.css +10 -0
  33. package/css/layered/content/_icon.css +30 -0
  34. package/css/layered/content/_index.css +456 -0
  35. package/css/layered/content/_link.css +59 -0
  36. package/css/layered/content/_misc.css +15 -0
  37. package/css/layered/content/_table.css +24 -0
  38. package/css/layered/content/_typography.css +137 -0
  39. package/css/layered/forms/_basics.css +257 -0
  40. package/css/layered/forms/_checkbox-radio-switch.css +132 -0
  41. package/css/layered/forms/_index.css +617 -0
  42. package/css/layered/forms/_input-color.css +17 -0
  43. package/css/layered/forms/_input-datetime.css +37 -0
  44. package/css/layered/forms/_input-file.css +25 -0
  45. package/css/layered/forms/_input-range.css +111 -0
  46. package/css/layered/forms/_input-search.css +32 -0
  47. package/css/layered/forms/float-label/_core.css +28 -0
  48. package/css/layered/forms/float-label/_index.css +54 -0
  49. package/css/layered/forms/float-label/_theme.css +25 -0
  50. package/css/layered/forms/float-label/core.css +1 -1
  51. package/css/layered/forms/float-label.css +1 -1
  52. package/css/layered/layout/_columns.css +7 -0
  53. package/css/layered/layout/_container.css +39 -0
  54. package/css/layered/layout/_document.css +37 -0
  55. package/css/layered/layout/_grid.css +17 -0
  56. package/css/layered/layout/_index.css +103 -0
  57. package/css/layered/layout/_landmarks.css +3 -0
  58. package/css/layered/layout/_overflow-auto.css +3 -0
  59. package/css/layered/layout/_section.css +3 -0
  60. package/css/pico.canonical.css +2512 -0
  61. package/css/pico.canonical.min.css +1 -0
  62. package/css/pico.canonical.unmin.css +2512 -0
  63. package/css/pico.canonical.unmin.min.css +1 -0
  64. package/css/pico.conditional.css +2 -2
  65. package/css/pico.conditional.min.css +2 -2
  66. package/css/pico.css +2 -2
  67. package/css/pico.min.css +2 -2
  68. package/css/pico.unmin.css +2365 -0
  69. package/css/pico.unmin.min.css +7 -0
  70. package/package.json +12 -9
  71. package/src/blades/_index.css +1 -1
  72. package/src/blades/forms/float-label/_core.css +1 -1
  73. package/src/blades.css +2 -2
  74. package/src/pico/_index.css +2 -2
@@ -0,0 +1,2365 @@
1
+ /*!
2
+ * Blades CSS' Pico fork 🥷✨
3
+ * Copyright 2019-2025 (https://picocss.com)
4
+ * Copyright 2026 (https://blades.dev/css/pico/)
5
+ * Licensed under MIT
6
+ */
7
+ :scope, :host {
8
+ --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
9
+ --pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--pico-font-family-emoji);
10
+ --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--pico-font-family-emoji);
11
+ --pico-font-family: var(--pico-font-family-sans-serif);
12
+ --pico-line-height: 1.5;
13
+ --pico-font-weight: 400;
14
+ --pico-font-size: 100%;
15
+ --pico-text-underline-offset: .1rem;
16
+ --pico-border-radius: .25rem;
17
+ --pico-border-width: .0625rem;
18
+ --pico-outline-width: .125rem;
19
+ --pico-transition: .2s ease-in-out;
20
+ --pico-spacing: 1rem;
21
+ --pico-typography-spacing-vertical: 1rem;
22
+ --pico-block-spacing-vertical: var(--pico-spacing);
23
+ --pico-block-spacing-horizontal: var(--pico-spacing);
24
+ --pico-grid-column-gap: var(--pico-spacing);
25
+ --pico-grid-row-gap: var(--pico-spacing);
26
+ --pico-form-element-spacing-vertical: .75rem;
27
+ --pico-form-element-spacing-horizontal: 1rem;
28
+ --pico-nav-element-spacing-vertical: 1rem;
29
+ --pico-nav-link-spacing-vertical: .5rem;
30
+ --pico-nav-link-spacing-horizontal: .5rem;
31
+ --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");
32
+ }
33
+
34
+ @media (width >= 576px) {
35
+ :scope, :host {
36
+ --pico-font-size: 106.25%;
37
+ }
38
+ }
39
+
40
+ @media (width >= 768px) {
41
+ :scope, :host {
42
+ --pico-font-size: 112.5%;
43
+ }
44
+ }
45
+
46
+ @media (width >= 1024px) {
47
+ :scope, :host {
48
+ --pico-font-size: 118.75%;
49
+ }
50
+ }
51
+
52
+ @media (width >= 1280px) {
53
+ :scope, :host {
54
+ --pico-font-size: 125%;
55
+ }
56
+ }
57
+
58
+ @media (width >= 1536px) {
59
+ :scope, :host {
60
+ --pico-font-size: 131.25%;
61
+ }
62
+ }
63
+
64
+ a, a.secondary, a.contrast {
65
+ --pico-text-decoration: underline;
66
+ }
67
+
68
+ small {
69
+ --pico-font-size: .875em;
70
+ }
71
+
72
+ h1, h2, h3, h4, h5, h6 {
73
+ --pico-font-weight: 700;
74
+ }
75
+
76
+ h1 {
77
+ --pico-font-size: 2rem;
78
+ --pico-line-height: 1.125;
79
+ --pico-typography-spacing-top: 3rem;
80
+ }
81
+
82
+ h2 {
83
+ --pico-font-size: 1.75rem;
84
+ --pico-line-height: 1.15;
85
+ --pico-typography-spacing-top: 2.625rem;
86
+ }
87
+
88
+ h3 {
89
+ --pico-font-size: 1.5rem;
90
+ --pico-line-height: 1.175;
91
+ --pico-typography-spacing-top: 2.25rem;
92
+ }
93
+
94
+ h4 {
95
+ --pico-font-size: 1.25rem;
96
+ --pico-line-height: 1.2;
97
+ --pico-typography-spacing-top: 1.874rem;
98
+ }
99
+
100
+ h5 {
101
+ --pico-font-size: 1.125rem;
102
+ --pico-line-height: 1.225;
103
+ --pico-typography-spacing-top: 1.6875rem;
104
+ }
105
+
106
+ h6 {
107
+ --pico-font-size: 1rem;
108
+ --pico-line-height: 1.25;
109
+ --pico-typography-spacing-top: 1.5rem;
110
+ }
111
+
112
+ thead th, thead td, tfoot th, tfoot td {
113
+ --pico-font-weight: 600;
114
+ --pico-border-width: .1875rem;
115
+ }
116
+
117
+ pre, code, kbd, samp {
118
+ --pico-font-family: var(--pico-font-family-monospace);
119
+ }
120
+
121
+ kbd {
122
+ --pico-font-weight: bolder;
123
+ }
124
+
125
+ input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :where(select, textarea) {
126
+ --pico-outline-width: .0625rem;
127
+ }
128
+
129
+ [type="search"] {
130
+ --pico-border-radius: 5rem;
131
+ }
132
+
133
+ [type="checkbox"], [type="radio"] {
134
+ --pico-border-width: .125rem;
135
+ }
136
+
137
+ [type="checkbox"][role="switch"] {
138
+ --pico-border-width: .1875rem;
139
+ }
140
+
141
+ details.dropdown summary:not([role="button"]) {
142
+ --pico-outline-width: .0625rem;
143
+ }
144
+
145
+ nav details.dropdown summary:focus-visible {
146
+ --pico-outline-width: .125rem;
147
+ }
148
+
149
+ [role="search"] {
150
+ --pico-border-radius: 5rem;
151
+ }
152
+
153
+ [role="search"] button, [role="search"] [type="submit"], [role="search"] [type="button"], [role="search"] [role="button"], [role="group"] button, [role="group"] [type="submit"], [role="group"] [type="button"], [role="group"] [role="button"] {
154
+ --pico-form-element-spacing-horizontal: 2rem;
155
+ }
156
+
157
+ details summary[role="button"]:not(.outline):after, [aria-busy="true"]:not(input, select, textarea):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
158
+ filter: brightness(0) invert();
159
+ }
160
+
161
+ :scope, :host, [data-theme="light"], [data-theme="dark"] {
162
+ color-scheme: light;
163
+ --pico-background-color: light-dark(#fff, #13171f);
164
+ --pico-color: light-dark(#373c44, #c2c7d0);
165
+ --pico-text-selection-color: light-dark(#029ae840, #01aaff30);
166
+ --pico-muted-color: light-dark(#646b79, #7b8495);
167
+ --pico-muted-border-color: light-dark(#e7eaf0, #202632);
168
+ --pico-primary: light-dark(#0172ad, #01aaff);
169
+ --pico-primary-background: #0172ad;
170
+ --pico-primary-border: var(--pico-primary-background);
171
+ --pico-primary-underline: light-dark(#0172ad80, #01aaff80);
172
+ --pico-primary-hover: light-dark(#015887, #79c0ff);
173
+ --pico-primary-hover-background: light-dark(#02659a, #017fc0);
174
+ --pico-primary-hover-border: var(--pico-primary-hover-background);
175
+ --pico-primary-hover-underline: var(--pico-primary-hover);
176
+ --pico-primary-focus: light-dark(#028ad4, #01aaff);
177
+ --pico-primary-inverse: #fff;
178
+ --pico-secondary: light-dark(#5d6b89, #969eaf);
179
+ --pico-secondary-background: #525f7a;
180
+ --pico-secondary-border: var(--pico-secondary-background);
181
+ --pico-secondary-underline: light-dark(#5d6b8980, #969eaf80);
182
+ --pico-secondary-hover: light-dark(#48536b, #b3b9c5);
183
+ --pico-secondary-hover-background: light-dark(#48536b, #5d6b89);
184
+ --pico-secondary-hover-border: var(--pico-secondary-hover-background);
185
+ --pico-secondary-hover-underline: var(--pico-secondary-hover);
186
+ --pico-secondary-focus: light-dark(#5d6b89, #909ebe);
187
+ --pico-secondary-inverse: #fff;
188
+ --pico-contrast: light-dark(#181c25, #dfe3eb);
189
+ --pico-contrast-background: light-dark(#181c25, #eff1f4);
190
+ --pico-contrast-border: var(--pico-contrast-background);
191
+ --pico-contrast-underline: light-dark(#181c2580, #dfe3eb80);
192
+ --pico-contrast-hover: light-dark(#000, #fff);
193
+ --pico-contrast-hover-background: light-dark(#000, #fff);
194
+ --pico-contrast-hover-border: var(--pico-contrast-hover-background);
195
+ --pico-contrast-hover-underline: light-dark(var(--pico-secondary-hover), var(--pico-contrast-hover));
196
+ --pico-contrast-focus: light-dark(#5d6b89, #cfd5e2);
197
+ --pico-contrast-inverse: light-dark(#fff, #000);
198
+ --pico-box-shadow: 0 .5rem 2.5rem light-dark(#8191b533, #07090c33);
199
+ --pico-h1-color: light-dark(#2d3138, #f0f1f3);
200
+ --pico-h2-color: light-dark(#373c44, #e0e3e7);
201
+ --pico-h3-color: light-dark(#424751, #c2c7d0);
202
+ --pico-h4-color: light-dark(#4d535e, #b3b9c5);
203
+ --pico-h5-color: light-dark(#5c6370, #a4acba);
204
+ --pico-h6-color: light-dark(#646b79, #8891a4);
205
+ --pico-mark-background-color: light-dark(#fde7c0, #014063);
206
+ --pico-mark-color: light-dark(#0f1114, #fff);
207
+ --pico-ins-color: light-dark(#1d6a54, #62af9a);
208
+ --pico-del-color: light-dark(#883935, #ce7e7b);
209
+ --pico-blockquote-border-color: var(--pico-muted-border-color);
210
+ --pico-blockquote-footer-color: var(--pico-muted-color);
211
+ --pico-button-box-shadow: 0 0 0 #0000;
212
+ --pico-button-hover-box-shadow: 0 0 0 #0000;
213
+ --pico-table-border-color: var(--pico-muted-border-color);
214
+ --pico-table-row-stripped-background-color: #6f78870a;
215
+ --pico-code-background-color: light-dark(#f3f5f7, #1a1f28);
216
+ --pico-code-color: light-dark(#646b79, #8891a4);
217
+ --pico-code-kbd-background-color: var(--pico-color);
218
+ --pico-code-kbd-color: var(--pico-background-color);
219
+ --pico-form-element-background-color: light-dark(#fbfcfc, #1c212c);
220
+ --pico-form-element-selected-background-color: light-dark(#dfe3eb, #2a3140);
221
+ --pico-form-element-border-color: light-dark(#cfd5e2, #2a3140);
222
+ --pico-form-element-color: light-dark(#23262c, #e0e3e7);
223
+ --pico-form-element-placeholder-color: light-dark(var(--pico-muted-color), #8891a4);
224
+ --pico-form-element-active-background-color: light-dark(#fff, #1a1f28);
225
+ --pico-form-element-active-border-color: var(--pico-primary-border);
226
+ --pico-form-element-focus-color: var(--pico-primary-border);
227
+ --pico-form-element-disabled-opacity: .5;
228
+ --pico-form-element-invalid-border-color: light-dark(#b86a6b, #c84f48);
229
+ --pico-form-element-invalid-active-border-color: light-dark(#c84f48, #d65c56);
230
+ --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
231
+ --pico-form-element-valid-border-color: light-dark(#4c9b8a, #2a7b6f);
232
+ --pico-form-element-valid-active-border-color: light-dark(#279977, #16896a);
233
+ --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
234
+ --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");
235
+ --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");
236
+ }
237
+
238
+ input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
239
+ --pico-form-element-focus-color: var(--pico-primary-focus);
240
+ }
241
+
242
+ @media only screen and (prefers-color-scheme: dark) {
243
+ :scope:not([data-theme]), :host(:not([data-theme])) {
244
+ color-scheme: dark;
245
+ }
246
+
247
+ :scope:not([data-theme]) details summary[role="button"].contrast:not(.outline):after, :host(:not([data-theme])) details summary[role="button"].contrast:not(.outline):after, :scope:not([data-theme]) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before, :host(:not([data-theme])) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
248
+ filter: brightness(0);
249
+ }
250
+ }
251
+
252
+ [data-theme="dark"] {
253
+ color-scheme: dark;
254
+ }
255
+
256
+ [data-theme="dark"] details summary[role="button"].contrast:not(.outline):after, [data-theme="dark"] [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
257
+ filter: brightness(0);
258
+ }
259
+
260
+ progress, [type="checkbox"], [type="radio"], [type="range"] {
261
+ accent-color: var(--pico-primary);
262
+ }
263
+
264
+ *, :before, :after {
265
+ box-sizing: border-box;
266
+ background-repeat: no-repeat;
267
+ }
268
+
269
+ :before, :after {
270
+ text-decoration: inherit;
271
+ vertical-align: inherit;
272
+ }
273
+
274
+ :where(:scope), :where(:host) {
275
+ -webkit-tap-highlight-color: transparent;
276
+ -webkit-text-size-adjust: 100%;
277
+ -moz-text-size-adjust: 100%;
278
+ text-size-adjust: 100%;
279
+ background-color: var(--pico-background-color);
280
+ color: var(--pico-color);
281
+ font-weight: var(--pico-font-weight);
282
+ font-size: var(--pico-font-size);
283
+ line-height: var(--pico-line-height);
284
+ font-family: var(--pico-font-family);
285
+ text-underline-offset: var(--pico-text-underline-offset);
286
+ text-rendering: optimizelegibility;
287
+ overflow-wrap: break-word;
288
+ -moz-tab-size: 4;
289
+ -o-tab-size: 4;
290
+ tab-size: 4;
291
+ }
292
+
293
+ body {
294
+ width: 100%;
295
+ margin: 0;
296
+ }
297
+
298
+ main {
299
+ display: block;
300
+ }
301
+
302
+ section {
303
+ margin-bottom: var(--pico-block-spacing-vertical);
304
+ }
305
+
306
+ .container, .container-fluid {
307
+ width: 100%;
308
+ padding-right: var(--pico-spacing);
309
+ padding-left: var(--pico-spacing);
310
+ margin-left: auto;
311
+ margin-right: auto;
312
+ }
313
+
314
+ @media (width >= 576px) {
315
+ .container {
316
+ max-width: 510px;
317
+ padding-left: 0;
318
+ padding-right: 0;
319
+ }
320
+ }
321
+
322
+ @media (width >= 768px) {
323
+ .container {
324
+ max-width: 700px;
325
+ }
326
+ }
327
+
328
+ @media (width >= 1024px) {
329
+ .container {
330
+ max-width: 950px;
331
+ }
332
+ }
333
+
334
+ @media (width >= 1280px) {
335
+ .container {
336
+ max-width: 1200px;
337
+ }
338
+ }
339
+
340
+ @media (width >= 1536px) {
341
+ .container {
342
+ max-width: 1450px;
343
+ }
344
+ }
345
+
346
+ .grid {
347
+ grid-column-gap: var(--pico-grid-column-gap);
348
+ grid-row-gap: var(--pico-grid-row-gap);
349
+ grid-template-columns: 1fr;
350
+ display: grid;
351
+ }
352
+
353
+ @media (width >= 768px) {
354
+ .grid {
355
+ grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
356
+ }
357
+ }
358
+
359
+ .grid > :not(.does-not-exist) {
360
+ min-width: 0;
361
+ margin-bottom: 0;
362
+ }
363
+
364
+ .overflow-auto {
365
+ overflow: auto;
366
+ }
367
+
368
+ b, strong {
369
+ font-weight: bolder;
370
+ }
371
+
372
+ sub, sup {
373
+ vertical-align: baseline;
374
+ font-size: .75em;
375
+ line-height: 0;
376
+ position: relative;
377
+ }
378
+
379
+ sub {
380
+ bottom: -.25em;
381
+ }
382
+
383
+ sup {
384
+ top: -.5em;
385
+ }
386
+
387
+ address, blockquote, dl, ol, p, pre, table, ul {
388
+ margin-top: 0;
389
+ margin-bottom: var(--pico-typography-spacing-vertical);
390
+ color: var(--pico-color);
391
+ font-style: normal;
392
+ font-weight: var(--pico-font-weight);
393
+ }
394
+
395
+ h1, h2, h3, h4, h5, h6 {
396
+ margin-top: 0;
397
+ margin-bottom: var(--pico-typography-spacing-vertical);
398
+ color: var(--pico-color);
399
+ font-weight: var(--pico-font-weight);
400
+ font-size: var(--pico-font-size);
401
+ line-height: var(--pico-line-height);
402
+ font-family: var(--pico-font-family);
403
+ }
404
+
405
+ h1 {
406
+ --pico-color: var(--pico-h1-color);
407
+ }
408
+
409
+ h2 {
410
+ --pico-color: var(--pico-h2-color);
411
+ }
412
+
413
+ h3 {
414
+ --pico-color: var(--pico-h3-color);
415
+ }
416
+
417
+ h4 {
418
+ --pico-color: var(--pico-h4-color);
419
+ }
420
+
421
+ h5 {
422
+ --pico-color: var(--pico-h5-color);
423
+ }
424
+
425
+ h6 {
426
+ --pico-color: var(--pico-h6-color);
427
+ }
428
+
429
+ :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
430
+ margin-top: var(--pico-typography-spacing-top);
431
+ }
432
+
433
+ p, hgroup {
434
+ margin-bottom: var(--pico-typography-spacing-vertical);
435
+ }
436
+
437
+ hgroup > * {
438
+ margin-top: 0;
439
+ margin-bottom: 0;
440
+ }
441
+
442
+ hgroup > :not(:first-child):last-child {
443
+ --pico-color: var(--pico-muted-color);
444
+ --pico-font-weight: unset;
445
+ font-size: 1rem;
446
+ }
447
+
448
+ :where(ol, ul) li {
449
+ margin-bottom: calc(var(--pico-typography-spacing-vertical) * .25);
450
+ }
451
+
452
+ :where(dl, ol, ul) :where(dl, ol, ul) {
453
+ margin: 0;
454
+ margin-top: calc(var(--pico-typography-spacing-vertical) * .25);
455
+ }
456
+
457
+ ul li {
458
+ list-style: square;
459
+ }
460
+
461
+ mark {
462
+ background-color: var(--pico-mark-background-color);
463
+ color: var(--pico-mark-color);
464
+ vertical-align: baseline;
465
+ padding: .125rem .25rem;
466
+ }
467
+
468
+ blockquote {
469
+ margin: var(--pico-typography-spacing-vertical) 0;
470
+ padding: var(--pico-spacing);
471
+ border-right: none;
472
+ border-left: .25rem solid var(--pico-blockquote-border-color);
473
+ border-inline-start: .25rem solid var(--pico-blockquote-border-color);
474
+ border-inline-end: none;
475
+ display: block;
476
+ }
477
+
478
+ blockquote footer {
479
+ margin-top: calc(var(--pico-typography-spacing-vertical) * .5);
480
+ color: var(--pico-blockquote-footer-color);
481
+ }
482
+
483
+ abbr[title] {
484
+ cursor: help;
485
+ border-bottom: 1px dotted;
486
+ text-decoration: none;
487
+ }
488
+
489
+ ins {
490
+ color: var(--pico-ins-color);
491
+ text-decoration: none;
492
+ }
493
+
494
+ del {
495
+ color: var(--pico-del-color);
496
+ }
497
+
498
+ ::-moz-selection {
499
+ background-color: var(--pico-text-selection-color);
500
+ }
501
+
502
+ ::selection {
503
+ background-color: var(--pico-text-selection-color);
504
+ }
505
+
506
+ :where(a:not([role="button"])), [role="link"] {
507
+ --pico-color: var(--pico-primary);
508
+ --pico-background-color: transparent;
509
+ --pico-underline: var(--pico-primary-underline);
510
+ background-color: var(--pico-background-color);
511
+ color: var(--pico-color);
512
+ -webkit-text-decoration: var(--pico-text-decoration);
513
+ text-decoration: var(--pico-text-decoration);
514
+ text-decoration-color: var(--pico-underline);
515
+ text-underline-offset: .125em;
516
+ transition: background-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
517
+ transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
518
+ transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
519
+ outline: none;
520
+ }
521
+
522
+ :where(a:not([role="button"])):is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
523
+ --pico-color: var(--pico-primary-hover);
524
+ --pico-underline: var(--pico-primary-hover-underline);
525
+ --pico-text-decoration: underline;
526
+ }
527
+
528
+ :where(a:not([role="button"])):focus-visible, [role="link"]:focus-visible {
529
+ box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
530
+ }
531
+
532
+ :where(a:not([role="button"])).secondary, [role="link"].secondary {
533
+ --pico-color: var(--pico-secondary);
534
+ --pico-underline: var(--pico-secondary-underline);
535
+ }
536
+
537
+ :where(a:not([role="button"])).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [role="link"].secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
538
+ --pico-color: var(--pico-secondary-hover);
539
+ --pico-underline: var(--pico-secondary-hover-underline);
540
+ }
541
+
542
+ :where(a:not([role="button"])).contrast, [role="link"].contrast {
543
+ --pico-color: var(--pico-contrast);
544
+ --pico-underline: var(--pico-contrast-underline);
545
+ }
546
+
547
+ :where(a:not([role="button"])).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [role="link"].contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
548
+ --pico-color: var(--pico-contrast-hover);
549
+ --pico-underline: var(--pico-contrast-hover-underline);
550
+ }
551
+
552
+ a[role="button"] {
553
+ display: inline-block;
554
+ }
555
+
556
+ button {
557
+ text-transform: none;
558
+ margin: 0;
559
+ font-family: inherit;
560
+ overflow: visible;
561
+ }
562
+
563
+ button, [type="submit"], [type="reset"], [type="button"] {
564
+ -webkit-appearance: button;
565
+ }
566
+
567
+ button, [type="submit"], [type="reset"], [type="button"], [type="file"]::file-selector-button, [role="button"] {
568
+ --pico-background-color: var(--pico-primary-background);
569
+ --pico-border-color: var(--pico-primary-border);
570
+ --pico-color: var(--pico-primary-inverse);
571
+ --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 #0000);
572
+ padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
573
+ border: var(--pico-border-width) solid var(--pico-border-color);
574
+ border-radius: var(--pico-border-radius);
575
+ background-color: var(--pico-background-color);
576
+ box-shadow: var(--pico-box-shadow);
577
+ color: var(--pico-color);
578
+ font-weight: var(--pico-button-font-weight, var(--pico-font-weight));
579
+ font-size: 1rem;
580
+ line-height: var(--pico-line-height);
581
+ text-align: center;
582
+ cursor: pointer;
583
+ -webkit-user-select: none;
584
+ -moz-user-select: none;
585
+ user-select: none;
586
+ transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
587
+ outline: none;
588
+ text-decoration: none;
589
+ }
590
+
591
+ button[aria-current]:not([aria-current="false"]), button:is(:hover, :active, :focus), [type="submit"][aria-current]:not([aria-current="false"]), [type="submit"]:is(:hover, :active, :focus), [type="reset"][aria-current]:not([aria-current="false"]), [type="reset"]:is(:hover, :active, :focus), [type="button"][aria-current]:not([aria-current="false"]), [type="button"]:is(:hover, :active, :focus), [type="file"]::file-selector-button:is(), [type="file"]::file-selector-button:is(:hover, :active, :focus), [role="button"][aria-current]:not([aria-current="false"]), [role="button"]:is(:hover, :active, :focus) {
592
+ --pico-background-color: var(--pico-primary-hover-background);
593
+ --pico-border-color: var(--pico-primary-hover-border);
594
+ --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 #0000);
595
+ --pico-color: var(--pico-primary-inverse);
596
+ }
597
+
598
+ button:focus, button[aria-current]:not([aria-current="false"]):focus, [type="submit"]:focus, [type="submit"][aria-current]:not([aria-current="false"]):focus, [type="reset"]:focus, [type="reset"][aria-current]:not([aria-current="false"]):focus, [type="button"]:focus, [type="button"][aria-current]:not([aria-current="false"]):focus, [type="file"]::file-selector-button:focus, [type="file"]::file-selector-button:is():focus, [role="button"]:focus, [role="button"][aria-current]:not([aria-current="false"]):focus {
599
+ --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 #0000), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
600
+ }
601
+
602
+ [type="submit"], [type="reset"], [type="button"] {
603
+ margin-bottom: var(--pico-spacing);
604
+ }
605
+
606
+ :is(button, [type="submit"], [type="button"], [role="button"]).secondary, [type="reset"], [type="file"]::file-selector-button {
607
+ --pico-background-color: var(--pico-secondary-background);
608
+ --pico-border-color: var(--pico-secondary-border);
609
+ --pico-color: var(--pico-secondary-inverse);
610
+ cursor: pointer;
611
+ }
612
+
613
+ :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="file"]::file-selector-button:is(:hover, :active, :focus) {
614
+ --pico-background-color: var(--pico-secondary-hover-background);
615
+ --pico-border-color: var(--pico-secondary-hover-border);
616
+ --pico-color: var(--pico-secondary-inverse);
617
+ }
618
+
619
+ :is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus, :is(button, [type="submit"], [type="button"], [role="button"]).secondary[aria-current]:not([aria-current="false"]):focus, [type="reset"]:focus, [type="reset"][aria-current]:not([aria-current="false"]):focus, [type="file"]::file-selector-button:focus, [type="file"]::file-selector-button:is():focus {
620
+ --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 #0000), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
621
+ }
622
+
623
+ :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
624
+ --pico-background-color: var(--pico-contrast-background);
625
+ --pico-border-color: var(--pico-contrast-border);
626
+ --pico-color: var(--pico-contrast-inverse);
627
+ }
628
+
629
+ :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
630
+ --pico-background-color: var(--pico-contrast-hover-background);
631
+ --pico-border-color: var(--pico-contrast-hover-border);
632
+ --pico-color: var(--pico-contrast-inverse);
633
+ }
634
+
635
+ :is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus, :is(button, [type="submit"], [type="button"], [role="button"]).contrast[aria-current]:not([aria-current="false"]):focus {
636
+ --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 #0000), 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
637
+ }
638
+
639
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline, [type="reset"].outline {
640
+ --pico-background-color: transparent;
641
+ --pico-color: var(--pico-primary);
642
+ --pico-border-color: var(--pico-primary);
643
+ }
644
+
645
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
646
+ --pico-background-color: transparent;
647
+ --pico-color: var(--pico-primary-hover);
648
+ --pico-border-color: var(--pico-primary-hover);
649
+ }
650
+
651
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary, [type="reset"].outline {
652
+ --pico-color: var(--pico-secondary);
653
+ --pico-border-color: var(--pico-secondary);
654
+ }
655
+
656
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
657
+ --pico-color: var(--pico-secondary-hover);
658
+ --pico-border-color: var(--pico-secondary-hover);
659
+ }
660
+
661
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
662
+ --pico-color: var(--pico-contrast);
663
+ --pico-border-color: var(--pico-contrast);
664
+ }
665
+
666
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
667
+ --pico-color: var(--pico-contrast-hover);
668
+ --pico-border-color: var(--pico-contrast-hover);
669
+ }
670
+
671
+ :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled], :where(fieldset[disabled]) :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
672
+ opacity: .5;
673
+ pointer-events: none;
674
+ }
675
+
676
+ :where(table) {
677
+ border-collapse: collapse;
678
+ border-spacing: 0;
679
+ text-indent: 0;
680
+ width: 100%;
681
+ }
682
+
683
+ th, td {
684
+ padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
685
+ border-bottom: var(--pico-border-width) solid var(--pico-table-border-color);
686
+ background-color: var(--pico-background-color);
687
+ color: var(--pico-color);
688
+ font-weight: var(--pico-font-weight);
689
+ text-align: start;
690
+ }
691
+
692
+ tfoot th, tfoot td {
693
+ border-top: var(--pico-border-width) solid var(--pico-table-border-color);
694
+ border-bottom: 0;
695
+ }
696
+
697
+ table.striped tbody tr:nth-child(odd) th, table.striped tbody tr:nth-child(odd) td {
698
+ background-color: var(--pico-table-row-stripped-background-color);
699
+ }
700
+
701
+ :where(audio, canvas, iframe, img, svg, video) {
702
+ vertical-align: middle;
703
+ }
704
+
705
+ audio, video {
706
+ display: inline-block;
707
+ }
708
+
709
+ audio:not([controls]) {
710
+ height: 0;
711
+ display: none;
712
+ }
713
+
714
+ :where(iframe) {
715
+ border-style: none;
716
+ }
717
+
718
+ img {
719
+ &:not([height]) {
720
+ max-width: 100%;
721
+ height: auto;
722
+ }
723
+
724
+ border-style: none;
725
+ }
726
+
727
+ :where(svg:not([fill])) {
728
+ fill: currentColor;
729
+ }
730
+
731
+ svg:not(:scope), svg:not(:host) {
732
+ overflow: hidden;
733
+ }
734
+
735
+ pre, code, var, kbd, samp {
736
+ font-size: .875em;
737
+ font-family: var(--pico-font-family);
738
+ }
739
+
740
+ pre code, pre samp {
741
+ font-size: inherit;
742
+ font-family: inherit;
743
+ }
744
+
745
+ pre {
746
+ -ms-overflow-style: scrollbar;
747
+ overflow: auto;
748
+ }
749
+
750
+ pre, code, var, kbd, samp {
751
+ border-radius: var(--pico-border-radius);
752
+ background: var(--pico-code-background-color);
753
+ color: var(--pico-code-color);
754
+ font-weight: var(--pico-font-weight);
755
+ line-height: initial;
756
+ }
757
+
758
+ code, var, kbd, samp {
759
+ padding: .375rem;
760
+ display: inline-block;
761
+ }
762
+
763
+ pre {
764
+ margin-bottom: var(--pico-spacing);
765
+ display: block;
766
+ overflow-x: auto;
767
+ }
768
+
769
+ pre > code, pre > samp {
770
+ padding: var(--pico-spacing);
771
+ line-height: var(--pico-line-height);
772
+ background: none;
773
+ display: block;
774
+ }
775
+
776
+ kbd {
777
+ background-color: var(--pico-code-kbd-background-color);
778
+ color: var(--pico-code-kbd-color);
779
+ vertical-align: baseline;
780
+ }
781
+
782
+ figure {
783
+ margin: 0;
784
+ padding: 0;
785
+ display: block;
786
+ }
787
+
788
+ figure figcaption {
789
+ padding: calc(var(--pico-spacing) * .5) 0;
790
+ color: var(--pico-muted-color);
791
+ }
792
+
793
+ hr {
794
+ height: 0;
795
+ margin: var(--pico-typography-spacing-vertical) 0;
796
+ border: 0;
797
+ border-top: 1px solid var(--pico-muted-border-color);
798
+ color: inherit;
799
+ }
800
+
801
+ [hidden], template {
802
+ display: none !important;
803
+ }
804
+
805
+ canvas {
806
+ display: inline-block;
807
+ }
808
+
809
+ input, optgroup, select, textarea {
810
+ font-size: 1rem;
811
+ line-height: var(--pico-line-height);
812
+ letter-spacing: inherit;
813
+ margin: 0;
814
+ font-family: inherit;
815
+ }
816
+
817
+ input {
818
+ overflow: visible;
819
+ }
820
+
821
+ select {
822
+ text-transform: none;
823
+ }
824
+
825
+ legend {
826
+ max-width: 100%;
827
+ color: inherit;
828
+ white-space: normal;
829
+ padding: 0;
830
+ }
831
+
832
+ textarea {
833
+ overflow: auto;
834
+ }
835
+
836
+ [type="checkbox"], [type="radio"] {
837
+ padding: 0;
838
+ }
839
+
840
+ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
841
+ height: auto;
842
+ }
843
+
844
+ [type="search"] {
845
+ -webkit-appearance: textfield;
846
+ outline-offset: -2px;
847
+ }
848
+
849
+ [type="search"]::-webkit-search-decoration {
850
+ -webkit-appearance: none;
851
+ }
852
+
853
+ ::-webkit-file-upload-button {
854
+ -webkit-appearance: button;
855
+ font: inherit;
856
+ }
857
+
858
+ ::-moz-focus-inner {
859
+ border-style: none;
860
+ padding: 0;
861
+ }
862
+
863
+ :-moz-focusring {
864
+ outline: none;
865
+ }
866
+
867
+ :-moz-ui-invalid {
868
+ box-shadow: none;
869
+ }
870
+
871
+ ::-ms-expand {
872
+ display: none;
873
+ }
874
+
875
+ [type="file"], [type="range"] {
876
+ border-width: 0;
877
+ padding: 0;
878
+ }
879
+
880
+ input:not([type="checkbox"], [type="radio"], [type="range"]) {
881
+ height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
882
+ }
883
+
884
+ fieldset {
885
+ width: 100%;
886
+ min-width: 0;
887
+ margin: 0;
888
+ margin-bottom: var(--pico-spacing);
889
+ border: 0;
890
+ padding: 0;
891
+ }
892
+
893
+ label, fieldset legend {
894
+ margin-bottom: calc(var(--pico-spacing) * .375);
895
+ color: var(--pico-color);
896
+ font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
897
+ display: block;
898
+ }
899
+
900
+ fieldset legend {
901
+ margin-bottom: calc(var(--pico-spacing) * .5);
902
+ }
903
+
904
+ input:not([type="checkbox"], [type="radio"]), button[type="submit"], select, textarea {
905
+ width: 100%;
906
+ }
907
+
908
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), select, textarea {
909
+ -webkit-appearance: none;
910
+ -moz-appearance: none;
911
+ appearance: none;
912
+ padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
913
+ }
914
+
915
+ input, select, textarea {
916
+ --pico-background-color: var(--pico-form-element-background-color);
917
+ --pico-border-color: var(--pico-form-element-border-color);
918
+ --pico-color: var(--pico-form-element-color);
919
+ --pico-box-shadow: none;
920
+ border: var(--pico-border-width) solid var(--pico-border-color);
921
+ border-radius: var(--pico-border-radius);
922
+ background-color: var(--pico-background-color);
923
+ box-shadow: var(--pico-box-shadow);
924
+ color: var(--pico-color);
925
+ font-weight: var(--pico-font-weight);
926
+ transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
927
+ outline: none;
928
+ }
929
+
930
+ input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
931
+ --pico-background-color: var(--pico-form-element-active-background-color);
932
+ }
933
+
934
+ input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(:active, :focus), :where(select, textarea):not([readonly]):is(:active, :focus) {
935
+ --pico-border-color: var(--pico-form-element-active-border-color);
936
+ }
937
+
938
+ input:not([type="submit"], [type="button"], [type="reset"], [type="range"], [type="file"], [readonly]):focus, :where(select, textarea):not([readonly]):focus {
939
+ --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
940
+ }
941
+
942
+ input:not([type="submit"], [type="button"], [type="reset"])[disabled], select[disabled], textarea[disabled], label[aria-disabled="true"], :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
943
+ opacity: var(--pico-form-element-disabled-opacity);
944
+ pointer-events: none;
945
+ }
946
+
947
+ label[aria-disabled="true"] input[disabled] {
948
+ opacity: 1;
949
+ }
950
+
951
+ :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid] {
952
+ padding-left: var(--pico-form-element-spacing-horizontal);
953
+ background-position: right .75rem center;
954
+ background-repeat: no-repeat;
955
+ background-size: 1rem;
956
+ padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
957
+ padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
958
+ padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
959
+ }
960
+
961
+ :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="false"]:not(select) {
962
+ background-image: var(--pico-icon-valid);
963
+ }
964
+
965
+ :where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="true"]:not(select) {
966
+ background-image: var(--pico-icon-invalid);
967
+ }
968
+
969
+ :where(input, select, textarea)[aria-invalid="false"] {
970
+ --pico-border-color: var(--pico-form-element-valid-border-color);
971
+ }
972
+
973
+ :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
974
+ --pico-border-color: var(--pico-form-element-valid-active-border-color) !important;
975
+ }
976
+
977
+ :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
978
+ --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important;
979
+ }
980
+
981
+ :where(input, select, textarea)[aria-invalid="true"] {
982
+ --pico-border-color: var(--pico-form-element-invalid-border-color);
983
+ }
984
+
985
+ :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) {
986
+ --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important;
987
+ }
988
+
989
+ :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
990
+ --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important;
991
+ }
992
+
993
+ [dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
994
+ background-position: .75rem;
995
+ }
996
+
997
+ input::placeholder, input::-webkit-input-placeholder, textarea::placeholder, textarea::-webkit-input-placeholder, select:invalid {
998
+ color: var(--pico-form-element-placeholder-color);
999
+ opacity: 1;
1000
+ }
1001
+
1002
+ input:not([type="checkbox"], [type="radio"]), select, textarea {
1003
+ margin-bottom: var(--pico-spacing);
1004
+ }
1005
+
1006
+ select::-ms-expand {
1007
+ background-color: #0000;
1008
+ border: 0;
1009
+ }
1010
+
1011
+ select:not([multiple], [size]) {
1012
+ padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
1013
+ padding-left: var(--pico-form-element-spacing-horizontal);
1014
+ background-image: var(--pico-icon-chevron);
1015
+ background-position: right .75rem center;
1016
+ background-repeat: no-repeat;
1017
+ background-size: 1rem;
1018
+ padding-inline-start: var(--pico-form-element-spacing-horizontal);
1019
+ padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
1020
+ }
1021
+
1022
+ select[multiple] option:checked {
1023
+ background: var(--pico-form-element-selected-background-color);
1024
+ color: var(--pico-form-element-color);
1025
+ }
1026
+
1027
+ [dir="rtl"] select:not([multiple], [size]) {
1028
+ background-position: .75rem;
1029
+ }
1030
+
1031
+ textarea {
1032
+ resize: vertical;
1033
+ display: block;
1034
+ }
1035
+
1036
+ textarea[aria-invalid] {
1037
+ --pico-icon-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
1038
+ background-position: right .75rem top !important;
1039
+ background-size: 1rem var(--pico-icon-height) !important;
1040
+ }
1041
+
1042
+ :where(input, select, textarea, fieldset, .grid) + small {
1043
+ width: 100%;
1044
+ margin-top: calc(var(--pico-spacing) * -.75);
1045
+ margin-bottom: var(--pico-spacing);
1046
+ color: var(--pico-muted-color);
1047
+ display: block;
1048
+ }
1049
+
1050
+ :where(input, select, textarea, fieldset, .grid)[aria-invalid="false"] + small {
1051
+ color: var(--pico-ins-color);
1052
+ }
1053
+
1054
+ :where(input, select, textarea, fieldset, .grid)[aria-invalid="true"] + small {
1055
+ color: var(--pico-del-color);
1056
+ }
1057
+
1058
+ label > :where(input, select, textarea) {
1059
+ margin-top: calc(var(--pico-spacing) * .25);
1060
+ }
1061
+
1062
+ :where(:scope), :host {
1063
+ --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");
1064
+ --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");
1065
+ }
1066
+
1067
+ :where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
1068
+ --pico-switch-background-color: light-dark(#bfc7d9, #333c4e);
1069
+ --pico-switch-checked-background-color: var(--pico-primary-background);
1070
+ --pico-switch-color: #fff;
1071
+ --pico-switch-thumb-box-shadow: 0 0 0 #0000;
1072
+ }
1073
+
1074
+ label:has([type="checkbox"], [type="radio"]) {
1075
+ cursor: pointer;
1076
+ width: fit-content;
1077
+ }
1078
+
1079
+ [type="checkbox"], [type="radio"] {
1080
+ -webkit-appearance: none;
1081
+ -moz-appearance: none;
1082
+ appearance: none;
1083
+ border-width: var(--pico-border-width);
1084
+ vertical-align: middle;
1085
+ cursor: pointer;
1086
+ margin-top: -.125em;
1087
+ width: 1.25em;
1088
+ height: 1.25em;
1089
+ margin-inline-end: .5em;
1090
+ }
1091
+
1092
+ [type="checkbox"]::-ms-check, [type="radio"]::-ms-check {
1093
+ display: none;
1094
+ }
1095
+
1096
+ [type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
1097
+ --pico-background-color: var(--pico-primary-background);
1098
+ --pico-border-color: var(--pico-primary-border);
1099
+ background-image: var(--pico-icon-checkbox);
1100
+ background-position: 50%;
1101
+ background-repeat: no-repeat;
1102
+ background-size: .75em;
1103
+ }
1104
+
1105
+ [type="checkbox"] ~ label, [type="radio"] ~ label {
1106
+ cursor: pointer;
1107
+ margin-bottom: 0;
1108
+ display: inline-block;
1109
+ }
1110
+
1111
+ [type="checkbox"] ~ label:not(:last-of-type), [type="radio"] ~ label:not(:last-of-type) {
1112
+ margin-inline-end: 1em;
1113
+ }
1114
+
1115
+ [type="checkbox"]:indeterminate {
1116
+ --pico-background-color: var(--pico-primary-background);
1117
+ --pico-border-color: var(--pico-primary-border);
1118
+ background-image: var(--pico-icon-minus);
1119
+ background-position: 50%;
1120
+ background-repeat: no-repeat;
1121
+ background-size: .75em;
1122
+ }
1123
+
1124
+ [type="radio"] {
1125
+ border-radius: 50%;
1126
+ }
1127
+
1128
+ [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
1129
+ --pico-background-color: var(--pico-primary-inverse);
1130
+ background-image: none;
1131
+ border-width: .35em;
1132
+ }
1133
+
1134
+ [type="checkbox"][role="switch"] {
1135
+ --pico-background-color: var(--pico-switch-background-color);
1136
+ --pico-color: var(--pico-switch-color);
1137
+ border: var(--pico-border-width) solid var(--pico-border-color);
1138
+ background-color: var(--pico-background-color);
1139
+ border-radius: 1.25em;
1140
+ width: 2.25em;
1141
+ height: 1.25em;
1142
+ line-height: 1.25em;
1143
+ }
1144
+
1145
+ [type="checkbox"][role="switch"]:not([aria-invalid]) {
1146
+ --pico-border-color: var(--pico-switch-background-color);
1147
+ }
1148
+
1149
+ [type="checkbox"][role="switch"]:before {
1150
+ aspect-ratio: 1;
1151
+ background-color: var(--pico-color);
1152
+ height: 100%;
1153
+ box-shadow: var(--pico-switch-thumb-box-shadow);
1154
+ content: "";
1155
+ border-radius: 50%;
1156
+ transition: margin .1s ease-in-out;
1157
+ display: block;
1158
+ }
1159
+
1160
+ [type="checkbox"][role="switch"]:focus {
1161
+ --pico-background-color: var(--pico-switch-background-color);
1162
+ --pico-border-color: var(--pico-switch-background-color);
1163
+ }
1164
+
1165
+ [type="checkbox"][role="switch"]:checked {
1166
+ --pico-background-color: var(--pico-switch-checked-background-color);
1167
+ --pico-border-color: var(--pico-switch-checked-background-color);
1168
+ background-image: none;
1169
+ }
1170
+
1171
+ [type="checkbox"][role="switch"]:checked:before {
1172
+ margin-inline-start: 1em;
1173
+ }
1174
+
1175
+ [type="checkbox"][role="switch"][disabled] {
1176
+ --pico-background-color: var(--pico-border-color);
1177
+ }
1178
+
1179
+ [type="checkbox"][aria-invalid="false"]:checked, [type="checkbox"][aria-invalid="false"]:checked:active, [type="checkbox"][aria-invalid="false"]:checked:focus, [type="checkbox"][role="switch"][aria-invalid="false"]:checked, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
1180
+ --pico-background-color: var(--pico-form-element-valid-border-color);
1181
+ }
1182
+
1183
+ [type="checkbox"]:checked[aria-invalid="true"], [type="checkbox"]:checked:active[aria-invalid="true"], [type="checkbox"]:checked:focus[aria-invalid="true"], [type="checkbox"][role="switch"]:checked[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
1184
+ --pico-background-color: var(--pico-form-element-invalid-border-color);
1185
+ }
1186
+
1187
+ [type="checkbox"][aria-invalid="false"]:checked, [type="checkbox"][aria-invalid="false"]:checked:active, [type="checkbox"][aria-invalid="false"]:checked:focus, [type="radio"][aria-invalid="false"]:checked, [type="radio"][aria-invalid="false"]:checked:active, [type="radio"][aria-invalid="false"]:checked:focus, [type="checkbox"][role="switch"][aria-invalid="false"]:checked, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active, [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
1188
+ --pico-border-color: var(--pico-form-element-valid-border-color);
1189
+ }
1190
+
1191
+ [type="checkbox"]:checked[aria-invalid="true"], [type="checkbox"]:checked:active[aria-invalid="true"], [type="checkbox"]:checked:focus[aria-invalid="true"], [type="radio"]:checked[aria-invalid="true"], [type="radio"]:checked:active[aria-invalid="true"], [type="radio"]:checked:focus[aria-invalid="true"], [type="checkbox"][role="switch"]:checked[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"], [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
1192
+ --pico-border-color: var(--pico-form-element-invalid-border-color);
1193
+ }
1194
+
1195
+ [type="color"]::-webkit-color-swatch-wrapper {
1196
+ padding: 0;
1197
+ }
1198
+
1199
+ [type="color"]::-moz-focus-inner {
1200
+ padding: 0;
1201
+ }
1202
+
1203
+ [type="color"]::-webkit-color-swatch {
1204
+ border-radius: calc(var(--pico-border-radius) * .5);
1205
+ border: 0;
1206
+ }
1207
+
1208
+ [type="color"]::-moz-color-swatch {
1209
+ border-radius: calc(var(--pico-border-radius) * .5);
1210
+ border: 0;
1211
+ }
1212
+
1213
+ :where(:scope), :host {
1214
+ --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");
1215
+ --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");
1216
+ }
1217
+
1218
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
1219
+ --pico-icon-position: .75rem;
1220
+ --pico-icon-width: 1rem;
1221
+ padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position));
1222
+ background-image: var(--pico-icon-date);
1223
+ background-position: center right var(--pico-icon-position);
1224
+ background-size: var(--pico-icon-width) auto;
1225
+ background-repeat: no-repeat;
1226
+ min-width: 0;
1227
+ }
1228
+
1229
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] {
1230
+ background-image: var(--pico-icon-time);
1231
+ }
1232
+
1233
+ [type="date"]::-webkit-calendar-picker-indicator, [type="datetime-local"]::-webkit-calendar-picker-indicator, [type="month"]::-webkit-calendar-picker-indicator, [type="time"]::-webkit-calendar-picker-indicator, [type="week"]::-webkit-calendar-picker-indicator {
1234
+ width: var(--pico-icon-width);
1235
+ margin-right: calc(var(--pico-icon-width) * -1);
1236
+ margin-left: var(--pico-icon-position);
1237
+ opacity: 0;
1238
+ }
1239
+
1240
+ @-moz-document url-prefix() {
1241
+ [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"] {
1242
+ padding-right: var(--pico-form-element-spacing-horizontal) !important;
1243
+ background-image: none !important;
1244
+ }
1245
+ }
1246
+
1247
+ [dir="rtl"] :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
1248
+ text-align: end;
1249
+ }
1250
+
1251
+ [type="file"] {
1252
+ --pico-color: var(--pico-muted-color);
1253
+ margin-left: calc(var(--pico-outline-width) * -1);
1254
+ padding: calc(var(--pico-form-element-spacing-vertical) * .5) 0;
1255
+ padding-left: var(--pico-outline-width);
1256
+ background: none;
1257
+ border: 0;
1258
+ border-radius: 0;
1259
+ }
1260
+
1261
+ [type="file"]::file-selector-button {
1262
+ margin-right: calc(var(--pico-spacing) / 2);
1263
+ padding: calc(var(--pico-form-element-spacing-vertical) * .5) var(--pico-form-element-spacing-horizontal);
1264
+ }
1265
+
1266
+ [type="file"]:is(:hover, :active, :focus)::file-selector-button {
1267
+ --pico-background-color: var(--pico-secondary-hover-background);
1268
+ --pico-border-color: var(--pico-secondary-hover-border);
1269
+ }
1270
+
1271
+ [type="file"]:focus::file-selector-button {
1272
+ --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 #0000), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
1273
+ }
1274
+
1275
+ :where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
1276
+ --pico-range-border-color: light-dark(#dfe3eb, #202632);
1277
+ --pico-range-active-border-color: light-dark(#bfc7d9, #2a3140);
1278
+ --pico-range-thumb-border-color: var(--pico-background-color);
1279
+ --pico-range-thumb-color: var(--pico-secondary-background);
1280
+ --pico-range-thumb-active-color: var(--pico-primary-background);
1281
+ }
1282
+
1283
+ [type="range"] {
1284
+ -webkit-appearance: none;
1285
+ -moz-appearance: none;
1286
+ appearance: none;
1287
+ background: none;
1288
+ width: 100%;
1289
+ height: 1.25rem;
1290
+ }
1291
+
1292
+ [type="range"]::-webkit-slider-runnable-track {
1293
+ border-radius: var(--pico-border-radius);
1294
+ background-color: var(--pico-range-border-color);
1295
+ width: 100%;
1296
+ height: .375rem;
1297
+ -webkit-transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
1298
+ transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
1299
+ }
1300
+
1301
+ [type="range"]::-moz-range-track {
1302
+ border-radius: var(--pico-border-radius);
1303
+ background-color: var(--pico-range-border-color);
1304
+ width: 100%;
1305
+ height: .375rem;
1306
+ -moz-transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
1307
+ transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
1308
+ }
1309
+
1310
+ [type="range"]::-ms-track {
1311
+ border-radius: var(--pico-border-radius);
1312
+ background-color: var(--pico-range-border-color);
1313
+ width: 100%;
1314
+ height: .375rem;
1315
+ -ms-transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
1316
+ transition: background-color var(--pico-transition), box-shadow var(--pico-transition);
1317
+ }
1318
+
1319
+ [type="range"]::-webkit-slider-thumb {
1320
+ -webkit-appearance: none;
1321
+ border: 2px solid var(--pico-range-thumb-border-color);
1322
+ background-color: var(--pico-range-thumb-color);
1323
+ cursor: pointer;
1324
+ width: 1.25rem;
1325
+ height: 1.25rem;
1326
+ -webkit-transition: background-color var(--pico-transition), transform var(--pico-transition);
1327
+ transition: background-color var(--pico-transition), transform var(--pico-transition);
1328
+ border-radius: 50%;
1329
+ margin-top: -.4375rem;
1330
+ }
1331
+
1332
+ [type="range"]::-moz-range-thumb {
1333
+ -webkit-appearance: none;
1334
+ border: 2px solid var(--pico-range-thumb-border-color);
1335
+ background-color: var(--pico-range-thumb-color);
1336
+ cursor: pointer;
1337
+ width: 1.25rem;
1338
+ height: 1.25rem;
1339
+ -moz-transition: background-color var(--pico-transition), transform var(--pico-transition);
1340
+ transition: background-color var(--pico-transition), transform var(--pico-transition);
1341
+ border-radius: 50%;
1342
+ margin-top: -.4375rem;
1343
+ }
1344
+
1345
+ [type="range"]::-ms-thumb {
1346
+ -webkit-appearance: none;
1347
+ border: 2px solid var(--pico-range-thumb-border-color);
1348
+ background-color: var(--pico-range-thumb-color);
1349
+ cursor: pointer;
1350
+ width: 1.25rem;
1351
+ height: 1.25rem;
1352
+ -ms-transition: background-color var(--pico-transition), transform var(--pico-transition);
1353
+ transition: background-color var(--pico-transition), transform var(--pico-transition);
1354
+ border-radius: 50%;
1355
+ margin-top: -.4375rem;
1356
+ }
1357
+
1358
+ [type="range"]:active, [type="range"]:focus-within {
1359
+ --pico-range-border-color: var(--pico-range-active-border-color);
1360
+ --pico-range-thumb-color: var(--pico-range-thumb-active-color);
1361
+ }
1362
+
1363
+ [type="range"]:active::-webkit-slider-thumb {
1364
+ transform: scale(1.25);
1365
+ }
1366
+
1367
+ [type="range"]:active::-moz-range-thumb {
1368
+ transform: scale(1.25);
1369
+ }
1370
+
1371
+ [type="range"]:active::-ms-thumb {
1372
+ transform: scale(1.25);
1373
+ }
1374
+
1375
+ :where(:scope), :host {
1376
+ --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");
1377
+ }
1378
+
1379
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
1380
+ background-image: var(--pico-icon-search);
1381
+ background-position: center left calc(var(--pico-form-element-spacing-horizontal) + .125rem);
1382
+ background-repeat: no-repeat;
1383
+ background-size: 1rem;
1384
+ padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
1385
+ }
1386
+
1387
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
1388
+ background-position: 1.125rem, right .75rem center;
1389
+ padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important;
1390
+ }
1391
+
1392
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="false"] {
1393
+ background-image: var(--pico-icon-search), var(--pico-icon-valid);
1394
+ }
1395
+
1396
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid="true"] {
1397
+ background-image: var(--pico-icon-search), var(--pico-icon-invalid);
1398
+ }
1399
+
1400
+ [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
1401
+ background-position: right 1.125rem center;
1402
+ }
1403
+
1404
+ [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
1405
+ background-position: right 1.125rem center, .75rem;
1406
+ }
1407
+
1408
+ :where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
1409
+ --pico-accordion-border-color: var(--pico-muted-border-color);
1410
+ --pico-accordion-active-summary-color: var(--pico-primary-hover);
1411
+ --pico-accordion-close-summary-color: var(--pico-color);
1412
+ --pico-accordion-open-summary-color: var(--pico-muted-color);
1413
+ }
1414
+
1415
+ details {
1416
+ margin-bottom: var(--pico-spacing);
1417
+ display: block;
1418
+ }
1419
+
1420
+ details summary {
1421
+ cursor: pointer;
1422
+ transition: color var(--pico-transition);
1423
+ line-height: 1rem;
1424
+ list-style-type: none;
1425
+ }
1426
+
1427
+ details summary:not([role]) {
1428
+ color: var(--pico-accordion-close-summary-color);
1429
+ }
1430
+
1431
+ details summary::-webkit-details-marker {
1432
+ display: none;
1433
+ }
1434
+
1435
+ details summary::marker {
1436
+ display: none;
1437
+ }
1438
+
1439
+ details summary::-moz-list-bullet {
1440
+ list-style-type: none;
1441
+ }
1442
+
1443
+ details summary:after {
1444
+ float: right;
1445
+ background-image: var(--pico-icon-chevron);
1446
+ content: "";
1447
+ width: 1rem;
1448
+ height: 1rem;
1449
+ transition: transform var(--pico-transition);
1450
+ background-position: 100%;
1451
+ background-repeat: no-repeat;
1452
+ background-size: 1rem;
1453
+ margin-inline-start: calc(var(--pico-spacing, 1rem) * .5);
1454
+ display: block;
1455
+ transform: rotate(-90deg);
1456
+ }
1457
+
1458
+ details summary:focus {
1459
+ outline: none;
1460
+ }
1461
+
1462
+ details summary:focus:not([role]) {
1463
+ color: var(--pico-accordion-active-summary-color);
1464
+ }
1465
+
1466
+ details summary:focus-visible:not([role]) {
1467
+ outline: var(--pico-outline-width) solid var(--pico-primary-focus);
1468
+ outline-offset: calc(var(--pico-spacing, 1rem) * .5);
1469
+ color: var(--pico-primary);
1470
+ }
1471
+
1472
+ details summary[role="button"] {
1473
+ text-align: start;
1474
+ width: 100%;
1475
+ }
1476
+
1477
+ details summary[role="button"]:after {
1478
+ height: calc(1rem * var(--pico-line-height, 1.5));
1479
+ }
1480
+
1481
+ details[open] > summary {
1482
+ margin-bottom: var(--pico-spacing);
1483
+ }
1484
+
1485
+ details[open] > summary:not([role]):not(:focus) {
1486
+ color: var(--pico-accordion-open-summary-color);
1487
+ }
1488
+
1489
+ details[open] > summary:after {
1490
+ transform: rotate(0);
1491
+ }
1492
+
1493
+ [dir="rtl"] details summary {
1494
+ text-align: end;
1495
+ }
1496
+
1497
+ [dir="rtl"] details summary:after {
1498
+ float: left;
1499
+ background-position: 0;
1500
+ }
1501
+
1502
+ :where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
1503
+ --pico-card-background-color: light-dark(var(--pico-background-color), #181c25);
1504
+ --pico-card-border-color: light-dark(var(--pico-muted-border-color), var(--pico-card-background-color));
1505
+ --pico-card-box-shadow: var(--pico-box-shadow);
1506
+ --pico-card-sectioning-background-color: light-dark(#fbfcfc, #1a1f28);
1507
+ }
1508
+
1509
+ article {
1510
+ margin-bottom: var(--pico-block-spacing-vertical);
1511
+ padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
1512
+ border-radius: var(--pico-border-radius);
1513
+ background: var(--pico-card-background-color);
1514
+ box-shadow: var(--pico-card-box-shadow);
1515
+ }
1516
+
1517
+ article > header, article > footer {
1518
+ margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
1519
+ margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
1520
+ padding: calc(var(--pico-block-spacing-vertical) * .66) var(--pico-block-spacing-horizontal);
1521
+ background-color: var(--pico-card-sectioning-background-color);
1522
+ }
1523
+
1524
+ article > header {
1525
+ margin-top: calc(var(--pico-block-spacing-vertical) * -1);
1526
+ margin-bottom: var(--pico-block-spacing-vertical);
1527
+ border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
1528
+ border-top-right-radius: var(--pico-border-radius);
1529
+ border-top-left-radius: var(--pico-border-radius);
1530
+ }
1531
+
1532
+ article > footer {
1533
+ margin-top: var(--pico-block-spacing-vertical);
1534
+ margin-bottom: calc(var(--pico-block-spacing-vertical) * -1);
1535
+ border-top: var(--pico-border-width) solid var(--pico-card-border-color);
1536
+ border-bottom-right-radius: var(--pico-border-radius);
1537
+ border-bottom-left-radius: var(--pico-border-radius);
1538
+ }
1539
+
1540
+ :where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
1541
+ --pico-dropdown-background-color: light-dark(#fff, #181c25);
1542
+ --pico-dropdown-border-color: light-dark(#eff1f4, #202632);
1543
+ --pico-dropdown-box-shadow: var(--pico-box-shadow);
1544
+ --pico-dropdown-color: var(--pico-color);
1545
+ --pico-dropdown-hover-background-color: light-dark(#eff1f4, #202632);
1546
+ }
1547
+
1548
+ details.dropdown {
1549
+ border-bottom: none;
1550
+ position: relative;
1551
+ }
1552
+
1553
+ details.dropdown > summary:after, details.dropdown > button:after, details.dropdown > a:after {
1554
+ width: 1rem;
1555
+ height: calc(1rem * var(--pico-line-height, 1.5));
1556
+ float: right;
1557
+ background-image: var(--pico-icon-chevron);
1558
+ content: "";
1559
+ background-position: 100%;
1560
+ background-repeat: no-repeat;
1561
+ background-size: 1rem;
1562
+ margin-inline-start: .25rem;
1563
+ display: block;
1564
+ transform: rotate(0) translate(.2rem);
1565
+ }
1566
+
1567
+ nav details.dropdown {
1568
+ margin-bottom: 0;
1569
+ }
1570
+
1571
+ details.dropdown > summary:not([role]) {
1572
+ height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
1573
+ padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
1574
+ border: var(--pico-border-width) solid var(--pico-form-element-border-color);
1575
+ border-radius: var(--pico-border-radius);
1576
+ background-color: var(--pico-form-element-background-color);
1577
+ color: var(--pico-form-element-placeholder-color);
1578
+ line-height: inherit;
1579
+ cursor: pointer;
1580
+ -webkit-user-select: none;
1581
+ -moz-user-select: none;
1582
+ user-select: none;
1583
+ transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
1584
+ }
1585
+
1586
+ details.dropdown > summary:not([role]):active, details.dropdown > summary:not([role]):focus {
1587
+ border-color: var(--pico-form-element-active-border-color);
1588
+ background-color: var(--pico-form-element-active-background-color);
1589
+ }
1590
+
1591
+ details.dropdown > summary:not([role]):focus {
1592
+ box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
1593
+ }
1594
+
1595
+ details.dropdown > summary:not([role]):focus-visible {
1596
+ outline: none;
1597
+ }
1598
+
1599
+ details.dropdown > summary:not([role])[aria-invalid="false"] {
1600
+ --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
1601
+ --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
1602
+ --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
1603
+ }
1604
+
1605
+ details.dropdown > summary:not([role])[aria-invalid="true"] {
1606
+ --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
1607
+ --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
1608
+ --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
1609
+ }
1610
+
1611
+ nav details.dropdown {
1612
+ margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
1613
+ display: inline-block;
1614
+ }
1615
+
1616
+ nav details.dropdown > summary:after {
1617
+ transform: rotate(0) translate(0);
1618
+ }
1619
+
1620
+ nav details.dropdown > summary:not([role]) {
1621
+ height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
1622
+ padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
1623
+ }
1624
+
1625
+ nav details.dropdown > summary:not([role]):focus-visible {
1626
+ box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
1627
+ }
1628
+
1629
+ details.dropdown > summary + ul {
1630
+ z-index: 99;
1631
+ width: 100%;
1632
+ min-width: fit-content;
1633
+ margin: 0;
1634
+ margin-top: var(--pico-outline-width);
1635
+ border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
1636
+ border-radius: var(--pico-border-radius);
1637
+ background-color: var(--pico-dropdown-background-color);
1638
+ box-shadow: var(--pico-dropdown-box-shadow);
1639
+ color: var(--pico-dropdown-color);
1640
+ white-space: nowrap;
1641
+ opacity: 0;
1642
+ transition: opacity var(--pico-transition), transform 0s ease-in-out 1s;
1643
+ flex-direction: column;
1644
+ padding: 0;
1645
+ display: flex;
1646
+ position: absolute;
1647
+ left: 0;
1648
+ }
1649
+
1650
+ details.dropdown > summary + ul[dir="rtl"] {
1651
+ left: auto;
1652
+ right: 0;
1653
+ }
1654
+
1655
+ details.dropdown > summary + ul li {
1656
+ width: 100%;
1657
+ padding: calc(var(--pico-form-element-spacing-vertical) * .5) var(--pico-form-element-spacing-horizontal);
1658
+ margin-bottom: 0;
1659
+ list-style: none;
1660
+ }
1661
+
1662
+ details.dropdown > summary + ul li:first-of-type {
1663
+ margin-top: calc(var(--pico-form-element-spacing-vertical) * .5);
1664
+ }
1665
+
1666
+ details.dropdown > summary + ul li:last-of-type {
1667
+ margin-bottom: calc(var(--pico-form-element-spacing-vertical) * .5);
1668
+ }
1669
+
1670
+ details.dropdown > summary + ul li a {
1671
+ margin: calc(var(--pico-form-element-spacing-vertical) * -.5) calc(var(--pico-form-element-spacing-horizontal) * -1);
1672
+ padding: calc(var(--pico-form-element-spacing-vertical) * .5) var(--pico-form-element-spacing-horizontal);
1673
+ color: var(--pico-dropdown-color);
1674
+ text-overflow: ellipsis;
1675
+ border-radius: 0;
1676
+ text-decoration: none;
1677
+ display: block;
1678
+ overflow: hidden;
1679
+ }
1680
+
1681
+ details.dropdown > summary + ul li a:hover, details.dropdown > summary + ul li a:focus, details.dropdown > summary + ul li a:active, details.dropdown > summary + ul li a:focus-visible, details.dropdown > summary + ul li a[aria-current]:not([aria-current="false"]) {
1682
+ background-color: var(--pico-dropdown-hover-background-color);
1683
+ }
1684
+
1685
+ details.dropdown > summary + ul li label {
1686
+ width: 100%;
1687
+ }
1688
+
1689
+ details.dropdown > summary + ul li:has(label):hover {
1690
+ background-color: var(--pico-dropdown-hover-background-color);
1691
+ }
1692
+
1693
+ details.dropdown[open] > summary {
1694
+ margin-bottom: 0;
1695
+ }
1696
+
1697
+ details.dropdown[open] > summary + ul {
1698
+ opacity: 1;
1699
+ transition: opacity var(--pico-transition), transform 0s ease-in-out 0s;
1700
+ transform: scaleY(1);
1701
+ }
1702
+
1703
+ details.dropdown[open] > summary:before {
1704
+ z-index: 1;
1705
+ content: "";
1706
+ cursor: default;
1707
+ background: none;
1708
+ width: 100vw;
1709
+ height: 100vh;
1710
+ display: block;
1711
+ position: fixed;
1712
+ inset: 0;
1713
+ }
1714
+
1715
+ label > details.dropdown {
1716
+ margin-top: calc(var(--pico-spacing) * .25);
1717
+ }
1718
+
1719
+ :where(:scope), :host {
1720
+ --pico-group-box-shadow: 0 0 0 #0000;
1721
+ --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
1722
+ --pico-group-box-shadow-focus-with-input: 0 0 0 .0625rem var(--pico-form-element-border-color);
1723
+ }
1724
+
1725
+ [role="search"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus), [role="group"]:has(button.secondary:focus, [type="submit"].secondary:focus, [type="button"].secondary:focus, [role="button"].secondary:focus) {
1726
+ --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
1727
+ }
1728
+
1729
+ [role="search"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus), [role="group"]:has(button.contrast:focus, [type="submit"].contrast:focus, [type="button"].contrast:focus, [role="button"].contrast:focus) {
1730
+ --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
1731
+ }
1732
+
1733
+ [role="search"], [role="group"] {
1734
+ width: 100%;
1735
+ margin-bottom: var(--pico-spacing);
1736
+ border-radius: var(--pico-border-radius);
1737
+ box-shadow: var(--pico-group-box-shadow, 0 0 0 #0000);
1738
+ vertical-align: middle;
1739
+ transition: box-shadow var(--pico-transition);
1740
+ display: inline-flex;
1741
+ position: relative;
1742
+ }
1743
+
1744
+ [role="search"] > *, [role="search"] input:not([type="checkbox"], [type="radio"]), [role="search"] select, [role="group"] > *, [role="group"] input:not([type="checkbox"], [type="radio"]), [role="group"] select {
1745
+ flex: auto;
1746
+ margin-bottom: 0;
1747
+ position: relative;
1748
+ }
1749
+
1750
+ [role="search"] > :not(:first-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="search"] select:not(:first-child), [role="group"] > :not(:first-child), [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="group"] select:not(:first-child) {
1751
+ border-top-left-radius: 0;
1752
+ border-bottom-left-radius: 0;
1753
+ margin-left: 0;
1754
+ }
1755
+
1756
+ [role="search"] > :not(:last-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child), [role="search"] select:not(:last-child), [role="group"] > :not(:last-child), [role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child), [role="group"] select:not(:last-child) {
1757
+ border-top-right-radius: 0;
1758
+ border-bottom-right-radius: 0;
1759
+ }
1760
+
1761
+ [role="search"] > :focus, [role="search"] input:not([type="checkbox"], [type="radio"]):focus, [role="search"] select:focus, [role="group"] > :focus, [role="group"] input:not([type="checkbox"], [type="radio"]):focus, [role="group"] select:focus {
1762
+ z-index: 2;
1763
+ }
1764
+
1765
+ [role="search"] button:not(:first-child), [role="search"] [type="submit"]:not(:first-child), [role="search"] [type="reset"]:not(:first-child), [role="search"] [type="button"]:not(:first-child), [role="search"] [role="button"]:not(:first-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="search"] select:not(:first-child), [role="group"] button:not(:first-child), [role="group"] [type="submit"]:not(:first-child), [role="group"] [type="reset"]:not(:first-child), [role="group"] [type="button"]:not(:first-child), [role="group"] [role="button"]:not(:first-child), [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="group"] select:not(:first-child) {
1766
+ margin-left: calc(var(--pico-border-width) * -1);
1767
+ }
1768
+
1769
+ [role="search"] button, [role="search"] [type="submit"], [role="search"] [type="reset"], [role="search"] [type="button"], [role="search"] [role="button"], [role="group"] button, [role="group"] [type="submit"], [role="group"] [type="reset"], [role="group"] [type="button"], [role="group"] [role="button"] {
1770
+ width: auto;
1771
+ }
1772
+
1773
+ @supports selector(:has(*)) {
1774
+ [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus), [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
1775
+ --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button);
1776
+ }
1777
+
1778
+ [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), [role="search"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select, [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) input:not([type="checkbox"], [type="radio"]), [role="group"]:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) select {
1779
+ border-color: #0000;
1780
+ }
1781
+
1782
+ [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus), [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
1783
+ --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input);
1784
+ }
1785
+
1786
+ [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"], [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button, [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="submit"], [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [type="button"], [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) [role="button"] {
1787
+ --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border);
1788
+ --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border);
1789
+ }
1790
+
1791
+ [role="search"] button:focus, [role="search"] [type="submit"]:focus, [role="search"] [type="reset"]:focus, [role="search"] [type="button"]:focus, [role="search"] [role="button"]:focus, [role="group"] button:focus, [role="group"] [type="submit"]:focus, [role="group"] [type="reset"]:focus, [role="group"] [type="button"]:focus, [role="group"] [role="button"]:focus {
1792
+ box-shadow: none;
1793
+ }
1794
+ }
1795
+
1796
+ [role="search"] > :first-child {
1797
+ border-top-left-radius: 5rem;
1798
+ border-bottom-left-radius: 5rem;
1799
+ }
1800
+
1801
+ [role="search"] > :last-child {
1802
+ border-top-right-radius: 5rem;
1803
+ border-bottom-right-radius: 5rem;
1804
+ }
1805
+
1806
+ :where(:scope), :host {
1807
+ --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");
1808
+ }
1809
+
1810
+ :where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
1811
+ --pico-loading-spinner-opacity: .5;
1812
+ }
1813
+
1814
+ [aria-busy="true"]:not(input, select, textarea, html, form):not(:where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])) {
1815
+ white-space: nowrap;
1816
+ }
1817
+
1818
+ [aria-busy="true"]:not(input, select, textarea, html, form):before {
1819
+ background-image: var(--pico-icon-loading);
1820
+ content: "";
1821
+ vertical-align: -.125em;
1822
+ background-repeat: no-repeat;
1823
+ background-size: 1em;
1824
+ width: 1em;
1825
+ height: 1em;
1826
+ display: inline-block;
1827
+ }
1828
+
1829
+ [aria-busy="true"]:not(input, select, textarea, html, form):not(:empty):before {
1830
+ margin-inline-end: calc(var(--pico-spacing) * .5);
1831
+ }
1832
+
1833
+ [aria-busy="true"]:not(input, select, textarea, html, form):empty {
1834
+ text-align: center;
1835
+ }
1836
+
1837
+ button[aria-busy="true"], [type="submit"][aria-busy="true"], [type="button"][aria-busy="true"], [type="reset"][aria-busy="true"], [role="button"][aria-busy="true"], a[aria-busy="true"] {
1838
+ pointer-events: none;
1839
+ }
1840
+
1841
+ button, [type="submit"], [type="button"], [type="reset"], [role="button"] {
1842
+ &[aria-busy="true"]:not(:empty) {
1843
+ color: #0000;
1844
+ position: relative;
1845
+
1846
+ & > * {
1847
+ opacity: 0;
1848
+ }
1849
+
1850
+ &:before {
1851
+ margin: auto;
1852
+ position: absolute;
1853
+ inset: 0;
1854
+ }
1855
+ }
1856
+ }
1857
+
1858
+ :where(:scope), :host {
1859
+ --pico-modal-overlay-backdrop-filter: blur(.375rem);
1860
+ --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");
1861
+ }
1862
+
1863
+ :where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
1864
+ --pico-modal-overlay-background-color: light-dark(#e8eaedbf, #08090abf);
1865
+ }
1866
+
1867
+ :scope, :host {
1868
+ --pico-scrollbar-width: 0px;
1869
+ }
1870
+
1871
+ dialog {
1872
+ z-index: 999;
1873
+ width: inherit;
1874
+ min-width: 100%;
1875
+ height: inherit;
1876
+ min-height: 100%;
1877
+ backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
1878
+ background-color: var(--pico-modal-overlay-background-color);
1879
+ color: var(--pico-color);
1880
+ border: 0;
1881
+ justify-content: center;
1882
+ align-items: center;
1883
+ padding: 0;
1884
+ display: flex;
1885
+ position: fixed;
1886
+ inset: 0;
1887
+ }
1888
+
1889
+ dialog > article {
1890
+ width: 100%;
1891
+ max-height: calc(100vh - var(--pico-spacing) * 2);
1892
+ margin: var(--pico-spacing);
1893
+ overflow: auto;
1894
+ }
1895
+
1896
+ @media (width >= 576px) {
1897
+ dialog > article {
1898
+ max-width: 510px;
1899
+ }
1900
+ }
1901
+
1902
+ @media (width >= 768px) {
1903
+ dialog > article {
1904
+ max-width: 700px;
1905
+ }
1906
+ }
1907
+
1908
+ dialog > article > header > * {
1909
+ margin-bottom: 0;
1910
+ }
1911
+
1912
+ dialog > article > header .close, dialog > article > header :is(a, button)[rel="prev"] {
1913
+ margin: 0;
1914
+ margin-left: var(--pico-spacing);
1915
+ float: right;
1916
+ padding: 0;
1917
+ }
1918
+
1919
+ dialog > article > footer {
1920
+ text-align: end;
1921
+ }
1922
+
1923
+ dialog > article > footer button, dialog > article > footer [role="button"] {
1924
+ margin-bottom: 0;
1925
+ }
1926
+
1927
+ dialog > article > footer button:not(:first-of-type), dialog > article > footer [role="button"]:not(:first-of-type) {
1928
+ margin-left: calc(var(--pico-spacing) * .5);
1929
+ }
1930
+
1931
+ dialog > article .close, dialog > article :is(a, button)[rel="prev"] {
1932
+ width: 1rem;
1933
+ height: 1rem;
1934
+ margin-top: calc(var(--pico-spacing) * -1);
1935
+ margin-bottom: var(--pico-spacing);
1936
+ background-image: var(--pico-icon-close);
1937
+ opacity: .5;
1938
+ transition: opacity var(--pico-transition);
1939
+ background-color: #0000;
1940
+ background-position: 50%;
1941
+ background-repeat: no-repeat;
1942
+ background-size: auto 1rem;
1943
+ border: none;
1944
+ margin-left: auto;
1945
+ display: block;
1946
+ }
1947
+
1948
+ dialog > article .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus), dialog > article :is(a, button)[rel="prev"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
1949
+ opacity: 1;
1950
+ }
1951
+
1952
+ dialog:not([open]), dialog[open="false"] {
1953
+ display: none;
1954
+ }
1955
+
1956
+ .modal-is-open {
1957
+ padding-right: var(--pico-scrollbar-width, 0px);
1958
+ pointer-events: none;
1959
+ touch-action: none;
1960
+ overflow: hidden;
1961
+ }
1962
+
1963
+ .modal-is-open dialog {
1964
+ pointer-events: auto;
1965
+ touch-action: auto;
1966
+ }
1967
+
1968
+ :where(.modal-is-opening, .modal-is-closing) dialog, :where(.modal-is-opening, .modal-is-closing) dialog > article {
1969
+ animation-duration: .2s;
1970
+ animation-timing-function: ease-in-out;
1971
+ animation-fill-mode: both;
1972
+ }
1973
+
1974
+ :where(.modal-is-opening, .modal-is-closing) dialog {
1975
+ animation-name: modal-overlay;
1976
+ animation-duration: .8s;
1977
+ }
1978
+
1979
+ :where(.modal-is-opening, .modal-is-closing) dialog > article {
1980
+ animation-name: modal;
1981
+ animation-delay: .2s;
1982
+ }
1983
+
1984
+ .modal-is-closing dialog, .modal-is-closing dialog > article {
1985
+ animation-direction: reverse;
1986
+ animation-delay: 0s;
1987
+ }
1988
+
1989
+ @keyframes modal-overlay {
1990
+ 0% {
1991
+ backdrop-filter: none;
1992
+ background-color: #0000;
1993
+ }
1994
+ }
1995
+
1996
+ @keyframes modal {
1997
+ 0% {
1998
+ opacity: 0;
1999
+ transform: translateY(-100%);
2000
+ }
2001
+ }
2002
+
2003
+ :where(:scope), :host {
2004
+ --pico-nav-element-spacing-horizontal: .5rem;
2005
+ --pico-nav-breadcrumb-divider: ">";
2006
+ }
2007
+
2008
+ :where(nav li):before {
2009
+ float: left;
2010
+ content: "​";
2011
+ }
2012
+
2013
+ nav, nav ul {
2014
+ display: flex;
2015
+ }
2016
+
2017
+ nav {
2018
+ justify-content: space-between;
2019
+ overflow: visible;
2020
+ }
2021
+
2022
+ nav ol, nav ul {
2023
+ align-items: center;
2024
+ margin-bottom: 0;
2025
+ padding: 0;
2026
+ list-style: none;
2027
+ }
2028
+
2029
+ nav ol:first-of-type, nav ul:first-of-type {
2030
+ margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
2031
+ }
2032
+
2033
+ nav ol:last-of-type, nav ul:last-of-type {
2034
+ margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1);
2035
+ }
2036
+
2037
+ nav li {
2038
+ padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal);
2039
+ margin: 0;
2040
+ display: inline-block;
2041
+ }
2042
+
2043
+ nav li :where(a, [role="link"]) {
2044
+ margin: calc(var(--pico-nav-link-spacing-vertical) * -1) calc(var(--pico-nav-link-spacing-horizontal) * -1);
2045
+ padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);
2046
+ border-radius: var(--pico-border-radius);
2047
+ display: inline-block;
2048
+ }
2049
+
2050
+ nav li :where(a, [role="link"]):not(:hover) {
2051
+ text-decoration: none;
2052
+ }
2053
+
2054
+ nav li button, nav li [role="button"], nav li [type="button"], nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), nav li select {
2055
+ height: auto;
2056
+ margin-right: inherit;
2057
+ margin-bottom: 0;
2058
+ margin-left: inherit;
2059
+ padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2) var(--pico-nav-link-spacing-horizontal);
2060
+ }
2061
+
2062
+ nav[aria-label="breadcrumb"] {
2063
+ justify-content: start;
2064
+ align-items: center;
2065
+ }
2066
+
2067
+ nav[aria-label="breadcrumb"] ul li:not(:first-child) {
2068
+ margin-inline-start: var(--pico-nav-link-spacing-horizontal);
2069
+ }
2070
+
2071
+ nav[aria-label="breadcrumb"] ul li a {
2072
+ margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 0;
2073
+ margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) * -1);
2074
+ }
2075
+
2076
+ nav[aria-label="breadcrumb"] ul li:not(:last-child):after {
2077
+ width: calc(var(--pico-nav-link-spacing-horizontal) * 4);
2078
+ margin: 0 calc(var(--pico-nav-link-spacing-horizontal) * -1);
2079
+ content: var(--pico-nav-breadcrumb-divider);
2080
+ color: var(--pico-muted-color);
2081
+ text-align: center;
2082
+ white-space: nowrap;
2083
+ text-decoration: none;
2084
+ display: inline-block;
2085
+ position: absolute;
2086
+ }
2087
+
2088
+ nav[aria-label="breadcrumb"] a[aria-current]:not([aria-current="false"]) {
2089
+ color: inherit;
2090
+ pointer-events: none;
2091
+ background-color: #0000;
2092
+ text-decoration: none;
2093
+ }
2094
+
2095
+ aside nav, aside ol, aside ul, aside li {
2096
+ display: block;
2097
+ }
2098
+
2099
+ aside li {
2100
+ padding: calc(var(--pico-nav-element-spacing-vertical) * .5) var(--pico-nav-element-spacing-horizontal);
2101
+ }
2102
+
2103
+ aside li a {
2104
+ display: block;
2105
+ }
2106
+
2107
+ aside li [role="button"] {
2108
+ margin: inherit;
2109
+ }
2110
+
2111
+ [dir="rtl"] nav[aria-label="breadcrumb"] ul li:not(:last-child):after {
2112
+ content: "\\";
2113
+ }
2114
+
2115
+ :where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
2116
+ --pico-progress-background-color: light-dark(#dfe3eb, #202632);
2117
+ --pico-progress-color: var(--pico-primary-background);
2118
+ }
2119
+
2120
+ progress {
2121
+ vertical-align: baseline;
2122
+ -webkit-appearance: none;
2123
+ -moz-appearance: none;
2124
+ appearance: none;
2125
+ width: 100%;
2126
+ height: .5rem;
2127
+ margin-bottom: calc(var(--pico-spacing) * .5);
2128
+ border-radius: var(--pico-border-radius);
2129
+ background-color: var(--pico-progress-background-color);
2130
+ color: var(--pico-progress-color);
2131
+ border: 0;
2132
+ display: inline-block;
2133
+ overflow: hidden;
2134
+ }
2135
+
2136
+ progress::-webkit-progress-bar {
2137
+ border-radius: var(--pico-border-radius);
2138
+ background: none;
2139
+ }
2140
+
2141
+ progress[value]::-webkit-progress-value {
2142
+ background-color: var(--pico-progress-color);
2143
+ -webkit-transition: inline-size var(--pico-transition);
2144
+ transition: inline-size var(--pico-transition);
2145
+ }
2146
+
2147
+ progress::-moz-progress-bar {
2148
+ background-color: var(--pico-progress-color);
2149
+ }
2150
+
2151
+ @media (prefers-reduced-motion: no-preference) {
2152
+ progress:indeterminate {
2153
+ background: var(--pico-progress-background-color) linear-gradient(to right, var(--pico-progress-color) 30%, var(--pico-progress-background-color) 30%) top left/150% 150% no-repeat;
2154
+ animation: 1s linear infinite progress-indeterminate;
2155
+ }
2156
+
2157
+ progress:indeterminate[value]::-webkit-progress-value {
2158
+ background-color: #0000;
2159
+ }
2160
+
2161
+ progress:indeterminate::-moz-progress-bar {
2162
+ background-color: #0000;
2163
+ }
2164
+
2165
+ [dir="rtl"] progress:indeterminate {
2166
+ animation-direction: reverse;
2167
+ }
2168
+ }
2169
+
2170
+ @keyframes progress-indeterminate {
2171
+ 0% {
2172
+ background-position: 200% 0;
2173
+ }
2174
+
2175
+ to {
2176
+ background-position: -200% 0;
2177
+ }
2178
+ }
2179
+
2180
+ :where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
2181
+ --pico-tooltip-background-color: var(--pico-contrast-background);
2182
+ --pico-tooltip-color: var(--pico-contrast-inverse);
2183
+ }
2184
+
2185
+ [data-tooltip] {
2186
+ position: relative;
2187
+ }
2188
+
2189
+ [data-tooltip]:not(a, button, input, [role="button"]) {
2190
+ cursor: help;
2191
+ border-bottom: 1px dotted;
2192
+ text-decoration: none;
2193
+ }
2194
+
2195
+ [data-tooltip][data-placement="top"]:before, [data-tooltip][data-placement="top"]:after, [data-tooltip]:before, [data-tooltip]:after {
2196
+ z-index: 99;
2197
+ border-radius: var(--pico-border-radius);
2198
+ background: var(--pico-tooltip-background-color);
2199
+ content: attr(data-tooltip);
2200
+ color: var(--pico-tooltip-color);
2201
+ font-style: normal;
2202
+ font-weight: var(--pico-font-weight);
2203
+ text-overflow: ellipsis;
2204
+ white-space: nowrap;
2205
+ opacity: 0;
2206
+ pointer-events: none;
2207
+ padding: .25rem .5rem;
2208
+ font-size: .875rem;
2209
+ text-decoration: none;
2210
+ display: block;
2211
+ position: absolute;
2212
+ bottom: 100%;
2213
+ left: 50%;
2214
+ overflow: hidden;
2215
+ transform: translate(-50%, -.25rem);
2216
+ }
2217
+
2218
+ [data-tooltip][data-placement="top"]:after, [data-tooltip]:after {
2219
+ content: "";
2220
+ color: var(--pico-tooltip-background-color);
2221
+ background-color: #0000;
2222
+ border-top: .3rem solid;
2223
+ border-left: .3rem solid #0000;
2224
+ border-right: .3rem solid #0000;
2225
+ border-radius: 0;
2226
+ padding: 0;
2227
+ transform: translate(-50%);
2228
+ }
2229
+
2230
+ [data-tooltip][data-placement="bottom"]:before, [data-tooltip][data-placement="bottom"]:after {
2231
+ top: 100%;
2232
+ bottom: auto;
2233
+ transform: translate(-50%, .25rem);
2234
+ }
2235
+
2236
+ [data-tooltip][data-placement="bottom"]:after {
2237
+ border: .3rem solid #0000;
2238
+ border-bottom-color: currentColor;
2239
+ transform: translate(-50%, -.3rem);
2240
+ }
2241
+
2242
+ [data-tooltip][data-placement="left"]:before, [data-tooltip][data-placement="left"]:after {
2243
+ inset: 50% 100% auto auto;
2244
+ transform: translate(-.25rem, -50%);
2245
+ }
2246
+
2247
+ [data-tooltip][data-placement="left"]:after {
2248
+ border: .3rem solid #0000;
2249
+ border-left-color: currentColor;
2250
+ transform: translate(.3rem, -50%);
2251
+ }
2252
+
2253
+ [data-tooltip][data-placement="right"]:before, [data-tooltip][data-placement="right"]:after {
2254
+ inset: 50% auto auto 100%;
2255
+ transform: translate(.25rem, -50%);
2256
+ }
2257
+
2258
+ [data-tooltip][data-placement="right"]:after {
2259
+ border: .3rem solid #0000;
2260
+ border-right-color: currentColor;
2261
+ transform: translate(-.3rem, -50%);
2262
+ }
2263
+
2264
+ [data-tooltip]:focus:before, [data-tooltip]:focus:after, [data-tooltip]:hover:before, [data-tooltip]:hover:after {
2265
+ opacity: 1;
2266
+ }
2267
+
2268
+ @media (hover: hover) and (pointer: fine) {
2269
+ [data-tooltip]:focus:before, [data-tooltip]:focus:after, [data-tooltip]:hover:before, [data-tooltip]:hover:after {
2270
+ --pico-tooltip-slide-to: translate(-50%, -.25rem);
2271
+ opacity: 0;
2272
+ animation-name: tooltip-slide;
2273
+ animation-duration: .2s;
2274
+ animation-fill-mode: forwards;
2275
+ transform: translate(-50%, .75rem);
2276
+ }
2277
+
2278
+ [data-tooltip]:focus:after, [data-tooltip]:hover:after {
2279
+ --pico-tooltip-caret-slide-to: translate(-50%, 0rem);
2280
+ animation-name: tooltip-caret-slide;
2281
+ transform: translate(-50%, -.25rem);
2282
+ }
2283
+
2284
+ [data-tooltip][data-placement="bottom"]:focus:before, [data-tooltip][data-placement="bottom"]:focus:after, [data-tooltip][data-placement="bottom"]:hover:before, [data-tooltip][data-placement="bottom"]:hover:after {
2285
+ --pico-tooltip-slide-to: translate(-50%, .25rem);
2286
+ animation-name: tooltip-slide;
2287
+ transform: translate(-50%, -.75rem);
2288
+ }
2289
+
2290
+ [data-tooltip][data-placement="bottom"]:focus:after, [data-tooltip][data-placement="bottom"]:hover:after {
2291
+ --pico-tooltip-caret-slide-to: translate(-50%, -.3rem);
2292
+ animation-name: tooltip-caret-slide;
2293
+ transform: translate(-50%, -.5rem);
2294
+ }
2295
+
2296
+ [data-tooltip][data-placement="left"]:focus:before, [data-tooltip][data-placement="left"]:focus:after, [data-tooltip][data-placement="left"]:hover:before, [data-tooltip][data-placement="left"]:hover:after {
2297
+ --pico-tooltip-slide-to: translate(-.25rem, -50%);
2298
+ animation-name: tooltip-slide;
2299
+ transform: translate(.75rem, -50%);
2300
+ }
2301
+
2302
+ [data-tooltip][data-placement="left"]:focus:after, [data-tooltip][data-placement="left"]:hover:after {
2303
+ --pico-tooltip-caret-slide-to: translate(.3rem, -50%);
2304
+ animation-name: tooltip-caret-slide;
2305
+ transform: translate(.05rem, -50%);
2306
+ }
2307
+
2308
+ [data-tooltip][data-placement="right"]:focus:before, [data-tooltip][data-placement="right"]:focus:after, [data-tooltip][data-placement="right"]:hover:before, [data-tooltip][data-placement="right"]:hover:after {
2309
+ --pico-tooltip-slide-to: translate(.25rem, -50%);
2310
+ animation-name: tooltip-slide;
2311
+ transform: translate(-.75rem, -50%);
2312
+ }
2313
+
2314
+ [data-tooltip][data-placement="right"]:focus:after, [data-tooltip][data-placement="right"]:hover:after {
2315
+ --pico-tooltip-caret-slide-to: translate(-.3rem, -50%);
2316
+ animation-name: tooltip-caret-slide;
2317
+ transform: translate(-.05rem, -50%);
2318
+ }
2319
+ }
2320
+
2321
+ @keyframes tooltip-slide {
2322
+ to {
2323
+ transform: var(--pico-tooltip-slide-to);
2324
+ opacity: 1;
2325
+ }
2326
+ }
2327
+
2328
+ @keyframes tooltip-caret-slide {
2329
+ 50% {
2330
+ opacity: 0;
2331
+ }
2332
+
2333
+ to {
2334
+ transform: var(--pico-tooltip-caret-slide-to);
2335
+ opacity: 1;
2336
+ }
2337
+ }
2338
+
2339
+ [aria-controls] {
2340
+ cursor: pointer;
2341
+ }
2342
+
2343
+ [aria-disabled="true"], [disabled] {
2344
+ cursor: not-allowed;
2345
+ }
2346
+
2347
+ [dir="rtl"] {
2348
+ direction: rtl;
2349
+ }
2350
+
2351
+ @media (prefers-reduced-motion: reduce) {
2352
+ :not([aria-busy="true"]):not(.unreduce-motion), :not([aria-busy="true"]):before, :not([aria-busy="true"]):after {
2353
+ background-attachment: initial !important;
2354
+ scroll-behavior: auto !important;
2355
+ transition-duration: 0s !important;
2356
+ transition-delay: 0s !important;
2357
+ animation-duration: 1ms !important;
2358
+ animation-iteration-count: 1 !important;
2359
+ animation-delay: -1ms !important;
2360
+ }
2361
+ }
2362
+
2363
+ body > header, body > main, body > footer {
2364
+ padding-block: var(--pico-block-spacing-vertical);
2365
+ }