@anyblades/blades 3.0.0 → 3.1.0-alpha.2

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