@anyblades/blades 3.1.0-beta.4 → 3.1.0-beta.6

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