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