@anyblades/pico 2.1.1-alpha.2 → 2.2.0-alpha

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 (5) hide show
  1. package/css/pico.blades.css +3682 -0
  2. package/css/pico.blades.min.css +110 -0
  3. package/css/postcss.config.js +1 -0
  4. package/package.json +3 -1
  5. package/src/pico.blades.css +7 -0
package/css/pico.blades.css ADDED
@@ -0,0 +1,3682 @@
1
+ @charset "UTF-8";
2
+ /*!
3
+ * Pico+Blades CSS ✨🥷 v2.2.0-alpha
4
+ * Copyright 2026 - Licensed under MIT
5
+ */
6
+ /*!
7
+ * Pico CSS ✨ v2.1.1 (https://picocss.com)
8
+ * Copyright 2019-2025 - Licensed under MIT
9
+ */
10
+ /**
11
+ * Variables
12
+ */
13
+ :root,
14
+ :host {
15
+ --pico-font-family-emoji:
16
+ "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
17
+ --pico-font-family-sans-serif:
18
+ system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue",
19
+ sans-serif, var(--pico-font-family-emoji);
20
+ --pico-font-family-monospace:
21
+ ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace,
22
+ var(--pico-font-family-emoji);
23
+ --pico-font-family: var(--pico-font-family-sans-serif);
24
+ --pico-line-height: 1.5;
25
+ --pico-font-weight: 400;
26
+ --pico-font-size: 100%;
27
+ --pico-text-underline-offset: 0.1rem;
28
+ --pico-border-radius: 0.25rem;
29
+ --pico-border-width: 0.0625rem;
30
+ --pico-outline-width: 0.125rem;
31
+ --pico-transition: 0.2s ease-in-out;
32
+ --pico-spacing: 1rem;
33
+ --pico-typography-spacing-vertical: 1rem;
34
+ --pico-block-spacing-vertical: var(--pico-spacing);
35
+ --pico-block-spacing-horizontal: var(--pico-spacing);
36
+ --pico-grid-column-gap: var(--pico-spacing);
37
+ --pico-grid-row-gap: var(--pico-spacing);
38
+ --pico-form-element-spacing-vertical: 0.75rem;
39
+ --pico-form-element-spacing-horizontal: 1rem;
40
+ --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
41
+ --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
42
+ var(--pico-primary-focus);
43
+ --pico-group-box-shadow-focus-with-input: 0 0 0 0.0625rem var(--pico-form-element-border-color);
44
+ --pico-modal-overlay-backdrop-filter: blur(0.375rem);
45
+ --pico-nav-element-spacing-vertical: 1rem;
46
+ --pico-nav-element-spacing-horizontal: 0.5rem;
47
+ --pico-nav-link-spacing-vertical: 0.5rem;
48
+ --pico-nav-link-spacing-horizontal: 0.5rem;
49
+ --pico-nav-breadcrumb-divider: ">";
50
+ --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");
51
+ --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");
52
+ --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");
53
+ --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");
54
+ --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");
55
+ --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");
56
+ --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");
57
+ --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");
58
+ }
59
+ @media (min-width: 576px) {
60
+ :root,
61
+ :host {
62
+ --pico-font-size: 106.25%;
63
+ }
64
+ }
65
+ @media (min-width: 768px) {
66
+ :root,
67
+ :host {
68
+ --pico-font-size: 112.5%;
69
+ }
70
+ }
71
+ @media (min-width: 1024px) {
72
+ :root,
73
+ :host {
74
+ --pico-font-size: 118.75%;
75
+ }
76
+ }
77
+ @media (min-width: 1280px) {
78
+ :root,
79
+ :host {
80
+ --pico-font-size: 125%;
81
+ }
82
+ }
83
+ @media (min-width: 1536px) {
84
+ :root,
85
+ :host {
86
+ --pico-font-size: 131.25%;
87
+ }
88
+ }
89
+ a {
90
+ --pico-text-decoration: underline;
91
+ }
92
+ a.secondary,
93
+ a.contrast {
94
+ --pico-text-decoration: underline;
95
+ }
96
+ small {
97
+ --pico-font-size: 0.875em;
98
+ }
99
+ h1,
100
+ h2,
101
+ h3,
102
+ h4,
103
+ h5,
104
+ h6 {
105
+ --pico-font-weight: 700;
106
+ }
107
+ h1 {
108
+ --pico-font-size: 2rem;
109
+ --pico-line-height: 1.125;
110
+ --pico-typography-spacing-top: 3rem;
111
+ }
112
+ h2 {
113
+ --pico-font-size: 1.75rem;
114
+ --pico-line-height: 1.15;
115
+ --pico-typography-spacing-top: 2.625rem;
116
+ }
117
+ h3 {
118
+ --pico-font-size: 1.5rem;
119
+ --pico-line-height: 1.175;
120
+ --pico-typography-spacing-top: 2.25rem;
121
+ }
122
+ h4 {
123
+ --pico-font-size: 1.25rem;
124
+ --pico-line-height: 1.2;
125
+ --pico-typography-spacing-top: 1.874rem;
126
+ }
127
+ h5 {
128
+ --pico-font-size: 1.125rem;
129
+ --pico-line-height: 1.225;
130
+ --pico-typography-spacing-top: 1.6875rem;
131
+ }
132
+ h6 {
133
+ --pico-font-size: 1rem;
134
+ --pico-line-height: 1.25;
135
+ --pico-typography-spacing-top: 1.5rem;
136
+ }
137
+ thead th,
138
+ thead td,
139
+ tfoot th,
140
+ tfoot td {
141
+ --pico-font-weight: 600;
142
+ --pico-border-width: 0.1875rem;
143
+ }
144
+ pre,
145
+ code,
146
+ kbd,
147
+ samp {
148
+ --pico-font-family: var(--pico-font-family-monospace);
149
+ }
150
+ kbd {
151
+ --pico-font-weight: bolder;
152
+ }
153
+ input:not(
154
+ [type="submit"],
155
+ [type="button"],
156
+ [type="reset"],
157
+ [type="checkbox"],
158
+ [type="radio"],
159
+ [type="file"]
160
+ ),
161
+ :where(select, textarea) {
162
+ --pico-outline-width: 0.0625rem;
163
+ }
164
+ [type="search"] {
165
+ --pico-border-radius: 5rem;
166
+ }
167
+ [type="checkbox"],
168
+ [type="radio"] {
169
+ --pico-border-width: 0.125rem;
170
+ }
171
+ [type="checkbox"][role="switch"] {
172
+ --pico-border-width: 0.1875rem;
173
+ }
174
+ details.dropdown summary:not([role="button"]) {
175
+ --pico-outline-width: 0.0625rem;
176
+ }
177
+ nav details.dropdown summary:focus-visible {
178
+ --pico-outline-width: 0.125rem;
179
+ }
180
+ [role="search"] {
181
+ --pico-border-radius: 5rem;
182
+ }
183
+ [role="search"]:has(
184
+ button.secondary:focus,
185
+ [type="submit"].secondary:focus,
186
+ [type="button"].secondary:focus,
187
+ [role="button"].secondary:focus
188
+ ),
189
+ [role="group"]:has(
190
+ button.secondary:focus,
191
+ [type="submit"].secondary:focus,
192
+ [type="button"].secondary:focus,
193
+ [role="button"].secondary:focus
194
+ ) {
195
+ --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
196
+ var(--pico-secondary-focus);
197
+ }
198
+ [role="search"]:has(
199
+ button.contrast:focus,
200
+ [type="submit"].contrast:focus,
201
+ [type="button"].contrast:focus,
202
+ [role="button"].contrast:focus
203
+ ),
204
+ [role="group"]:has(
205
+ button.contrast:focus,
206
+ [type="submit"].contrast:focus,
207
+ [type="button"].contrast:focus,
208
+ [role="button"].contrast:focus
209
+ ) {
210
+ --pico-group-box-shadow-focus-with-button: 0 0 0 var(--pico-outline-width)
211
+ var(--pico-contrast-focus);
212
+ }
213
+ [role="search"] button,
214
+ [role="search"] [type="submit"],
215
+ [role="search"] [type="button"],
216
+ [role="search"] [role="button"],
217
+ [role="group"] button,
218
+ [role="group"] [type="submit"],
219
+ [role="group"] [type="button"],
220
+ [role="group"] [role="button"] {
221
+ --pico-form-element-spacing-horizontal: 2rem;
222
+ }
223
+ details summary[role="button"]:not(.outline)::after {
224
+ filter: brightness(0) invert(1);
225
+ }
226
+ [aria-busy="true"]:not(input, select, textarea):is(
227
+ button,
228
+ [type="submit"],
229
+ [type="button"],
230
+ [type="reset"],
231
+ [role="button"]
232
+ ):not(.outline)::before {
233
+ filter: brightness(0) invert(1);
234
+ }
235
+ /**
236
+ * Color schemes
237
+ */
238
+ [data-theme="light"],
239
+ :root:not([data-theme="dark"]),
240
+ :host(:not([data-theme="dark"])) {
241
+ color-scheme: light;
242
+ --pico-background-color: #fff;
243
+ --pico-color: #373c44;
244
+ --pico-text-selection-color: rgba(2, 154, 232, 0.25);
245
+ --pico-muted-color: #646b79;
246
+ --pico-muted-border-color: rgb(231, 234, 239.5);
247
+ --pico-primary: #0172ad;
248
+ --pico-primary-background: #0172ad;
249
+ --pico-primary-border: var(--pico-primary-background);
250
+ --pico-primary-underline: rgba(1, 114, 173, 0.5);
251
+ --pico-primary-hover: #015887;
252
+ --pico-primary-hover-background: #02659a;
253
+ --pico-primary-hover-border: var(--pico-primary-hover-background);
254
+ --pico-primary-hover-underline: var(--pico-primary-hover);
255
+ --pico-primary-focus: rgba(2, 154, 232, 0.5);
256
+ --pico-primary-inverse: #fff;
257
+ --pico-secondary: #5d6b89;
258
+ --pico-secondary-background: #525f7a;
259
+ --pico-secondary-border: var(--pico-secondary-background);
260
+ --pico-secondary-underline: rgba(93, 107, 137, 0.5);
261
+ --pico-secondary-hover: #48536b;
262
+ --pico-secondary-hover-background: #48536b;
263
+ --pico-secondary-hover-border: var(--pico-secondary-hover-background);
264
+ --pico-secondary-hover-underline: var(--pico-secondary-hover);
265
+ --pico-secondary-focus: rgba(93, 107, 137, 0.25);
266
+ --pico-secondary-inverse: #fff;
267
+ --pico-contrast: #181c25;
268
+ --pico-contrast-background: #181c25;
269
+ --pico-contrast-border: var(--pico-contrast-background);
270
+ --pico-contrast-underline: rgba(24, 28, 37, 0.5);
271
+ --pico-contrast-hover: #000;
272
+ --pico-contrast-hover-background: #000;
273
+ --pico-contrast-hover-border: var(--pico-contrast-hover-background);
274
+ --pico-contrast-hover-underline: var(--pico-secondary-hover);
275
+ --pico-contrast-focus: rgba(93, 107, 137, 0.25);
276
+ --pico-contrast-inverse: #fff;
277
+ --pico-box-shadow:
278
+ 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698),
279
+ 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024),
280
+ 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03),
281
+ 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036),
282
+ 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302),
283
+ 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
284
+ --pico-h1-color: #2d3138;
285
+ --pico-h2-color: #373c44;
286
+ --pico-h3-color: #424751;
287
+ --pico-h4-color: #4d535e;
288
+ --pico-h5-color: #5c6370;
289
+ --pico-h6-color: #646b79;
290
+ --pico-mark-background-color: rgb(252.5, 230.5, 191.5);
291
+ --pico-mark-color: #0f1114;
292
+ --pico-ins-color: rgb(28.5, 105.5, 84);
293
+ --pico-del-color: rgb(136, 56.5, 53);
294
+ --pico-blockquote-border-color: var(--pico-muted-border-color);
295
+ --pico-blockquote-footer-color: var(--pico-muted-color);
296
+ --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
297
+ --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
298
+ --pico-table-border-color: var(--pico-muted-border-color);
299
+ --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
300
+ --pico-code-background-color: rgb(243, 244.5, 246.75);
301
+ --pico-code-color: #646b79;
302
+ --pico-code-kbd-background-color: var(--pico-color);
303
+ --pico-code-kbd-color: var(--pico-background-color);
304
+ --pico-form-element-background-color: rgb(251, 251.5, 252.25);
305
+ --pico-form-element-selected-background-color: #dfe3eb;
306
+ --pico-form-element-border-color: #cfd5e2;
307
+ --pico-form-element-color: #23262c;
308
+ --pico-form-element-placeholder-color: var(--pico-muted-color);
309
+ --pico-form-element-active-background-color: #fff;
310
+ --pico-form-element-active-border-color: var(--pico-primary-border);
311
+ --pico-form-element-focus-color: var(--pico-primary-border);
312
+ --pico-form-element-disabled-opacity: 0.5;
313
+ --pico-form-element-invalid-border-color: rgb(183.5, 105.5, 106.5);
314
+ --pico-form-element-invalid-active-border-color: rgb(200.25, 79.25, 72.25);
315
+ --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
316
+ --pico-form-element-valid-border-color: rgb(76, 154.5, 137.5);
317
+ --pico-form-element-valid-active-border-color: rgb(39, 152.75, 118.75);
318
+ --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
319
+ --pico-switch-background-color: #bfc7d9;
320
+ --pico-switch-checked-background-color: var(--pico-primary-background);
321
+ --pico-switch-color: #fff;
322
+ --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
323
+ --pico-range-border-color: #dfe3eb;
324
+ --pico-range-active-border-color: #bfc7d9;
325
+ --pico-range-thumb-border-color: var(--pico-background-color);
326
+ --pico-range-thumb-color: var(--pico-secondary-background);
327
+ --pico-range-thumb-active-color: var(--pico-primary-background);
328
+ --pico-accordion-border-color: var(--pico-muted-border-color);
329
+ --pico-accordion-active-summary-color: var(--pico-primary-hover);
330
+ --pico-accordion-close-summary-color: var(--pico-color);
331
+ --pico-accordion-open-summary-color: var(--pico-muted-color);
332
+ --pico-card-background-color: var(--pico-background-color);
333
+ --pico-card-border-color: var(--pico-muted-border-color);
334
+ --pico-card-box-shadow: var(--pico-box-shadow);
335
+ --pico-card-sectioning-background-color: rgb(251, 251.5, 252.25);
336
+ --pico-dropdown-background-color: #fff;
337
+ --pico-dropdown-border-color: #eff1f4;
338
+ --pico-dropdown-box-shadow: var(--pico-box-shadow);
339
+ --pico-dropdown-color: var(--pico-color);
340
+ --pico-dropdown-hover-background-color: #eff1f4;
341
+ --pico-loading-spinner-opacity: 0.5;
342
+ --pico-modal-overlay-background-color: rgba(232, 234, 237, 0.75);
343
+ --pico-progress-background-color: #dfe3eb;
344
+ --pico-progress-color: var(--pico-primary-background);
345
+ --pico-tooltip-background-color: var(--pico-contrast-background);
346
+ --pico-tooltip-color: var(--pico-contrast-inverse);
347
+ --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");
348
+ --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");
349
+ }
350
+ [data-theme="light"]
351
+ input:is(
352
+ [type="submit"],
353
+ [type="button"],
354
+ [type="reset"],
355
+ [type="checkbox"],
356
+ [type="radio"],
357
+ [type="file"]
358
+ ),
359
+ :root:not([data-theme="dark"])
360
+ input:is(
361
+ [type="submit"],
362
+ [type="button"],
363
+ [type="reset"],
364
+ [type="checkbox"],
365
+ [type="radio"],
366
+ [type="file"]
367
+ ),
368
+ :host(:not([data-theme="dark"]))
369
+ input:is(
370
+ [type="submit"],
371
+ [type="button"],
372
+ [type="reset"],
373
+ [type="checkbox"],
374
+ [type="radio"],
375
+ [type="file"]
376
+ ) {
377
+ --pico-form-element-focus-color: var(--pico-primary-focus);
378
+ }
379
+ @media only screen and (prefers-color-scheme: dark) {
380
+ :root:not([data-theme]),
381
+ :host(:not([data-theme])) {
382
+ color-scheme: dark;
383
+ --pico-background-color: rgb(19, 22.5, 30.5);
384
+ --pico-color: #c2c7d0;
385
+ --pico-text-selection-color: rgba(1, 170, 255, 0.1875);
386
+ --pico-muted-color: #7b8495;
387
+ --pico-muted-border-color: #202632;
388
+ --pico-primary: #01aaff;
389
+ --pico-primary-background: #0172ad;
390
+ --pico-primary-border: var(--pico-primary-background);
391
+ --pico-primary-underline: rgba(1, 170, 255, 0.5);
392
+ --pico-primary-hover: #79c0ff;
393
+ --pico-primary-hover-background: #017fc0;
394
+ --pico-primary-hover-border: var(--pico-primary-hover-background);
395
+ --pico-primary-hover-underline: var(--pico-primary-hover);
396
+ --pico-primary-focus: rgba(1, 170, 255, 0.375);
397
+ --pico-primary-inverse: #fff;
398
+ --pico-secondary: #969eaf;
399
+ --pico-secondary-background: #525f7a;
400
+ --pico-secondary-border: var(--pico-secondary-background);
401
+ --pico-secondary-underline: rgba(150, 158, 175, 0.5);
402
+ --pico-secondary-hover: #b3b9c5;
403
+ --pico-secondary-hover-background: #5d6b89;
404
+ --pico-secondary-hover-border: var(--pico-secondary-hover-background);
405
+ --pico-secondary-hover-underline: var(--pico-secondary-hover);
406
+ --pico-secondary-focus: rgba(144, 158, 190, 0.25);
407
+ --pico-secondary-inverse: #fff;
408
+ --pico-contrast: #dfe3eb;
409
+ --pico-contrast-background: #eff1f4;
410
+ --pico-contrast-border: var(--pico-contrast-background);
411
+ --pico-contrast-underline: rgba(223, 227, 235, 0.5);
412
+ --pico-contrast-hover: #fff;
413
+ --pico-contrast-hover-background: #fff;
414
+ --pico-contrast-hover-border: var(--pico-contrast-hover-background);
415
+ --pico-contrast-hover-underline: var(--pico-contrast-hover);
416
+ --pico-contrast-focus: rgba(207, 213, 226, 0.25);
417
+ --pico-contrast-inverse: #000;
418
+ --pico-box-shadow:
419
+ 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698),
420
+ 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024),
421
+ 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03),
422
+ 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036),
423
+ 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302),
424
+ 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06), 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
425
+ --pico-h1-color: #f0f1f3;
426
+ --pico-h2-color: #e0e3e7;
427
+ --pico-h3-color: #c2c7d0;
428
+ --pico-h4-color: #b3b9c5;
429
+ --pico-h5-color: #a4acba;
430
+ --pico-h6-color: #8891a4;
431
+ --pico-mark-background-color: #014063;
432
+ --pico-mark-color: #fff;
433
+ --pico-ins-color: #62af9a;
434
+ --pico-del-color: rgb(205.5, 126, 123);
435
+ --pico-blockquote-border-color: var(--pico-muted-border-color);
436
+ --pico-blockquote-footer-color: var(--pico-muted-color);
437
+ --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
438
+ --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
439
+ --pico-table-border-color: var(--pico-muted-border-color);
440
+ --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
441
+ --pico-code-background-color: rgb(26, 30.5, 40.25);
442
+ --pico-code-color: #8891a4;
443
+ --pico-code-kbd-background-color: var(--pico-color);
444
+ --pico-code-kbd-color: var(--pico-background-color);
445
+ --pico-form-element-background-color: rgb(28, 33, 43.5);
446
+ --pico-form-element-selected-background-color: #2a3140;
447
+ --pico-form-element-border-color: #2a3140;
448
+ --pico-form-element-color: #e0e3e7;
449
+ --pico-form-element-placeholder-color: #8891a4;
450
+ --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
451
+ --pico-form-element-active-border-color: var(--pico-primary-border);
452
+ --pico-form-element-focus-color: var(--pico-primary-border);
453
+ --pico-form-element-disabled-opacity: 0.5;
454
+ --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
455
+ --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
456
+ --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
457
+ --pico-form-element-valid-border-color: #2a7b6f;
458
+ --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
459
+ --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
460
+ --pico-switch-background-color: #333c4e;
461
+ --pico-switch-checked-background-color: var(--pico-primary-background);
462
+ --pico-switch-color: #fff;
463
+ --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
464
+ --pico-range-border-color: #202632;
465
+ --pico-range-active-border-color: #2a3140;
466
+ --pico-range-thumb-border-color: var(--pico-background-color);
467
+ --pico-range-thumb-color: var(--pico-secondary-background);
468
+ --pico-range-thumb-active-color: var(--pico-primary-background);
469
+ --pico-accordion-border-color: var(--pico-muted-border-color);
470
+ --pico-accordion-active-summary-color: var(--pico-primary-hover);
471
+ --pico-accordion-close-summary-color: var(--pico-color);
472
+ --pico-accordion-open-summary-color: var(--pico-muted-color);
473
+ --pico-card-background-color: #181c25;
474
+ --pico-card-border-color: var(--pico-card-background-color);
475
+ --pico-card-box-shadow: var(--pico-box-shadow);
476
+ --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
477
+ --pico-dropdown-background-color: #181c25;
478
+ --pico-dropdown-border-color: #202632;
479
+ --pico-dropdown-box-shadow: var(--pico-box-shadow);
480
+ --pico-dropdown-color: var(--pico-color);
481
+ --pico-dropdown-hover-background-color: #202632;
482
+ --pico-loading-spinner-opacity: 0.5;
483
+ --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
484
+ --pico-progress-background-color: #202632;
485
+ --pico-progress-color: var(--pico-primary-background);
486
+ --pico-tooltip-background-color: var(--pico-contrast-background);
487
+ --pico-tooltip-color: var(--pico-contrast-inverse);
488
+ --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
489
+ --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
490
+ }
491
+ :root:not([data-theme])
492
+ input:is(
493
+ [type="submit"],
494
+ [type="button"],
495
+ [type="reset"],
496
+ [type="checkbox"],
497
+ [type="radio"],
498
+ [type="file"]
499
+ ),
500
+ :host(:not([data-theme]))
501
+ input:is(
502
+ [type="submit"],
503
+ [type="button"],
504
+ [type="reset"],
505
+ [type="checkbox"],
506
+ [type="radio"],
507
+ [type="file"]
508
+ ) {
509
+ --pico-form-element-focus-color: var(--pico-primary-focus);
510
+ }
511
+ :root:not([data-theme]) details summary[role="button"].contrast:not(.outline)::after,
512
+ :host(:not([data-theme])) details summary[role="button"].contrast:not(.outline)::after {
513
+ filter: brightness(0);
514
+ }
515
+ :root:not([data-theme])
516
+ [aria-busy="true"]:not(input, select, textarea).contrast:is(
517
+ button,
518
+ [type="submit"],
519
+ [type="button"],
520
+ [type="reset"],
521
+ [role="button"]
522
+ ):not(.outline)::before,
523
+ :host(:not([data-theme]))
524
+ [aria-busy="true"]:not(input, select, textarea).contrast:is(
525
+ button,
526
+ [type="submit"],
527
+ [type="button"],
528
+ [type="reset"],
529
+ [role="button"]
530
+ ):not(.outline)::before {
531
+ filter: brightness(0);
532
+ }
533
+ }
534
+ [data-theme="dark"] {
535
+ color-scheme: dark;
536
+ --pico-background-color: rgb(19, 22.5, 30.5);
537
+ --pico-color: #c2c7d0;
538
+ --pico-text-selection-color: rgba(1, 170, 255, 0.1875);
539
+ --pico-muted-color: #7b8495;
540
+ --pico-muted-border-color: #202632;
541
+ --pico-primary: #01aaff;
542
+ --pico-primary-background: #0172ad;
543
+ --pico-primary-border: var(--pico-primary-background);
544
+ --pico-primary-underline: rgba(1, 170, 255, 0.5);
545
+ --pico-primary-hover: #79c0ff;
546
+ --pico-primary-hover-background: #017fc0;
547
+ --pico-primary-hover-border: var(--pico-primary-hover-background);
548
+ --pico-primary-hover-underline: var(--pico-primary-hover);
549
+ --pico-primary-focus: rgba(1, 170, 255, 0.375);
550
+ --pico-primary-inverse: #fff;
551
+ --pico-secondary: #969eaf;
552
+ --pico-secondary-background: #525f7a;
553
+ --pico-secondary-border: var(--pico-secondary-background);
554
+ --pico-secondary-underline: rgba(150, 158, 175, 0.5);
555
+ --pico-secondary-hover: #b3b9c5;
556
+ --pico-secondary-hover-background: #5d6b89;
557
+ --pico-secondary-hover-border: var(--pico-secondary-hover-background);
558
+ --pico-secondary-hover-underline: var(--pico-secondary-hover);
559
+ --pico-secondary-focus: rgba(144, 158, 190, 0.25);
560
+ --pico-secondary-inverse: #fff;
561
+ --pico-contrast: #dfe3eb;
562
+ --pico-contrast-background: #eff1f4;
563
+ --pico-contrast-border: var(--pico-contrast-background);
564
+ --pico-contrast-underline: rgba(223, 227, 235, 0.5);
565
+ --pico-contrast-hover: #fff;
566
+ --pico-contrast-hover-background: #fff;
567
+ --pico-contrast-hover-border: var(--pico-contrast-hover-background);
568
+ --pico-contrast-hover-underline: var(--pico-contrast-hover);
569
+ --pico-contrast-focus: rgba(207, 213, 226, 0.25);
570
+ --pico-contrast-inverse: #000;
571
+ --pico-box-shadow:
572
+ 0.0145rem 0.029rem 0.174rem rgba(7, 8.5, 12, 0.01698),
573
+ 0.0335rem 0.067rem 0.402rem rgba(7, 8.5, 12, 0.024),
574
+ 0.0625rem 0.125rem 0.75rem rgba(7, 8.5, 12, 0.03),
575
+ 0.1125rem 0.225rem 1.35rem rgba(7, 8.5, 12, 0.036),
576
+ 0.2085rem 0.417rem 2.502rem rgba(7, 8.5, 12, 0.04302), 0.5rem 1rem 6rem rgba(7, 8.5, 12, 0.06),
577
+ 0 0 0 0.0625rem rgba(7, 8.5, 12, 0.015);
578
+ --pico-h1-color: #f0f1f3;
579
+ --pico-h2-color: #e0e3e7;
580
+ --pico-h3-color: #c2c7d0;
581
+ --pico-h4-color: #b3b9c5;
582
+ --pico-h5-color: #a4acba;
583
+ --pico-h6-color: #8891a4;
584
+ --pico-mark-background-color: #014063;
585
+ --pico-mark-color: #fff;
586
+ --pico-ins-color: #62af9a;
587
+ --pico-del-color: rgb(205.5, 126, 123);
588
+ --pico-blockquote-border-color: var(--pico-muted-border-color);
589
+ --pico-blockquote-footer-color: var(--pico-muted-color);
590
+ --pico-button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
591
+ --pico-button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
592
+ --pico-table-border-color: var(--pico-muted-border-color);
593
+ --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.0375);
594
+ --pico-code-background-color: rgb(26, 30.5, 40.25);
595
+ --pico-code-color: #8891a4;
596
+ --pico-code-kbd-background-color: var(--pico-color);
597
+ --pico-code-kbd-color: var(--pico-background-color);
598
+ --pico-form-element-background-color: rgb(28, 33, 43.5);
599
+ --pico-form-element-selected-background-color: #2a3140;
600
+ --pico-form-element-border-color: #2a3140;
601
+ --pico-form-element-color: #e0e3e7;
602
+ --pico-form-element-placeholder-color: #8891a4;
603
+ --pico-form-element-active-background-color: rgb(26, 30.5, 40.25);
604
+ --pico-form-element-active-border-color: var(--pico-primary-border);
605
+ --pico-form-element-focus-color: var(--pico-primary-border);
606
+ --pico-form-element-disabled-opacity: 0.5;
607
+ --pico-form-element-invalid-border-color: rgb(149.5, 74, 80);
608
+ --pico-form-element-invalid-active-border-color: rgb(183.25, 63.5, 59);
609
+ --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
610
+ --pico-form-element-valid-border-color: #2a7b6f;
611
+ --pico-form-element-valid-active-border-color: rgb(22, 137, 105.5);
612
+ --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
613
+ --pico-switch-background-color: #333c4e;
614
+ --pico-switch-checked-background-color: var(--pico-primary-background);
615
+ --pico-switch-color: #fff;
616
+ --pico-switch-thumb-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
617
+ --pico-range-border-color: #202632;
618
+ --pico-range-active-border-color: #2a3140;
619
+ --pico-range-thumb-border-color: var(--pico-background-color);
620
+ --pico-range-thumb-color: var(--pico-secondary-background);
621
+ --pico-range-thumb-active-color: var(--pico-primary-background);
622
+ --pico-accordion-border-color: var(--pico-muted-border-color);
623
+ --pico-accordion-active-summary-color: var(--pico-primary-hover);
624
+ --pico-accordion-close-summary-color: var(--pico-color);
625
+ --pico-accordion-open-summary-color: var(--pico-muted-color);
626
+ --pico-card-background-color: #181c25;
627
+ --pico-card-border-color: var(--pico-card-background-color);
628
+ --pico-card-box-shadow: var(--pico-box-shadow);
629
+ --pico-card-sectioning-background-color: rgb(26, 30.5, 40.25);
630
+ --pico-dropdown-background-color: #181c25;
631
+ --pico-dropdown-border-color: #202632;
632
+ --pico-dropdown-box-shadow: var(--pico-box-shadow);
633
+ --pico-dropdown-color: var(--pico-color);
634
+ --pico-dropdown-hover-background-color: #202632;
635
+ --pico-loading-spinner-opacity: 0.5;
636
+ --pico-modal-overlay-background-color: rgba(7.5, 8.5, 10, 0.75);
637
+ --pico-progress-background-color: #202632;
638
+ --pico-progress-color: var(--pico-primary-background);
639
+ --pico-tooltip-background-color: var(--pico-contrast-background);
640
+ --pico-tooltip-color: var(--pico-contrast-inverse);
641
+ --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(42, 123, 111)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
642
+ --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(149.5, 74, 80)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
643
+ }
644
+ [data-theme="dark"]
645
+ input:is(
646
+ [type="submit"],
647
+ [type="button"],
648
+ [type="reset"],
649
+ [type="checkbox"],
650
+ [type="radio"],
651
+ [type="file"]
652
+ ) {
653
+ --pico-form-element-focus-color: var(--pico-primary-focus);
654
+ }
655
+ [data-theme="dark"] details summary[role="button"].contrast:not(.outline)::after {
656
+ filter: brightness(0);
657
+ }
658
+ [data-theme="dark"]
659
+ [aria-busy="true"]:not(input, select, textarea).contrast:is(
660
+ button,
661
+ [type="submit"],
662
+ [type="button"],
663
+ [type="reset"],
664
+ [role="button"]
665
+ ):not(.outline)::before {
666
+ filter: brightness(0);
667
+ }
668
+ progress,
669
+ [type="checkbox"],
670
+ [type="radio"],
671
+ [type="range"] {
672
+ accent-color: var(--pico-primary);
673
+ }
674
+ /**
675
+ * Document
676
+ * Content-box & Responsive typography
677
+ */
678
+ *,
679
+ *::before,
680
+ *::after {
681
+ box-sizing: border-box;
682
+ background-repeat: no-repeat;
683
+ }
684
+ ::before,
685
+ ::after {
686
+ text-decoration: inherit;
687
+ vertical-align: inherit;
688
+ }
689
+ :where(:root),
690
+ :where(:host) {
691
+ -webkit-tap-highlight-color: transparent;
692
+ -webkit-text-size-adjust: 100%;
693
+ -moz-text-size-adjust: 100%;
694
+ text-size-adjust: 100%;
695
+ background-color: var(--pico-background-color);
696
+ color: var(--pico-color);
697
+ font-weight: var(--pico-font-weight);
698
+ font-size: var(--pico-font-size);
699
+ line-height: var(--pico-line-height);
700
+ font-family: var(--pico-font-family);
701
+ text-underline-offset: var(--pico-text-underline-offset);
702
+ text-rendering: optimizeLegibility;
703
+ overflow-wrap: break-word;
704
+ -moz-tab-size: 4;
705
+ -o-tab-size: 4;
706
+ tab-size: 4;
707
+ }
708
+ /**
709
+ * Landmarks
710
+ */
711
+ body {
712
+ width: 100%;
713
+ margin: 0;
714
+ }
715
+ main {
716
+ display: block;
717
+ }
718
+ body > header,
719
+ body > main,
720
+ body > footer {
721
+ padding-block: var(--pico-block-spacing-vertical);
722
+ }
723
+ /**
724
+ * Section
725
+ */
726
+ section {
727
+ margin-bottom: var(--pico-block-spacing-vertical);
728
+ }
729
+ /**
730
+ * Container
731
+ */
732
+ .container,
733
+ .container-fluid {
734
+ width: 100%;
735
+ margin-right: auto;
736
+ margin-left: auto;
737
+ padding-right: var(--pico-spacing);
738
+ padding-left: var(--pico-spacing);
739
+ }
740
+ @media (min-width: 576px) {
741
+ .container {
742
+ max-width: 510px;
743
+ padding-right: 0;
744
+ padding-left: 0;
745
+ }
746
+ }
747
+ @media (min-width: 768px) {
748
+ .container {
749
+ max-width: 700px;
750
+ }
751
+ }
752
+ @media (min-width: 1024px) {
753
+ .container {
754
+ max-width: 950px;
755
+ }
756
+ }
757
+ @media (min-width: 1280px) {
758
+ .container {
759
+ max-width: 1200px;
760
+ }
761
+ }
762
+ @media (min-width: 1536px) {
763
+ .container {
764
+ max-width: 1450px;
765
+ }
766
+ }
767
+ /**
768
+ * Grid
769
+ * Minimal grid system with auto-layout columns
770
+ */
771
+ .grid {
772
+ grid-column-gap: var(--pico-grid-column-gap);
773
+ grid-row-gap: var(--pico-grid-row-gap);
774
+ display: grid;
775
+ grid-template-columns: 1fr;
776
+ }
777
+ @media (min-width: 768px) {
778
+ .grid {
779
+ grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
780
+ }
781
+ }
782
+ .grid > * {
783
+ min-width: 0;
784
+ }
785
+ /**
786
+ * Overflow auto
787
+ */
788
+ .overflow-auto {
789
+ overflow: auto;
790
+ }
791
+ /**
792
+ * Typography
793
+ */
794
+ b,
795
+ strong {
796
+ font-weight: bolder;
797
+ }
798
+ sub,
799
+ sup {
800
+ position: relative;
801
+ font-size: 0.75em;
802
+ line-height: 0;
803
+ vertical-align: baseline;
804
+ }
805
+ sub {
806
+ bottom: -0.25em;
807
+ }
808
+ sup {
809
+ top: -0.5em;
810
+ }
811
+ address,
812
+ blockquote,
813
+ dl,
814
+ ol,
815
+ p,
816
+ pre,
817
+ table,
818
+ ul {
819
+ margin-top: 0;
820
+ margin-bottom: var(--pico-typography-spacing-vertical);
821
+ color: var(--pico-color);
822
+ font-style: normal;
823
+ font-weight: var(--pico-font-weight);
824
+ }
825
+ h1,
826
+ h2,
827
+ h3,
828
+ h4,
829
+ h5,
830
+ h6 {
831
+ margin-top: 0;
832
+ margin-bottom: var(--pico-typography-spacing-vertical);
833
+ color: var(--pico-color);
834
+ font-weight: var(--pico-font-weight);
835
+ font-size: var(--pico-font-size);
836
+ line-height: var(--pico-line-height);
837
+ font-family: var(--pico-font-family);
838
+ }
839
+ h1 {
840
+ --pico-color: var(--pico-h1-color);
841
+ }
842
+ h2 {
843
+ --pico-color: var(--pico-h2-color);
844
+ }
845
+ h3 {
846
+ --pico-color: var(--pico-h3-color);
847
+ }
848
+ h4 {
849
+ --pico-color: var(--pico-h4-color);
850
+ }
851
+ h5 {
852
+ --pico-color: var(--pico-h5-color);
853
+ }
854
+ h6 {
855
+ --pico-color: var(--pico-h6-color);
856
+ }
857
+ :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul)
858
+ ~ :is(h1, h2, h3, h4, h5, h6) {
859
+ margin-top: var(--pico-typography-spacing-top);
860
+ }
861
+ p {
862
+ margin-bottom: var(--pico-typography-spacing-vertical);
863
+ }
864
+ hgroup {
865
+ margin-bottom: var(--pico-typography-spacing-vertical);
866
+ }
867
+ hgroup > * {
868
+ margin-top: 0;
869
+ margin-bottom: 0;
870
+ }
871
+ hgroup > *:not(:first-child):last-child {
872
+ --pico-color: var(--pico-muted-color);
873
+ --pico-font-weight: unset;
874
+ font-size: 1rem;
875
+ }
876
+ :where(ol, ul) li {
877
+ margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25);
878
+ }
879
+ :where(dl, ol, ul) :where(dl, ol, ul) {
880
+ margin: 0;
881
+ margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25);
882
+ }
883
+ ul li {
884
+ list-style: square;
885
+ }
886
+ mark {
887
+ padding: 0.125rem 0.25rem;
888
+ background-color: var(--pico-mark-background-color);
889
+ color: var(--pico-mark-color);
890
+ vertical-align: baseline;
891
+ }
892
+ blockquote {
893
+ display: block;
894
+ margin: var(--pico-typography-spacing-vertical) 0;
895
+ padding: var(--pico-spacing);
896
+ border-right: none;
897
+ border-left: 0.25rem solid var(--pico-blockquote-border-color);
898
+ border-inline-start: 0.25rem solid var(--pico-blockquote-border-color);
899
+ border-inline-end: none;
900
+ }
901
+ blockquote footer {
902
+ margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5);
903
+ color: var(--pico-blockquote-footer-color);
904
+ }
905
+ abbr[title] {
906
+ border-bottom: 1px dotted;
907
+ text-decoration: none;
908
+ cursor: help;
909
+ }
910
+ ins {
911
+ color: var(--pico-ins-color);
912
+ text-decoration: none;
913
+ }
914
+ del {
915
+ color: var(--pico-del-color);
916
+ }
917
+ ::-moz-selection {
918
+ background-color: var(--pico-text-selection-color);
919
+ }
920
+ ::selection {
921
+ background-color: var(--pico-text-selection-color);
922
+ }
923
+ /**
924
+ * Link
925
+ */
926
+ :where(a:not([role="button"])),
927
+ [role="link"] {
928
+ --pico-color: var(--pico-primary);
929
+ --pico-background-color: transparent;
930
+ --pico-underline: var(--pico-primary-underline);
931
+ outline: none;
932
+ background-color: var(--pico-background-color);
933
+ color: var(--pico-color);
934
+ -webkit-text-decoration: var(--pico-text-decoration);
935
+ text-decoration: var(--pico-text-decoration);
936
+ text-decoration-color: var(--pico-underline);
937
+ text-underline-offset: 0.125em;
938
+ transition:
939
+ background-color var(--pico-transition),
940
+ color var(--pico-transition),
941
+ box-shadow var(--pico-transition),
942
+ -webkit-text-decoration var(--pico-transition);
943
+ transition:
944
+ background-color var(--pico-transition),
945
+ color var(--pico-transition),
946
+ text-decoration var(--pico-transition),
947
+ box-shadow var(--pico-transition);
948
+ transition:
949
+ background-color var(--pico-transition),
950
+ color var(--pico-transition),
951
+ text-decoration var(--pico-transition),
952
+ box-shadow var(--pico-transition),
953
+ -webkit-text-decoration var(--pico-transition);
954
+ }
955
+ :where(a:not([role="button"])):is(
956
+ [aria-current]:not([aria-current="false"]),
957
+ :hover,
958
+ :active,
959
+ :focus
960
+ ),
961
+ [role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
962
+ --pico-color: var(--pico-primary-hover);
963
+ --pico-underline: var(--pico-primary-hover-underline);
964
+ --pico-text-decoration: underline;
965
+ }
966
+ :where(a:not([role="button"])):focus-visible,
967
+ [role="link"]:focus-visible {
968
+ box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
969
+ }
970
+ :where(a:not([role="button"])).secondary,
971
+ [role="link"].secondary {
972
+ --pico-color: var(--pico-secondary);
973
+ --pico-underline: var(--pico-secondary-underline);
974
+ }
975
+ :where(a:not([role="button"])).secondary:is(
976
+ [aria-current]:not([aria-current="false"]),
977
+ :hover,
978
+ :active,
979
+ :focus
980
+ ),
981
+ [role="link"].secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
982
+ --pico-color: var(--pico-secondary-hover);
983
+ --pico-underline: var(--pico-secondary-hover-underline);
984
+ }
985
+ :where(a:not([role="button"])).contrast,
986
+ [role="link"].contrast {
987
+ --pico-color: var(--pico-contrast);
988
+ --pico-underline: var(--pico-contrast-underline);
989
+ }
990
+ :where(a:not([role="button"])).contrast:is(
991
+ [aria-current]:not([aria-current="false"]),
992
+ :hover,
993
+ :active,
994
+ :focus
995
+ ),
996
+ [role="link"].contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
997
+ --pico-color: var(--pico-contrast-hover);
998
+ --pico-underline: var(--pico-contrast-hover-underline);
999
+ }
1000
+ a[role="button"] {
1001
+ display: inline-block;
1002
+ }
1003
+ /**
1004
+ * Button
1005
+ */
1006
+ button {
1007
+ margin: 0;
1008
+ overflow: visible;
1009
+ font-family: inherit;
1010
+ text-transform: none;
1011
+ }
1012
+ button,
1013
+ [type="submit"],
1014
+ [type="reset"],
1015
+ [type="button"] {
1016
+ -webkit-appearance: button;
1017
+ }
1018
+ button,
1019
+ [type="submit"],
1020
+ [type="reset"],
1021
+ [type="button"],
1022
+ [type="file"]::file-selector-button,
1023
+ [role="button"] {
1024
+ --pico-background-color: var(--pico-primary-background);
1025
+ --pico-border-color: var(--pico-primary-border);
1026
+ --pico-color: var(--pico-primary-inverse);
1027
+ --pico-box-shadow: var(--pico-button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
1028
+ padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
1029
+ border: var(--pico-border-width) solid var(--pico-border-color);
1030
+ border-radius: var(--pico-border-radius);
1031
+ outline: none;
1032
+ background-color: var(--pico-background-color);
1033
+ box-shadow: var(--pico-box-shadow);
1034
+ color: var(--pico-color);
1035
+ font-weight: var(--pico-font-weight);
1036
+ font-size: 1rem;
1037
+ line-height: var(--pico-line-height);
1038
+ text-align: center;
1039
+ text-decoration: none;
1040
+ cursor: pointer;
1041
+ -webkit-user-select: none;
1042
+ -moz-user-select: none;
1043
+ user-select: none;
1044
+ transition:
1045
+ background-color var(--pico-transition),
1046
+ border-color var(--pico-transition),
1047
+ color var(--pico-transition),
1048
+ box-shadow var(--pico-transition);
1049
+ }
1050
+ button:is([aria-current]:not([aria-current="false"])),
1051
+ button:is(:hover, :active, :focus),
1052
+ [type="submit"]:is([aria-current]:not([aria-current="false"])),
1053
+ [type="submit"]:is(:hover, :active, :focus),
1054
+ [type="reset"]:is([aria-current]:not([aria-current="false"])),
1055
+ [type="reset"]:is(:hover, :active, :focus),
1056
+ [type="button"]:is([aria-current]:not([aria-current="false"])),
1057
+ [type="button"]:is(:hover, :active, :focus),
1058
+ [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])),
1059
+ [type="file"]::file-selector-button:is(:hover, :active, :focus),
1060
+ [role="button"]:is([aria-current]:not([aria-current="false"])),
1061
+ [role="button"]:is(:hover, :active, :focus) {
1062
+ --pico-background-color: var(--pico-primary-hover-background);
1063
+ --pico-border-color: var(--pico-primary-hover-border);
1064
+ --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
1065
+ --pico-color: var(--pico-primary-inverse);
1066
+ }
1067
+ button:focus,
1068
+ button:is([aria-current]:not([aria-current="false"])):focus,
1069
+ [type="submit"]:focus,
1070
+ [type="submit"]:is([aria-current]:not([aria-current="false"])):focus,
1071
+ [type="reset"]:focus,
1072
+ [type="reset"]:is([aria-current]:not([aria-current="false"])):focus,
1073
+ [type="button"]:focus,
1074
+ [type="button"]:is([aria-current]:not([aria-current="false"])):focus,
1075
+ [type="file"]::file-selector-button:focus,
1076
+ [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus,
1077
+ [role="button"]:focus,
1078
+ [role="button"]:is([aria-current]:not([aria-current="false"])):focus {
1079
+ --pico-box-shadow:
1080
+ var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
1081
+ 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
1082
+ }
1083
+ [type="submit"],
1084
+ [type="reset"],
1085
+ [type="button"] {
1086
+ margin-bottom: var(--pico-spacing);
1087
+ }
1088
+ :is(button, [type="submit"], [type="button"], [role="button"]).secondary,
1089
+ [type="reset"],
1090
+ [type="file"]::file-selector-button {
1091
+ --pico-background-color: var(--pico-secondary-background);
1092
+ --pico-border-color: var(--pico-secondary-border);
1093
+ --pico-color: var(--pico-secondary-inverse);
1094
+ cursor: pointer;
1095
+ }
1096
+ :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is(
1097
+ [aria-current]:not([aria-current="false"]),
1098
+ :hover,
1099
+ :active,
1100
+ :focus
1101
+ ),
1102
+ [type="reset"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
1103
+ [type="file"]::file-selector-button:is(
1104
+ [aria-current]:not([aria-current="false"]),
1105
+ :hover,
1106
+ :active,
1107
+ :focus
1108
+ ) {
1109
+ --pico-background-color: var(--pico-secondary-hover-background);
1110
+ --pico-border-color: var(--pico-secondary-hover-border);
1111
+ --pico-color: var(--pico-secondary-inverse);
1112
+ }
1113
+ :is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus,
1114
+ :is(button, [type="submit"], [type="button"], [role="button"]).secondary:is(
1115
+ [aria-current]:not([aria-current="false"])
1116
+ ):focus,
1117
+ [type="reset"]:focus,
1118
+ [type="reset"]:is([aria-current]:not([aria-current="false"])):focus,
1119
+ [type="file"]::file-selector-button:focus,
1120
+ [type="file"]::file-selector-button:is([aria-current]:not([aria-current="false"])):focus {
1121
+ --pico-box-shadow:
1122
+ var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
1123
+ 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
1124
+ }
1125
+ :is(button, [type="submit"], [type="button"], [role="button"]).contrast {
1126
+ --pico-background-color: var(--pico-contrast-background);
1127
+ --pico-border-color: var(--pico-contrast-border);
1128
+ --pico-color: var(--pico-contrast-inverse);
1129
+ }
1130
+ :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is(
1131
+ [aria-current]:not([aria-current="false"]),
1132
+ :hover,
1133
+ :active,
1134
+ :focus
1135
+ ) {
1136
+ --pico-background-color: var(--pico-contrast-hover-background);
1137
+ --pico-border-color: var(--pico-contrast-hover-border);
1138
+ --pico-color: var(--pico-contrast-inverse);
1139
+ }
1140
+ :is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus,
1141
+ :is(button, [type="submit"], [type="button"], [role="button"]).contrast:is(
1142
+ [aria-current]:not([aria-current="false"])
1143
+ ):focus {
1144
+ --pico-box-shadow:
1145
+ var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
1146
+ 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
1147
+ }
1148
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline,
1149
+ [type="reset"].outline {
1150
+ --pico-background-color: transparent;
1151
+ --pico-color: var(--pico-primary);
1152
+ --pico-border-color: var(--pico-primary);
1153
+ }
1154
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline:is(
1155
+ [aria-current]:not([aria-current="false"]),
1156
+ :hover,
1157
+ :active,
1158
+ :focus
1159
+ ),
1160
+ [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
1161
+ --pico-background-color: transparent;
1162
+ --pico-color: var(--pico-primary-hover);
1163
+ --pico-border-color: var(--pico-primary-hover);
1164
+ }
1165
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary,
1166
+ [type="reset"].outline {
1167
+ --pico-color: var(--pico-secondary);
1168
+ --pico-border-color: var(--pico-secondary);
1169
+ }
1170
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline.secondary:is(
1171
+ [aria-current]:not([aria-current="false"]),
1172
+ :hover,
1173
+ :active,
1174
+ :focus
1175
+ ),
1176
+ [type="reset"].outline:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
1177
+ --pico-color: var(--pico-secondary-hover);
1178
+ --pico-border-color: var(--pico-secondary-hover);
1179
+ }
1180
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast {
1181
+ --pico-color: var(--pico-contrast);
1182
+ --pico-border-color: var(--pico-contrast);
1183
+ }
1184
+ :is(button, [type="submit"], [type="button"], [role="button"]).outline.contrast:is(
1185
+ [aria-current]:not([aria-current="false"]),
1186
+ :hover,
1187
+ :active,
1188
+ :focus
1189
+ ) {
1190
+ --pico-color: var(--pico-contrast-hover);
1191
+ --pico-border-color: var(--pico-contrast-hover);
1192
+ }
1193
+ :where(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[disabled],
1194
+ :where(fieldset[disabled])
1195
+ :is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]) {
1196
+ opacity: 0.5;
1197
+ pointer-events: none;
1198
+ }
1199
+ /**
1200
+ * Table
1201
+ */
1202
+ :where(table) {
1203
+ width: 100%;
1204
+ border-collapse: collapse;
1205
+ border-spacing: 0;
1206
+ text-indent: 0;
1207
+ }
1208
+ th,
1209
+ td {
1210
+ padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
1211
+ border-bottom: var(--pico-border-width) solid var(--pico-table-border-color);
1212
+ background-color: var(--pico-background-color);
1213
+ color: var(--pico-color);
1214
+ font-weight: var(--pico-font-weight);
1215
+ text-align: left;
1216
+ text-align: start;
1217
+ }
1218
+ tfoot th,
1219
+ tfoot td {
1220
+ border-top: var(--pico-border-width) solid var(--pico-table-border-color);
1221
+ border-bottom: 0;
1222
+ }
1223
+ table.striped tbody tr:nth-child(odd) th,
1224
+ table.striped tbody tr:nth-child(odd) td {
1225
+ background-color: var(--pico-table-row-stripped-background-color);
1226
+ }
1227
+ /**
1228
+ * Embedded content
1229
+ */
1230
+ :where(audio, canvas, iframe, img, svg, video) {
1231
+ vertical-align: middle;
1232
+ }
1233
+ audio,
1234
+ video {
1235
+ display: inline-block;
1236
+ }
1237
+ audio:not([controls]) {
1238
+ display: none;
1239
+ height: 0;
1240
+ }
1241
+ :where(iframe) {
1242
+ border-style: none;
1243
+ }
1244
+ img {
1245
+ max-width: 100%;
1246
+ height: auto;
1247
+ border-style: none;
1248
+ }
1249
+ :where(svg:not([fill])) {
1250
+ fill: currentColor;
1251
+ }
1252
+ svg:not(:root),
1253
+ svg:not(:host) {
1254
+ overflow: hidden;
1255
+ }
1256
+ /**
1257
+ * Code
1258
+ */
1259
+ pre,
1260
+ code,
1261
+ kbd,
1262
+ samp {
1263
+ font-size: 0.875em;
1264
+ font-family: var(--pico-font-family);
1265
+ }
1266
+ pre code,
1267
+ pre samp {
1268
+ font-size: inherit;
1269
+ font-family: inherit;
1270
+ }
1271
+ pre {
1272
+ -ms-overflow-style: scrollbar;
1273
+ overflow: auto;
1274
+ }
1275
+ pre,
1276
+ code,
1277
+ kbd,
1278
+ samp {
1279
+ border-radius: var(--pico-border-radius);
1280
+ background: var(--pico-code-background-color);
1281
+ color: var(--pico-code-color);
1282
+ font-weight: var(--pico-font-weight);
1283
+ line-height: initial;
1284
+ }
1285
+ code,
1286
+ kbd,
1287
+ samp {
1288
+ display: inline-block;
1289
+ padding: 0.375rem;
1290
+ }
1291
+ pre {
1292
+ display: block;
1293
+ margin-bottom: var(--pico-spacing);
1294
+ overflow-x: auto;
1295
+ }
1296
+ pre > code,
1297
+ pre > samp {
1298
+ display: block;
1299
+ padding: var(--pico-spacing);
1300
+ background: none;
1301
+ line-height: var(--pico-line-height);
1302
+ }
1303
+ kbd {
1304
+ background-color: var(--pico-code-kbd-background-color);
1305
+ color: var(--pico-code-kbd-color);
1306
+ vertical-align: baseline;
1307
+ }
1308
+ /**
1309
+ * Figure
1310
+ */
1311
+ figure {
1312
+ display: block;
1313
+ margin: 0;
1314
+ padding: 0;
1315
+ }
1316
+ figure figcaption {
1317
+ padding: calc(var(--pico-spacing) * 0.5) 0;
1318
+ color: var(--pico-muted-color);
1319
+ }
1320
+ /**
1321
+ * Misc
1322
+ */
1323
+ hr {
1324
+ height: 0;
1325
+ margin: var(--pico-typography-spacing-vertical) 0;
1326
+ border: 0;
1327
+ border-top: 1px solid var(--pico-muted-border-color);
1328
+ color: inherit;
1329
+ }
1330
+ [hidden],
1331
+ template {
1332
+ display: none !important;
1333
+ }
1334
+ canvas {
1335
+ display: inline-block;
1336
+ }
1337
+ /**
1338
+ * Basics form elements
1339
+ */
1340
+ input,
1341
+ optgroup,
1342
+ select,
1343
+ textarea {
1344
+ margin: 0;
1345
+ font-size: 1rem;
1346
+ line-height: var(--pico-line-height);
1347
+ font-family: inherit;
1348
+ letter-spacing: inherit;
1349
+ }
1350
+ input {
1351
+ overflow: visible;
1352
+ }
1353
+ select {
1354
+ text-transform: none;
1355
+ }
1356
+ legend {
1357
+ max-width: 100%;
1358
+ padding: 0;
1359
+ color: inherit;
1360
+ white-space: normal;
1361
+ }
1362
+ textarea {
1363
+ overflow: auto;
1364
+ }
1365
+ [type="checkbox"],
1366
+ [type="radio"] {
1367
+ padding: 0;
1368
+ }
1369
+ ::-webkit-inner-spin-button,
1370
+ ::-webkit-outer-spin-button {
1371
+ height: auto;
1372
+ }
1373
+ [type="search"] {
1374
+ -webkit-appearance: textfield;
1375
+ outline-offset: -2px;
1376
+ }
1377
+ [type="search"]::-webkit-search-decoration {
1378
+ -webkit-appearance: none;
1379
+ }
1380
+ ::-webkit-file-upload-button {
1381
+ -webkit-appearance: button;
1382
+ font: inherit;
1383
+ }
1384
+ ::-moz-focus-inner {
1385
+ padding: 0;
1386
+ border-style: none;
1387
+ }
1388
+ :-moz-focusring {
1389
+ outline: none;
1390
+ }
1391
+ :-moz-ui-invalid {
1392
+ box-shadow: none;
1393
+ }
1394
+ ::-ms-expand {
1395
+ display: none;
1396
+ }
1397
+ [type="file"],
1398
+ [type="range"] {
1399
+ padding: 0;
1400
+ border-width: 0;
1401
+ }
1402
+ input:not([type="checkbox"], [type="radio"], [type="range"]) {
1403
+ height: calc(
1404
+ 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
1405
+ var(--pico-border-width) * 2
1406
+ );
1407
+ }
1408
+ fieldset {
1409
+ width: 100%;
1410
+ margin: 0;
1411
+ margin-bottom: var(--pico-spacing);
1412
+ padding: 0;
1413
+ border: 0;
1414
+ }
1415
+ label,
1416
+ fieldset legend {
1417
+ display: block;
1418
+ margin-bottom: calc(var(--pico-spacing) * 0.375);
1419
+ color: var(--pico-color);
1420
+ font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight));
1421
+ }
1422
+ fieldset legend {
1423
+ margin-bottom: calc(var(--pico-spacing) * 0.5);
1424
+ }
1425
+ input:not([type="checkbox"], [type="radio"]),
1426
+ button[type="submit"],
1427
+ select,
1428
+ textarea {
1429
+ width: 100%;
1430
+ }
1431
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
1432
+ select,
1433
+ textarea {
1434
+ -webkit-appearance: none;
1435
+ -moz-appearance: none;
1436
+ appearance: none;
1437
+ padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
1438
+ }
1439
+ input,
1440
+ select,
1441
+ textarea {
1442
+ --pico-background-color: var(--pico-form-element-background-color);
1443
+ --pico-border-color: var(--pico-form-element-border-color);
1444
+ --pico-color: var(--pico-form-element-color);
1445
+ --pico-box-shadow: none;
1446
+ border: var(--pico-border-width) solid var(--pico-border-color);
1447
+ border-radius: var(--pico-border-radius);
1448
+ outline: none;
1449
+ background-color: var(--pico-background-color);
1450
+ box-shadow: var(--pico-box-shadow);
1451
+ color: var(--pico-color);
1452
+ font-weight: var(--pico-font-weight);
1453
+ transition:
1454
+ background-color var(--pico-transition),
1455
+ border-color var(--pico-transition),
1456
+ color var(--pico-transition),
1457
+ box-shadow var(--pico-transition);
1458
+ }
1459
+ input:not(
1460
+ [type="submit"],
1461
+ [type="button"],
1462
+ [type="reset"],
1463
+ [type="checkbox"],
1464
+ [type="radio"],
1465
+ [readonly]
1466
+ ):is(:active, :focus),
1467
+ :where(select, textarea):not([readonly]):is(:active, :focus) {
1468
+ --pico-background-color: var(--pico-form-element-active-background-color);
1469
+ }
1470
+ input:not([type="submit"], [type="button"], [type="reset"], [role="switch"], [readonly]):is(
1471
+ :active,
1472
+ :focus
1473
+ ),
1474
+ :where(select, textarea):not([readonly]):is(:active, :focus) {
1475
+ --pico-border-color: var(--pico-form-element-active-border-color);
1476
+ }
1477
+ input:not(
1478
+ [type="submit"],
1479
+ [type="button"],
1480
+ [type="reset"],
1481
+ [type="range"],
1482
+ [type="file"],
1483
+ [readonly]
1484
+ ):focus,
1485
+ :where(select, textarea):not([readonly]):focus {
1486
+ --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
1487
+ }
1488
+ input:not([type="submit"], [type="button"], [type="reset"])[disabled],
1489
+ select[disabled],
1490
+ textarea[disabled],
1491
+ label[aria-disabled="true"],
1492
+ :where(fieldset[disabled])
1493
+ :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
1494
+ opacity: var(--pico-form-element-disabled-opacity);
1495
+ pointer-events: none;
1496
+ }
1497
+ label[aria-disabled="true"] input[disabled] {
1498
+ opacity: 1;
1499
+ }
1500
+ :where(input, select, textarea):not(
1501
+ [type="checkbox"],
1502
+ [type="radio"],
1503
+ [type="date"],
1504
+ [type="datetime-local"],
1505
+ [type="month"],
1506
+ [type="time"],
1507
+ [type="week"],
1508
+ [type="range"]
1509
+ )[aria-invalid] {
1510
+ padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
1511
+ padding-left: var(--pico-form-element-spacing-horizontal);
1512
+ padding-inline-start: var(--pico-form-element-spacing-horizontal) !important;
1513
+ padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important;
1514
+ background-position: center right 0.75rem;
1515
+ background-size: 1rem auto;
1516
+ background-repeat: no-repeat;
1517
+ }
1518
+ :where(input, select, textarea):not(
1519
+ [type="checkbox"],
1520
+ [type="radio"],
1521
+ [type="date"],
1522
+ [type="datetime-local"],
1523
+ [type="month"],
1524
+ [type="time"],
1525
+ [type="week"],
1526
+ [type="range"]
1527
+ )[aria-invalid="false"]:not(select) {
1528
+ background-image: var(--pico-icon-valid);
1529
+ }
1530
+ :where(input, select, textarea):not(
1531
+ [type="checkbox"],
1532
+ [type="radio"],
1533
+ [type="date"],
1534
+ [type="datetime-local"],
1535
+ [type="month"],
1536
+ [type="time"],
1537
+ [type="week"],
1538
+ [type="range"]
1539
+ )[aria-invalid="true"]:not(select) {
1540
+ background-image: var(--pico-icon-invalid);
1541
+ }
1542
+ :where(input, select, textarea)[aria-invalid="false"] {
1543
+ --pico-border-color: var(--pico-form-element-valid-border-color);
1544
+ }
1545
+ :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
1546
+ --pico-border-color: var(--pico-form-element-valid-active-border-color) !important;
1547
+ }
1548
+ :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not(
1549
+ [type="checkbox"],
1550
+ [type="radio"]
1551
+ ) {
1552
+ --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important;
1553
+ }
1554
+ :where(input, select, textarea)[aria-invalid="true"] {
1555
+ --pico-border-color: var(--pico-form-element-invalid-border-color);
1556
+ }
1557
+ :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) {
1558
+ --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important;
1559
+ }
1560
+ :where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus):not(
1561
+ [type="checkbox"],
1562
+ [type="radio"]
1563
+ ) {
1564
+ --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important;
1565
+ }
1566
+ [dir="rtl"]
1567
+ :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is(
1568
+ [aria-invalid],
1569
+ [aria-invalid="true"],
1570
+ [aria-invalid="false"]
1571
+ ) {
1572
+ background-position: center left 0.75rem;
1573
+ }
1574
+ input::placeholder,
1575
+ input::-webkit-input-placeholder,
1576
+ textarea::placeholder,
1577
+ textarea::-webkit-input-placeholder,
1578
+ select:invalid {
1579
+ color: var(--pico-form-element-placeholder-color);
1580
+ opacity: 1;
1581
+ }
1582
+ input:not([type="checkbox"], [type="radio"]),
1583
+ select,
1584
+ textarea {
1585
+ margin-bottom: var(--pico-spacing);
1586
+ }
1587
+ select::-ms-expand {
1588
+ border: 0;
1589
+ background-color: transparent;
1590
+ }
1591
+ select:not([multiple], [size]) {
1592
+ padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
1593
+ padding-left: var(--pico-form-element-spacing-horizontal);
1594
+ padding-inline-start: var(--pico-form-element-spacing-horizontal);
1595
+ padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem);
1596
+ background-image: var(--pico-icon-chevron);
1597
+ background-position: center right 0.75rem;
1598
+ background-size: 1rem auto;
1599
+ background-repeat: no-repeat;
1600
+ }
1601
+ select[multiple] option:checked {
1602
+ background: var(--pico-form-element-selected-background-color);
1603
+ color: var(--pico-form-element-color);
1604
+ }
1605
+ [dir="rtl"] select:not([multiple], [size]) {
1606
+ background-position: center left 0.75rem;
1607
+ }
1608
+ textarea {
1609
+ display: block;
1610
+ resize: vertical;
1611
+ }
1612
+ textarea[aria-invalid] {
1613
+ --pico-icon-height: calc(
1614
+ 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
1615
+ var(--pico-border-width) * 2
1616
+ );
1617
+ background-position: top right 0.75rem !important;
1618
+ background-size: 1rem var(--pico-icon-height) !important;
1619
+ }
1620
+ :where(input, select, textarea, fieldset, .grid) + small {
1621
+ display: block;
1622
+ width: 100%;
1623
+ margin-top: calc(var(--pico-spacing) * -0.75);
1624
+ margin-bottom: var(--pico-spacing);
1625
+ color: var(--pico-muted-color);
1626
+ }
1627
+ :where(input, select, textarea, fieldset, .grid)[aria-invalid="false"] + small {
1628
+ color: var(--pico-ins-color);
1629
+ }
1630
+ :where(input, select, textarea, fieldset, .grid)[aria-invalid="true"] + small {
1631
+ color: var(--pico-del-color);
1632
+ }
1633
+ label > :where(input, select, textarea) {
1634
+ margin-top: calc(var(--pico-spacing) * 0.25);
1635
+ }
1636
+ /**
1637
+ * Checkboxes, Radios and Switches
1638
+ */
1639
+ label:has([type="checkbox"], [type="radio"]) {
1640
+ width: -moz-fit-content;
1641
+ width: fit-content;
1642
+ cursor: pointer;
1643
+ }
1644
+ [type="checkbox"],
1645
+ [type="radio"] {
1646
+ -webkit-appearance: none;
1647
+ -moz-appearance: none;
1648
+ appearance: none;
1649
+ width: 1.25em;
1650
+ height: 1.25em;
1651
+ margin-top: -0.125em;
1652
+ margin-inline-end: 0.5em;
1653
+ border-width: var(--pico-border-width);
1654
+ vertical-align: middle;
1655
+ cursor: pointer;
1656
+ }
1657
+ [type="checkbox"]::-ms-check,
1658
+ [type="radio"]::-ms-check {
1659
+ display: none;
1660
+ }
1661
+ [type="checkbox"]:checked,
1662
+ [type="checkbox"]:checked:active,
1663
+ [type="checkbox"]:checked:focus,
1664
+ [type="radio"]:checked,
1665
+ [type="radio"]:checked:active,
1666
+ [type="radio"]:checked:focus {
1667
+ --pico-background-color: var(--pico-primary-background);
1668
+ --pico-border-color: var(--pico-primary-border);
1669
+ background-image: var(--pico-icon-checkbox);
1670
+ background-position: center;
1671
+ background-size: 0.75em auto;
1672
+ background-repeat: no-repeat;
1673
+ }
1674
+ [type="checkbox"] ~ label,
1675
+ [type="radio"] ~ label {
1676
+ display: inline-block;
1677
+ margin-bottom: 0;
1678
+ cursor: pointer;
1679
+ }
1680
+ [type="checkbox"] ~ label:not(:last-of-type),
1681
+ [type="radio"] ~ label:not(:last-of-type) {
1682
+ margin-inline-end: 1em;
1683
+ }
1684
+ [type="checkbox"]:indeterminate {
1685
+ --pico-background-color: var(--pico-primary-background);
1686
+ --pico-border-color: var(--pico-primary-border);
1687
+ background-image: var(--pico-icon-minus);
1688
+ background-position: center;
1689
+ background-size: 0.75em auto;
1690
+ background-repeat: no-repeat;
1691
+ }
1692
+ [type="radio"] {
1693
+ border-radius: 50%;
1694
+ }
1695
+ [type="radio"]:checked,
1696
+ [type="radio"]:checked:active,
1697
+ [type="radio"]:checked:focus {
1698
+ --pico-background-color: var(--pico-primary-inverse);
1699
+ border-width: 0.35em;
1700
+ background-image: none;
1701
+ }
1702
+ [type="checkbox"][role="switch"] {
1703
+ --pico-background-color: var(--pico-switch-background-color);
1704
+ --pico-color: var(--pico-switch-color);
1705
+ width: 2.25em;
1706
+ height: 1.25em;
1707
+ border: var(--pico-border-width) solid var(--pico-border-color);
1708
+ border-radius: 1.25em;
1709
+ background-color: var(--pico-background-color);
1710
+ line-height: 1.25em;
1711
+ }
1712
+ [type="checkbox"][role="switch"]:not([aria-invalid]) {
1713
+ --pico-border-color: var(--pico-switch-background-color);
1714
+ }
1715
+ [type="checkbox"][role="switch"]:before {
1716
+ display: block;
1717
+ aspect-ratio: 1;
1718
+ height: 100%;
1719
+ border-radius: 50%;
1720
+ background-color: var(--pico-color);
1721
+ box-shadow: var(--pico-switch-thumb-box-shadow);
1722
+ content: "";
1723
+ transition: margin 0.1s ease-in-out;
1724
+ }
1725
+ [type="checkbox"][role="switch"]:focus {
1726
+ --pico-background-color: var(--pico-switch-background-color);
1727
+ --pico-border-color: var(--pico-switch-background-color);
1728
+ }
1729
+ [type="checkbox"][role="switch"]:checked {
1730
+ --pico-background-color: var(--pico-switch-checked-background-color);
1731
+ --pico-border-color: var(--pico-switch-checked-background-color);
1732
+ background-image: none;
1733
+ }
1734
+ [type="checkbox"][role="switch"]:checked::before {
1735
+ margin-inline-start: calc(2.25em - 1.25em);
1736
+ }
1737
+ [type="checkbox"][role="switch"][disabled] {
1738
+ --pico-background-color: var(--pico-border-color);
1739
+ }
1740
+ [type="checkbox"][aria-invalid="false"]:checked,
1741
+ [type="checkbox"][aria-invalid="false"]:checked:active,
1742
+ [type="checkbox"][aria-invalid="false"]:checked:focus,
1743
+ [type="checkbox"][role="switch"][aria-invalid="false"]:checked,
1744
+ [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active,
1745
+ [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
1746
+ --pico-background-color: var(--pico-form-element-valid-border-color);
1747
+ }
1748
+ [type="checkbox"]:checked[aria-invalid="true"],
1749
+ [type="checkbox"]:checked:active[aria-invalid="true"],
1750
+ [type="checkbox"]:checked:focus[aria-invalid="true"],
1751
+ [type="checkbox"][role="switch"]:checked[aria-invalid="true"],
1752
+ [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"],
1753
+ [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
1754
+ --pico-background-color: var(--pico-form-element-invalid-border-color);
1755
+ }
1756
+ [type="checkbox"][aria-invalid="false"]:checked,
1757
+ [type="checkbox"][aria-invalid="false"]:checked:active,
1758
+ [type="checkbox"][aria-invalid="false"]:checked:focus,
1759
+ [type="radio"][aria-invalid="false"]:checked,
1760
+ [type="radio"][aria-invalid="false"]:checked:active,
1761
+ [type="radio"][aria-invalid="false"]:checked:focus,
1762
+ [type="checkbox"][role="switch"][aria-invalid="false"]:checked,
1763
+ [type="checkbox"][role="switch"][aria-invalid="false"]:checked:active,
1764
+ [type="checkbox"][role="switch"][aria-invalid="false"]:checked:focus {
1765
+ --pico-border-color: var(--pico-form-element-valid-border-color);
1766
+ }
1767
+ [type="checkbox"]:checked[aria-invalid="true"],
1768
+ [type="checkbox"]:checked:active[aria-invalid="true"],
1769
+ [type="checkbox"]:checked:focus[aria-invalid="true"],
1770
+ [type="radio"]:checked[aria-invalid="true"],
1771
+ [type="radio"]:checked:active[aria-invalid="true"],
1772
+ [type="radio"]:checked:focus[aria-invalid="true"],
1773
+ [type="checkbox"][role="switch"]:checked[aria-invalid="true"],
1774
+ [type="checkbox"][role="switch"]:checked:active[aria-invalid="true"],
1775
+ [type="checkbox"][role="switch"]:checked:focus[aria-invalid="true"] {
1776
+ --pico-border-color: var(--pico-form-element-invalid-border-color);
1777
+ }
1778
+ /**
1779
+ * Input type color
1780
+ */
1781
+ [type="color"]::-webkit-color-swatch-wrapper {
1782
+ padding: 0;
1783
+ }
1784
+ [type="color"]::-moz-focus-inner {
1785
+ padding: 0;
1786
+ }
1787
+ [type="color"]::-webkit-color-swatch {
1788
+ border: 0;
1789
+ border-radius: calc(var(--pico-border-radius) * 0.5);
1790
+ }
1791
+ [type="color"]::-moz-color-swatch {
1792
+ border: 0;
1793
+ border-radius: calc(var(--pico-border-radius) * 0.5);
1794
+ }
1795
+ /**
1796
+ * Input type datetime
1797
+ */
1798
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is(
1799
+ [type="date"],
1800
+ [type="datetime-local"],
1801
+ [type="month"],
1802
+ [type="time"],
1803
+ [type="week"]
1804
+ ) {
1805
+ --pico-icon-position: 0.75rem;
1806
+ --pico-icon-width: 1rem;
1807
+ padding-right: calc(var(--pico-icon-width) + var(--pico-icon-position));
1808
+ background-image: var(--pico-icon-date);
1809
+ background-position: center right var(--pico-icon-position);
1810
+ background-size: var(--pico-icon-width) auto;
1811
+ background-repeat: no-repeat;
1812
+ }
1813
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="time"] {
1814
+ background-image: var(--pico-icon-time);
1815
+ }
1816
+ [type="date"]::-webkit-calendar-picker-indicator,
1817
+ [type="datetime-local"]::-webkit-calendar-picker-indicator,
1818
+ [type="month"]::-webkit-calendar-picker-indicator,
1819
+ [type="time"]::-webkit-calendar-picker-indicator,
1820
+ [type="week"]::-webkit-calendar-picker-indicator {
1821
+ width: var(--pico-icon-width);
1822
+ margin-right: calc(var(--pico-icon-width) * -1);
1823
+ margin-left: var(--pico-icon-position);
1824
+ opacity: 0;
1825
+ }
1826
+ @-moz-document url-prefix() {
1827
+ [type="date"],
1828
+ [type="datetime-local"],
1829
+ [type="month"],
1830
+ [type="time"],
1831
+ [type="week"] {
1832
+ padding-right: var(--pico-form-element-spacing-horizontal) !important;
1833
+ background-image: none !important;
1834
+ }
1835
+ }
1836
+ [dir="rtl"]
1837
+ :is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
1838
+ text-align: right;
1839
+ }
1840
+ /**
1841
+ * Input type file
1842
+ */
1843
+ [type="file"] {
1844
+ --pico-color: var(--pico-muted-color);
1845
+ margin-left: calc(var(--pico-outline-width) * -1);
1846
+ padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
1847
+ padding-left: var(--pico-outline-width);
1848
+ border: 0;
1849
+ border-radius: 0;
1850
+ background: none;
1851
+ }
1852
+ [type="file"]::file-selector-button {
1853
+ margin-right: calc(var(--pico-spacing) / 2);
1854
+ padding: calc(var(--pico-form-element-spacing-vertical) * 0.5)
1855
+ var(--pico-form-element-spacing-horizontal);
1856
+ }
1857
+ [type="file"]:is(:hover, :active, :focus)::file-selector-button {
1858
+ --pico-background-color: var(--pico-secondary-hover-background);
1859
+ --pico-border-color: var(--pico-secondary-hover-border);
1860
+ }
1861
+ [type="file"]:focus::file-selector-button {
1862
+ --pico-box-shadow:
1863
+ var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),
1864
+ 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
1865
+ }
1866
+ /**
1867
+ * Input type range
1868
+ */
1869
+ [type="range"] {
1870
+ -webkit-appearance: none;
1871
+ -moz-appearance: none;
1872
+ appearance: none;
1873
+ width: 100%;
1874
+ height: 1.25rem;
1875
+ background: none;
1876
+ }
1877
+ [type="range"]::-webkit-slider-runnable-track {
1878
+ width: 100%;
1879
+ height: 0.375rem;
1880
+ border-radius: var(--pico-border-radius);
1881
+ background-color: var(--pico-range-border-color);
1882
+ -webkit-transition:
1883
+ background-color var(--pico-transition),
1884
+ box-shadow var(--pico-transition);
1885
+ transition:
1886
+ background-color var(--pico-transition),
1887
+ box-shadow var(--pico-transition);
1888
+ }
1889
+ [type="range"]::-moz-range-track {
1890
+ width: 100%;
1891
+ height: 0.375rem;
1892
+ border-radius: var(--pico-border-radius);
1893
+ background-color: var(--pico-range-border-color);
1894
+ -moz-transition:
1895
+ background-color var(--pico-transition),
1896
+ box-shadow var(--pico-transition);
1897
+ transition:
1898
+ background-color var(--pico-transition),
1899
+ box-shadow var(--pico-transition);
1900
+ }
1901
+ [type="range"]::-ms-track {
1902
+ width: 100%;
1903
+ height: 0.375rem;
1904
+ border-radius: var(--pico-border-radius);
1905
+ background-color: var(--pico-range-border-color);
1906
+ -ms-transition:
1907
+ background-color var(--pico-transition),
1908
+ box-shadow var(--pico-transition);
1909
+ transition:
1910
+ background-color var(--pico-transition),
1911
+ box-shadow var(--pico-transition);
1912
+ }
1913
+ [type="range"]::-webkit-slider-thumb {
1914
+ -webkit-appearance: none;
1915
+ width: 1.25rem;
1916
+ height: 1.25rem;
1917
+ margin-top: -0.4375rem;
1918
+ border: 2px solid var(--pico-range-thumb-border-color);
1919
+ border-radius: 50%;
1920
+ background-color: var(--pico-range-thumb-color);
1921
+ cursor: pointer;
1922
+ -webkit-transition:
1923
+ background-color var(--pico-transition),
1924
+ transform var(--pico-transition);
1925
+ transition:
1926
+ background-color var(--pico-transition),
1927
+ transform var(--pico-transition);
1928
+ }
1929
+ [type="range"]::-moz-range-thumb {
1930
+ -webkit-appearance: none;
1931
+ width: 1.25rem;
1932
+ height: 1.25rem;
1933
+ margin-top: -0.4375rem;
1934
+ border: 2px solid var(--pico-range-thumb-border-color);
1935
+ border-radius: 50%;
1936
+ background-color: var(--pico-range-thumb-color);
1937
+ cursor: pointer;
1938
+ -moz-transition:
1939
+ background-color var(--pico-transition),
1940
+ transform var(--pico-transition);
1941
+ transition:
1942
+ background-color var(--pico-transition),
1943
+ transform var(--pico-transition);
1944
+ }
1945
+ [type="range"]::-ms-thumb {
1946
+ -webkit-appearance: none;
1947
+ width: 1.25rem;
1948
+ height: 1.25rem;
1949
+ margin-top: -0.4375rem;
1950
+ border: 2px solid var(--pico-range-thumb-border-color);
1951
+ border-radius: 50%;
1952
+ background-color: var(--pico-range-thumb-color);
1953
+ cursor: pointer;
1954
+ -ms-transition:
1955
+ background-color var(--pico-transition),
1956
+ transform var(--pico-transition);
1957
+ transition:
1958
+ background-color var(--pico-transition),
1959
+ transform var(--pico-transition);
1960
+ }
1961
+ [type="range"]:active,
1962
+ [type="range"]:focus-within {
1963
+ --pico-range-border-color: var(--pico-range-active-border-color);
1964
+ --pico-range-thumb-color: var(--pico-range-thumb-active-color);
1965
+ }
1966
+ [type="range"]:active::-webkit-slider-thumb {
1967
+ transform: scale(1.25);
1968
+ }
1969
+ [type="range"]:active::-moz-range-thumb {
1970
+ transform: scale(1.25);
1971
+ }
1972
+ [type="range"]:active::-ms-thumb {
1973
+ transform: scale(1.25);
1974
+ }
1975
+ /**
1976
+ * Input type search
1977
+ */
1978
+ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
1979
+ padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
1980
+ background-image: var(--pico-icon-search);
1981
+ background-position: center left calc(var(--pico-form-element-spacing-horizontal) + 0.125rem);
1982
+ background-size: 1rem auto;
1983
+ background-repeat: no-repeat;
1984
+ }
1985
+ input:not(
1986
+ [type="checkbox"],
1987
+ [type="radio"],
1988
+ [type="range"],
1989
+ [type="file"]
1990
+ )[type="search"][aria-invalid] {
1991
+ padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important;
1992
+ background-position:
1993
+ center left 1.125rem,
1994
+ center right 0.75rem;
1995
+ }
1996
+ input:not(
1997
+ [type="checkbox"],
1998
+ [type="radio"],
1999
+ [type="range"],
2000
+ [type="file"]
2001
+ )[type="search"][aria-invalid="false"] {
2002
+ background-image: var(--pico-icon-search), var(--pico-icon-valid);
2003
+ }
2004
+ input:not(
2005
+ [type="checkbox"],
2006
+ [type="radio"],
2007
+ [type="range"],
2008
+ [type="file"]
2009
+ )[type="search"][aria-invalid="true"] {
2010
+ background-image: var(--pico-icon-search), var(--pico-icon-invalid);
2011
+ }
2012
+ [dir="rtl"]
2013
+ :where(input):not(
2014
+ [type="checkbox"],
2015
+ [type="radio"],
2016
+ [type="range"],
2017
+ [type="file"]
2018
+ )[type="search"] {
2019
+ background-position: center right 1.125rem;
2020
+ }
2021
+ [dir="rtl"]
2022
+ :where(input):not(
2023
+ [type="checkbox"],
2024
+ [type="radio"],
2025
+ [type="range"],
2026
+ [type="file"]
2027
+ )[type="search"][aria-invalid] {
2028
+ background-position:
2029
+ center right 1.125rem,
2030
+ center left 0.75rem;
2031
+ }
2032
+ /**
2033
+ * Accordion (<details>)
2034
+ */
2035
+ details {
2036
+ display: block;
2037
+ margin-bottom: var(--pico-spacing);
2038
+ }
2039
+ details summary {
2040
+ line-height: 1rem;
2041
+ list-style-type: none;
2042
+ cursor: pointer;
2043
+ transition: color var(--pico-transition);
2044
+ }
2045
+ details summary:not([role]) {
2046
+ color: var(--pico-accordion-close-summary-color);
2047
+ }
2048
+ details summary::-webkit-details-marker {
2049
+ display: none;
2050
+ }
2051
+ details summary::marker {
2052
+ display: none;
2053
+ }
2054
+ details summary::-moz-list-bullet {
2055
+ list-style-type: none;
2056
+ }
2057
+ details summary::after {
2058
+ display: block;
2059
+ width: 1rem;
2060
+ height: 1rem;
2061
+ margin-inline-start: calc(var(--pico-spacing, 1rem) * 0.5);
2062
+ float: right;
2063
+ transform: rotate(-90deg);
2064
+ background-image: var(--pico-icon-chevron);
2065
+ background-position: right center;
2066
+ background-size: 1rem auto;
2067
+ background-repeat: no-repeat;
2068
+ content: "";
2069
+ transition: transform var(--pico-transition);
2070
+ }
2071
+ details summary:focus {
2072
+ outline: none;
2073
+ }
2074
+ details summary:focus:not([role]) {
2075
+ color: var(--pico-accordion-active-summary-color);
2076
+ }
2077
+ details summary:focus-visible:not([role]) {
2078
+ outline: var(--pico-outline-width) solid var(--pico-primary-focus);
2079
+ outline-offset: calc(var(--pico-spacing, 1rem) * 0.5);
2080
+ color: var(--pico-primary);
2081
+ }
2082
+ details summary[role="button"] {
2083
+ width: 100%;
2084
+ text-align: left;
2085
+ }
2086
+ details summary[role="button"]::after {
2087
+ height: calc(1rem * var(--pico-line-height, 1.5));
2088
+ }
2089
+ details[open] > summary {
2090
+ margin-bottom: var(--pico-spacing);
2091
+ }
2092
+ details[open] > summary:not([role]):not(:focus) {
2093
+ color: var(--pico-accordion-open-summary-color);
2094
+ }
2095
+ details[open] > summary::after {
2096
+ transform: rotate(0);
2097
+ }
2098
+ [dir="rtl"] details summary {
2099
+ text-align: right;
2100
+ }
2101
+ [dir="rtl"] details summary::after {
2102
+ float: left;
2103
+ background-position: left center;
2104
+ }
2105
+ /**
2106
+ * Card (<article>)
2107
+ */
2108
+ article {
2109
+ margin-bottom: var(--pico-block-spacing-vertical);
2110
+ padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
2111
+ border-radius: var(--pico-border-radius);
2112
+ background: var(--pico-card-background-color);
2113
+ box-shadow: var(--pico-card-box-shadow);
2114
+ }
2115
+ article > header,
2116
+ article > footer {
2117
+ margin-right: calc(var(--pico-block-spacing-horizontal) * -1);
2118
+ margin-left: calc(var(--pico-block-spacing-horizontal) * -1);
2119
+ padding: calc(var(--pico-block-spacing-vertical) * 0.66) var(--pico-block-spacing-horizontal);
2120
+ background-color: var(--pico-card-sectioning-background-color);
2121
+ }
2122
+ article > header {
2123
+ margin-top: calc(var(--pico-block-spacing-vertical) * -1);
2124
+ margin-bottom: var(--pico-block-spacing-vertical);
2125
+ border-bottom: var(--pico-border-width) solid var(--pico-card-border-color);
2126
+ border-top-right-radius: var(--pico-border-radius);
2127
+ border-top-left-radius: var(--pico-border-radius);
2128
+ }
2129
+ article > footer {
2130
+ margin-top: var(--pico-block-spacing-vertical);
2131
+ margin-bottom: calc(var(--pico-block-spacing-vertical) * -1);
2132
+ border-top: var(--pico-border-width) solid var(--pico-card-border-color);
2133
+ border-bottom-right-radius: var(--pico-border-radius);
2134
+ border-bottom-left-radius: var(--pico-border-radius);
2135
+ }
2136
+ /**
2137
+ * Dropdown (details.dropdown)
2138
+ */
2139
+ details.dropdown {
2140
+ position: relative;
2141
+ border-bottom: none;
2142
+ }
2143
+ details.dropdown > summary::after,
2144
+ details.dropdown > button::after,
2145
+ details.dropdown > a::after {
2146
+ display: block;
2147
+ width: 1rem;
2148
+ height: calc(1rem * var(--pico-line-height, 1.5));
2149
+ margin-inline-start: 0.25rem;
2150
+ float: right;
2151
+ transform: rotate(0deg) translateX(0.2rem);
2152
+ background-image: var(--pico-icon-chevron);
2153
+ background-position: right center;
2154
+ background-size: 1rem auto;
2155
+ background-repeat: no-repeat;
2156
+ content: "";
2157
+ }
2158
+ nav details.dropdown {
2159
+ margin-bottom: 0;
2160
+ }
2161
+ details.dropdown > summary:not([role]) {
2162
+ height: calc(
2163
+ 1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
2164
+ var(--pico-border-width) * 2
2165
+ );
2166
+ padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
2167
+ border: var(--pico-border-width) solid var(--pico-form-element-border-color);
2168
+ border-radius: var(--pico-border-radius);
2169
+ background-color: var(--pico-form-element-background-color);
2170
+ color: var(--pico-form-element-placeholder-color);
2171
+ line-height: inherit;
2172
+ cursor: pointer;
2173
+ -webkit-user-select: none;
2174
+ -moz-user-select: none;
2175
+ user-select: none;
2176
+ transition:
2177
+ background-color var(--pico-transition),
2178
+ border-color var(--pico-transition),
2179
+ color var(--pico-transition),
2180
+ box-shadow var(--pico-transition);
2181
+ }
2182
+ details.dropdown > summary:not([role]):active,
2183
+ details.dropdown > summary:not([role]):focus {
2184
+ border-color: var(--pico-form-element-active-border-color);
2185
+ background-color: var(--pico-form-element-active-background-color);
2186
+ }
2187
+ details.dropdown > summary:not([role]):focus {
2188
+ box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color);
2189
+ }
2190
+ details.dropdown > summary:not([role]):focus-visible {
2191
+ outline: none;
2192
+ }
2193
+ details.dropdown > summary:not([role])[aria-invalid="false"] {
2194
+ --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
2195
+ --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
2196
+ --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
2197
+ }
2198
+ details.dropdown > summary:not([role])[aria-invalid="true"] {
2199
+ --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
2200
+ --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
2201
+ --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
2202
+ }
2203
+ nav details.dropdown {
2204
+ display: inline;
2205
+ margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;
2206
+ }
2207
+ nav details.dropdown > summary::after {
2208
+ transform: rotate(0deg) translateX(0rem);
2209
+ }
2210
+ nav details.dropdown > summary:not([role]) {
2211
+ height: calc(1rem * var(--pico-line-height) + var(--pico-nav-link-spacing-vertical) * 2);
2212
+ padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2)
2213
+ var(--pico-nav-link-spacing-horizontal);
2214
+ }
2215
+ nav details.dropdown > summary:not([role]):focus-visible {
2216
+ box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
2217
+ }
2218
+ details.dropdown > summary + ul {
2219
+ display: flex;
2220
+ z-index: 99;
2221
+ position: absolute;
2222
+ left: 0;
2223
+ flex-direction: column;
2224
+ width: 100%;
2225
+ min-width: -moz-fit-content;
2226
+ min-width: fit-content;
2227
+ margin: 0;
2228
+ margin-top: var(--pico-outline-width);
2229
+ padding: 0;
2230
+ border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
2231
+ border-radius: var(--pico-border-radius);
2232
+ background-color: var(--pico-dropdown-background-color);
2233
+ box-shadow: var(--pico-dropdown-box-shadow);
2234
+ color: var(--pico-dropdown-color);
2235
+ white-space: nowrap;
2236
+ opacity: 0;
2237
+ transition:
2238
+ opacity var(--pico-transition),
2239
+ transform 0s ease-in-out 1s;
2240
+ }
2241
+ details.dropdown > summary + ul[dir="rtl"] {
2242
+ right: 0;
2243
+ left: auto;
2244
+ }
2245
+ details.dropdown > summary + ul li {
2246
+ width: 100%;
2247
+ margin-bottom: 0;
2248
+ padding: calc(var(--pico-form-element-spacing-vertical) * 0.5)
2249
+ var(--pico-form-element-spacing-horizontal);
2250
+ list-style: none;
2251
+ }
2252
+ details.dropdown > summary + ul li:first-of-type {
2253
+ margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
2254
+ }
2255
+ details.dropdown > summary + ul li:last-of-type {
2256
+ margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
2257
+ }
2258
+ details.dropdown > summary + ul li a {
2259
+ display: block;
2260
+ margin: calc(var(--pico-form-element-spacing-vertical) * -0.5)
2261
+ calc(var(--pico-form-element-spacing-horizontal) * -1);
2262
+ padding: calc(var(--pico-form-element-spacing-vertical) * 0.5)
2263
+ var(--pico-form-element-spacing-horizontal);
2264
+ overflow: hidden;
2265
+ border-radius: 0;
2266
+ color: var(--pico-dropdown-color);
2267
+ text-decoration: none;
2268
+ text-overflow: ellipsis;
2269
+ }
2270
+ details.dropdown > summary + ul li a:hover,
2271
+ details.dropdown > summary + ul li a:focus,
2272
+ details.dropdown > summary + ul li a:active,
2273
+ details.dropdown > summary + ul li a:focus-visible,
2274
+ details.dropdown > summary + ul li a[aria-current]:not([aria-current="false"]) {
2275
+ background-color: var(--pico-dropdown-hover-background-color);
2276
+ }
2277
+ details.dropdown > summary + ul li label {
2278
+ width: 100%;
2279
+ }
2280
+ details.dropdown > summary + ul li:has(label):hover {
2281
+ background-color: var(--pico-dropdown-hover-background-color);
2282
+ }
2283
+ details.dropdown[open] > summary {
2284
+ margin-bottom: 0;
2285
+ }
2286
+ details.dropdown[open] > summary + ul {
2287
+ transform: scaleY(1);
2288
+ opacity: 1;
2289
+ transition:
2290
+ opacity var(--pico-transition),
2291
+ transform 0s ease-in-out 0s;
2292
+ }
2293
+ details.dropdown[open] > summary::before {
2294
+ display: block;
2295
+ z-index: 1;
2296
+ position: fixed;
2297
+ width: 100vw;
2298
+ height: 100vh;
2299
+ inset: 0;
2300
+ background: none;
2301
+ content: "";
2302
+ cursor: default;
2303
+ }
2304
+ label > details.dropdown {
2305
+ margin-top: calc(var(--pico-spacing) * 0.25);
2306
+ }
2307
+ /**
2308
+ * Group ([role="group"], [role="search"])
2309
+ */
2310
+ [role="search"],
2311
+ [role="group"] {
2312
+ display: inline-flex;
2313
+ position: relative;
2314
+ width: 100%;
2315
+ margin-bottom: var(--pico-spacing);
2316
+ border-radius: var(--pico-border-radius);
2317
+ box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
2318
+ vertical-align: middle;
2319
+ transition: box-shadow var(--pico-transition);
2320
+ }
2321
+ [role="search"] > *,
2322
+ [role="search"] input:not([type="checkbox"], [type="radio"]),
2323
+ [role="search"] select,
2324
+ [role="group"] > *,
2325
+ [role="group"] input:not([type="checkbox"], [type="radio"]),
2326
+ [role="group"] select {
2327
+ position: relative;
2328
+ flex: 1 1 auto;
2329
+ margin-bottom: 0;
2330
+ }
2331
+ [role="search"] > *:not(:first-child),
2332
+ [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
2333
+ [role="search"] select:not(:first-child),
2334
+ [role="group"] > *:not(:first-child),
2335
+ [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
2336
+ [role="group"] select:not(:first-child) {
2337
+ margin-left: 0;
2338
+ border-top-left-radius: 0;
2339
+ border-bottom-left-radius: 0;
2340
+ }
2341
+ [role="search"] > *:not(:last-child),
2342
+ [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child),
2343
+ [role="search"] select:not(:last-child),
2344
+ [role="group"] > *:not(:last-child),
2345
+ [role="group"] input:not([type="checkbox"], [type="radio"]):not(:last-child),
2346
+ [role="group"] select:not(:last-child) {
2347
+ border-top-right-radius: 0;
2348
+ border-bottom-right-radius: 0;
2349
+ }
2350
+ [role="search"] > *:focus,
2351
+ [role="search"] input:not([type="checkbox"], [type="radio"]):focus,
2352
+ [role="search"] select:focus,
2353
+ [role="group"] > *:focus,
2354
+ [role="group"] input:not([type="checkbox"], [type="radio"]):focus,
2355
+ [role="group"] select:focus {
2356
+ z-index: 2;
2357
+ }
2358
+ [role="search"] button:not(:first-child),
2359
+ [role="search"] [type="submit"]:not(:first-child),
2360
+ [role="search"] [type="reset"]:not(:first-child),
2361
+ [role="search"] [type="button"]:not(:first-child),
2362
+ [role="search"] [role="button"]:not(:first-child),
2363
+ [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
2364
+ [role="search"] select:not(:first-child),
2365
+ [role="group"] button:not(:first-child),
2366
+ [role="group"] [type="submit"]:not(:first-child),
2367
+ [role="group"] [type="reset"]:not(:first-child),
2368
+ [role="group"] [type="button"]:not(:first-child),
2369
+ [role="group"] [role="button"]:not(:first-child),
2370
+ [role="group"] input:not([type="checkbox"], [type="radio"]):not(:first-child),
2371
+ [role="group"] select:not(:first-child) {
2372
+ margin-left: calc(var(--pico-border-width) * -1);
2373
+ }
2374
+ [role="search"] button,
2375
+ [role="search"] [type="submit"],
2376
+ [role="search"] [type="reset"],
2377
+ [role="search"] [type="button"],
2378
+ [role="search"] [role="button"],
2379
+ [role="group"] button,
2380
+ [role="group"] [type="submit"],
2381
+ [role="group"] [type="reset"],
2382
+ [role="group"] [type="button"],
2383
+ [role="group"] [role="button"] {
2384
+ width: auto;
2385
+ }
2386
+ @supports selector(:has(*)) {
2387
+ [role="search"]:has(
2388
+ button:focus,
2389
+ [type="submit"]:focus,
2390
+ [type="button"]:focus,
2391
+ [role="button"]:focus
2392
+ ),
2393
+ [role="group"]:has(
2394
+ button:focus,
2395
+ [type="submit"]:focus,
2396
+ [type="button"]:focus,
2397
+ [role="button"]:focus
2398
+ ) {
2399
+ --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-button);
2400
+ }
2401
+ [role="search"]:has(
2402
+ button:focus,
2403
+ [type="submit"]:focus,
2404
+ [type="button"]:focus,
2405
+ [role="button"]:focus
2406
+ )
2407
+ input:not([type="checkbox"], [type="radio"]),
2408
+ [role="search"]:has(
2409
+ button:focus,
2410
+ [type="submit"]:focus,
2411
+ [type="button"]:focus,
2412
+ [role="button"]:focus
2413
+ )
2414
+ select,
2415
+ [role="group"]:has(
2416
+ button:focus,
2417
+ [type="submit"]:focus,
2418
+ [type="button"]:focus,
2419
+ [role="button"]:focus
2420
+ )
2421
+ input:not([type="checkbox"], [type="radio"]),
2422
+ [role="group"]:has(
2423
+ button:focus,
2424
+ [type="submit"]:focus,
2425
+ [type="button"]:focus,
2426
+ [role="button"]:focus
2427
+ )
2428
+ select {
2429
+ border-color: transparent;
2430
+ }
2431
+ [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus),
2432
+ [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
2433
+ --pico-group-box-shadow: var(--pico-group-box-shadow-focus-with-input);
2434
+ }
2435
+ [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button,
2436
+ [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
2437
+ [type="submit"],
2438
+ [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
2439
+ [type="button"],
2440
+ [role="search"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
2441
+ [role="button"],
2442
+ [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus) button,
2443
+ [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
2444
+ [type="submit"],
2445
+ [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
2446
+ [type="button"],
2447
+ [role="group"]:has(input:not([type="submit"], [type="button"]):focus, select:focus)
2448
+ [role="button"] {
2449
+ --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border);
2450
+ --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border);
2451
+ }
2452
+ [role="search"] button:focus,
2453
+ [role="search"] [type="submit"]:focus,
2454
+ [role="search"] [type="reset"]:focus,
2455
+ [role="search"] [type="button"]:focus,
2456
+ [role="search"] [role="button"]:focus,
2457
+ [role="group"] button:focus,
2458
+ [role="group"] [type="submit"]:focus,
2459
+ [role="group"] [type="reset"]:focus,
2460
+ [role="group"] [type="button"]:focus,
2461
+ [role="group"] [role="button"]:focus {
2462
+ box-shadow: none;
2463
+ }
2464
+ }
2465
+ [role="search"] > *:first-child {
2466
+ border-top-left-radius: 5rem;
2467
+ border-bottom-left-radius: 5rem;
2468
+ }
2469
+ [role="search"] > *:last-child {
2470
+ border-top-right-radius: 5rem;
2471
+ border-bottom-right-radius: 5rem;
2472
+ }
2473
+ /**
2474
+ * Loading ([aria-busy=true])
2475
+ */
2476
+ [aria-busy="true"]:not(input, select, textarea, html, form) {
2477
+ white-space: nowrap;
2478
+ }
2479
+ [aria-busy="true"]:not(input, select, textarea, html, form)::before {
2480
+ display: inline-block;
2481
+ width: 1em;
2482
+ height: 1em;
2483
+ background-image: var(--pico-icon-loading);
2484
+ background-size: 1em auto;
2485
+ background-repeat: no-repeat;
2486
+ content: "";
2487
+ vertical-align: -0.125em;
2488
+ }
2489
+ [aria-busy="true"]:not(input, select, textarea, html, form):not(:empty)::before {
2490
+ margin-inline-end: calc(var(--pico-spacing) * 0.5);
2491
+ }
2492
+ [aria-busy="true"]:not(input, select, textarea, html, form):empty {
2493
+ text-align: center;
2494
+ }
2495
+ button[aria-busy="true"],
2496
+ [type="submit"][aria-busy="true"],
2497
+ [type="button"][aria-busy="true"],
2498
+ [type="reset"][aria-busy="true"],
2499
+ [role="button"][aria-busy="true"],
2500
+ a[aria-busy="true"] {
2501
+ pointer-events: none;
2502
+ }
2503
+ /**
2504
+ * Modal (<dialog>)
2505
+ */
2506
+ :root,
2507
+ :host {
2508
+ --pico-scrollbar-width: 0px;
2509
+ }
2510
+ dialog {
2511
+ display: flex;
2512
+ z-index: 999;
2513
+ position: fixed;
2514
+ top: 0;
2515
+ right: 0;
2516
+ bottom: 0;
2517
+ left: 0;
2518
+ align-items: center;
2519
+ justify-content: center;
2520
+ width: inherit;
2521
+ min-width: 100%;
2522
+ height: inherit;
2523
+ min-height: 100%;
2524
+ padding: 0;
2525
+ border: 0;
2526
+ backdrop-filter: var(--pico-modal-overlay-backdrop-filter);
2527
+ background-color: var(--pico-modal-overlay-background-color);
2528
+ color: var(--pico-color);
2529
+ }
2530
+ dialog > article {
2531
+ width: 100%;
2532
+ max-height: calc(100vh - var(--pico-spacing) * 2);
2533
+ margin: var(--pico-spacing);
2534
+ overflow: auto;
2535
+ }
2536
+ @media (min-width: 576px) {
2537
+ dialog > article {
2538
+ max-width: 510px;
2539
+ }
2540
+ }
2541
+ @media (min-width: 768px) {
2542
+ dialog > article {
2543
+ max-width: 700px;
2544
+ }
2545
+ }
2546
+ dialog > article > header > * {
2547
+ margin-bottom: 0;
2548
+ }
2549
+ dialog > article > header .close,
2550
+ dialog > article > header :is(a, button)[rel="prev"] {
2551
+ margin: 0;
2552
+ margin-left: var(--pico-spacing);
2553
+ padding: 0;
2554
+ float: right;
2555
+ }
2556
+ dialog > article > footer {
2557
+ text-align: right;
2558
+ }
2559
+ dialog > article > footer button,
2560
+ dialog > article > footer [role="button"] {
2561
+ margin-bottom: 0;
2562
+ }
2563
+ dialog > article > footer button:not(:first-of-type),
2564
+ dialog > article > footer [role="button"]:not(:first-of-type) {
2565
+ margin-left: calc(var(--pico-spacing) * 0.5);
2566
+ }
2567
+ dialog > article .close,
2568
+ dialog > article :is(a, button)[rel="prev"] {
2569
+ display: block;
2570
+ width: 1rem;
2571
+ height: 1rem;
2572
+ margin-top: calc(var(--pico-spacing) * -1);
2573
+ margin-bottom: var(--pico-spacing);
2574
+ margin-left: auto;
2575
+ border: none;
2576
+ background-image: var(--pico-icon-close);
2577
+ background-position: center;
2578
+ background-size: auto 1rem;
2579
+ background-repeat: no-repeat;
2580
+ background-color: transparent;
2581
+ opacity: 0.5;
2582
+ transition: opacity var(--pico-transition);
2583
+ }
2584
+ dialog > article .close:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus),
2585
+ dialog
2586
+ > article
2587
+ :is(a, button)[rel="prev"]:is(
2588
+ [aria-current]:not([aria-current="false"]),
2589
+ :hover,
2590
+ :active,
2591
+ :focus
2592
+ ) {
2593
+ opacity: 1;
2594
+ }
2595
+ dialog:not([open]),
2596
+ dialog[open="false"] {
2597
+ display: none;
2598
+ }
2599
+ .modal-is-open {
2600
+ padding-right: var(--pico-scrollbar-width, 0px);
2601
+ overflow: hidden;
2602
+ pointer-events: none;
2603
+ touch-action: none;
2604
+ }
2605
+ .modal-is-open dialog {
2606
+ pointer-events: auto;
2607
+ touch-action: auto;
2608
+ }
2609
+ :where(.modal-is-opening, .modal-is-closing) dialog,
2610
+ :where(.modal-is-opening, .modal-is-closing) dialog > article {
2611
+ animation-duration: 0.2s;
2612
+ animation-timing-function: ease-in-out;
2613
+ animation-fill-mode: both;
2614
+ }
2615
+ :where(.modal-is-opening, .modal-is-closing) dialog {
2616
+ animation-duration: 0.8s;
2617
+ animation-name: modal-overlay;
2618
+ }
2619
+ :where(.modal-is-opening, .modal-is-closing) dialog > article {
2620
+ animation-delay: 0.2s;
2621
+ animation-name: modal;
2622
+ }
2623
+ .modal-is-closing dialog,
2624
+ .modal-is-closing dialog > article {
2625
+ animation-delay: 0s;
2626
+ animation-direction: reverse;
2627
+ }
2628
+ @keyframes modal-overlay {
2629
+ from {
2630
+ backdrop-filter: none;
2631
+ background-color: transparent;
2632
+ }
2633
+ }
2634
+ @keyframes modal {
2635
+ from {
2636
+ transform: translateY(-100%);
2637
+ opacity: 0;
2638
+ }
2639
+ }
2640
+ /**
2641
+ * Nav
2642
+ */
2643
+ :where(nav li)::before {
2644
+ float: left;
2645
+ content: "​";
2646
+ }
2647
+ nav,
2648
+ nav ul {
2649
+ display: flex;
2650
+ }
2651
+ nav {
2652
+ justify-content: space-between;
2653
+ overflow: visible;
2654
+ }
2655
+ nav ol,
2656
+ nav ul {
2657
+ align-items: center;
2658
+ margin-bottom: 0;
2659
+ padding: 0;
2660
+ list-style: none;
2661
+ }
2662
+ nav ol:first-of-type,
2663
+ nav ul:first-of-type {
2664
+ margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
2665
+ }
2666
+ nav ol:last-of-type,
2667
+ nav ul:last-of-type {
2668
+ margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1);
2669
+ }
2670
+ nav li {
2671
+ display: inline-block;
2672
+ margin: 0;
2673
+ padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal);
2674
+ }
2675
+ nav li :where(a, [role="link"]) {
2676
+ display: inline-block;
2677
+ margin: calc(var(--pico-nav-link-spacing-vertical) * -1)
2678
+ calc(var(--pico-nav-link-spacing-horizontal) * -1);
2679
+ padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal);
2680
+ border-radius: var(--pico-border-radius);
2681
+ }
2682
+ nav li :where(a, [role="link"]):not(:hover) {
2683
+ text-decoration: none;
2684
+ }
2685
+ nav li button,
2686
+ nav li [role="button"],
2687
+ nav li [type="button"],
2688
+ nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
2689
+ nav li select {
2690
+ height: auto;
2691
+ margin-right: inherit;
2692
+ margin-bottom: 0;
2693
+ margin-left: inherit;
2694
+ padding: calc(var(--pico-nav-link-spacing-vertical) - var(--pico-border-width) * 2)
2695
+ var(--pico-nav-link-spacing-horizontal);
2696
+ }
2697
+ nav[aria-label="breadcrumb"] {
2698
+ align-items: center;
2699
+ justify-content: start;
2700
+ }
2701
+ nav[aria-label="breadcrumb"] ul li:not(:first-child) {
2702
+ margin-inline-start: var(--pico-nav-link-spacing-horizontal);
2703
+ }
2704
+ nav[aria-label="breadcrumb"] ul li a {
2705
+ margin: calc(var(--pico-nav-link-spacing-vertical) * -1) 0;
2706
+ margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) * -1);
2707
+ }
2708
+ nav[aria-label="breadcrumb"] ul li:not(:last-child)::after {
2709
+ display: inline-block;
2710
+ position: absolute;
2711
+ width: calc(var(--pico-nav-link-spacing-horizontal) * 4);
2712
+ margin: 0 calc(var(--pico-nav-link-spacing-horizontal) * -1);
2713
+ content: var(--pico-nav-breadcrumb-divider);
2714
+ color: var(--pico-muted-color);
2715
+ text-align: center;
2716
+ text-decoration: none;
2717
+ white-space: nowrap;
2718
+ }
2719
+ nav[aria-label="breadcrumb"] a[aria-current]:not([aria-current="false"]) {
2720
+ background-color: transparent;
2721
+ color: inherit;
2722
+ text-decoration: none;
2723
+ pointer-events: none;
2724
+ }
2725
+ aside nav,
2726
+ aside ol,
2727
+ aside ul,
2728
+ aside li {
2729
+ display: block;
2730
+ }
2731
+ aside li {
2732
+ padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5)
2733
+ var(--pico-nav-element-spacing-horizontal);
2734
+ }
2735
+ aside li a {
2736
+ display: block;
2737
+ }
2738
+ aside li [role="button"] {
2739
+ margin: inherit;
2740
+ }
2741
+ [dir="rtl"] nav[aria-label="breadcrumb"] ul li:not(:last-child) ::after {
2742
+ content: "\\";
2743
+ }
2744
+ /**
2745
+ * Progress
2746
+ */
2747
+ progress {
2748
+ display: inline-block;
2749
+ vertical-align: baseline;
2750
+ }
2751
+ progress {
2752
+ -webkit-appearance: none;
2753
+ -moz-appearance: none;
2754
+ display: inline-block;
2755
+ appearance: none;
2756
+ width: 100%;
2757
+ height: 0.5rem;
2758
+ margin-bottom: calc(var(--pico-spacing) * 0.5);
2759
+ overflow: hidden;
2760
+ border: 0;
2761
+ border-radius: var(--pico-border-radius);
2762
+ background-color: var(--pico-progress-background-color);
2763
+ color: var(--pico-progress-color);
2764
+ }
2765
+ progress::-webkit-progress-bar {
2766
+ border-radius: var(--pico-border-radius);
2767
+ background: none;
2768
+ }
2769
+ progress[value]::-webkit-progress-value {
2770
+ background-color: var(--pico-progress-color);
2771
+ -webkit-transition: inline-size var(--pico-transition);
2772
+ transition: inline-size var(--pico-transition);
2773
+ }
2774
+ progress::-moz-progress-bar {
2775
+ background-color: var(--pico-progress-color);
2776
+ }
2777
+ @media (prefers-reduced-motion: no-preference) {
2778
+ progress:indeterminate {
2779
+ background: var(--pico-progress-background-color)
2780
+ linear-gradient(
2781
+ to right,
2782
+ var(--pico-progress-color) 30%,
2783
+ var(--pico-progress-background-color) 30%
2784
+ )
2785
+ top left/150% 150% no-repeat;
2786
+ animation: progress-indeterminate 1s linear infinite;
2787
+ }
2788
+ progress:indeterminate[value]::-webkit-progress-value {
2789
+ background-color: transparent;
2790
+ }
2791
+ progress:indeterminate::-moz-progress-bar {
2792
+ background-color: transparent;
2793
+ }
2794
+ }
2795
+ @media (prefers-reduced-motion: no-preference) {
2796
+ [dir="rtl"] progress:indeterminate {
2797
+ animation-direction: reverse;
2798
+ }
2799
+ }
2800
+ @keyframes progress-indeterminate {
2801
+ 0% {
2802
+ background-position: 200% 0;
2803
+ }
2804
+ 100% {
2805
+ background-position: -200% 0;
2806
+ }
2807
+ }
2808
+ /**
2809
+ * Tooltip ([data-tooltip])
2810
+ */
2811
+ [data-tooltip] {
2812
+ position: relative;
2813
+ }
2814
+ [data-tooltip]:not(a, button, input, [role="button"]) {
2815
+ border-bottom: 1px dotted;
2816
+ text-decoration: none;
2817
+ cursor: help;
2818
+ }
2819
+ [data-tooltip][data-placement="top"]::before,
2820
+ [data-tooltip][data-placement="top"]::after,
2821
+ [data-tooltip]::before,
2822
+ [data-tooltip]::after {
2823
+ display: block;
2824
+ z-index: 99;
2825
+ position: absolute;
2826
+ bottom: 100%;
2827
+ left: 50%;
2828
+ padding: 0.25rem 0.5rem;
2829
+ overflow: hidden;
2830
+ transform: translate(-50%, -0.25rem);
2831
+ border-radius: var(--pico-border-radius);
2832
+ background: var(--pico-tooltip-background-color);
2833
+ content: attr(data-tooltip);
2834
+ color: var(--pico-tooltip-color);
2835
+ font-style: normal;
2836
+ font-weight: var(--pico-font-weight);
2837
+ font-size: 0.875rem;
2838
+ text-decoration: none;
2839
+ text-overflow: ellipsis;
2840
+ white-space: nowrap;
2841
+ opacity: 0;
2842
+ pointer-events: none;
2843
+ }
2844
+ [data-tooltip][data-placement="top"]::after,
2845
+ [data-tooltip]::after {
2846
+ padding: 0;
2847
+ transform: translate(-50%, 0rem);
2848
+ border-top: 0.3rem solid;
2849
+ border-right: 0.3rem solid transparent;
2850
+ border-left: 0.3rem solid transparent;
2851
+ border-radius: 0;
2852
+ background-color: transparent;
2853
+ content: "";
2854
+ color: var(--pico-tooltip-background-color);
2855
+ }
2856
+ [data-tooltip][data-placement="bottom"]::before,
2857
+ [data-tooltip][data-placement="bottom"]::after {
2858
+ top: 100%;
2859
+ bottom: auto;
2860
+ transform: translate(-50%, 0.25rem);
2861
+ }
2862
+ [data-tooltip][data-placement="bottom"]:after {
2863
+ transform: translate(-50%, -0.3rem);
2864
+ border: 0.3rem solid transparent;
2865
+ border-bottom: 0.3rem solid;
2866
+ }
2867
+ [data-tooltip][data-placement="left"]::before,
2868
+ [data-tooltip][data-placement="left"]::after {
2869
+ top: 50%;
2870
+ right: 100%;
2871
+ bottom: auto;
2872
+ left: auto;
2873
+ transform: translate(-0.25rem, -50%);
2874
+ }
2875
+ [data-tooltip][data-placement="left"]:after {
2876
+ transform: translate(0.3rem, -50%);
2877
+ border: 0.3rem solid transparent;
2878
+ border-left: 0.3rem solid;
2879
+ }
2880
+ [data-tooltip][data-placement="right"]::before,
2881
+ [data-tooltip][data-placement="right"]::after {
2882
+ top: 50%;
2883
+ right: auto;
2884
+ bottom: auto;
2885
+ left: 100%;
2886
+ transform: translate(0.25rem, -50%);
2887
+ }
2888
+ [data-tooltip][data-placement="right"]:after {
2889
+ transform: translate(-0.3rem, -50%);
2890
+ border: 0.3rem solid transparent;
2891
+ border-right: 0.3rem solid;
2892
+ }
2893
+ [data-tooltip]:focus::before,
2894
+ [data-tooltip]:focus::after,
2895
+ [data-tooltip]:hover::before,
2896
+ [data-tooltip]:hover::after {
2897
+ opacity: 1;
2898
+ }
2899
+ @media (hover: hover) and (pointer: fine) {
2900
+ [data-tooltip]:focus::before,
2901
+ [data-tooltip]:focus::after,
2902
+ [data-tooltip]:hover::before,
2903
+ [data-tooltip]:hover::after {
2904
+ --pico-tooltip-slide-to: translate(-50%, -0.25rem);
2905
+ transform: translate(-50%, 0.75rem);
2906
+ animation-duration: 0.2s;
2907
+ animation-fill-mode: forwards;
2908
+ animation-name: tooltip-slide;
2909
+ opacity: 0;
2910
+ }
2911
+ [data-tooltip]:focus::after,
2912
+ [data-tooltip]:hover::after {
2913
+ --pico-tooltip-caret-slide-to: translate(-50%, 0rem);
2914
+ transform: translate(-50%, -0.25rem);
2915
+ animation-name: tooltip-caret-slide;
2916
+ }
2917
+ [data-tooltip][data-placement="bottom"]:focus::before,
2918
+ [data-tooltip][data-placement="bottom"]:focus::after,
2919
+ [data-tooltip][data-placement="bottom"]:hover::before,
2920
+ [data-tooltip][data-placement="bottom"]:hover::after {
2921
+ --pico-tooltip-slide-to: translate(-50%, 0.25rem);
2922
+ transform: translate(-50%, -0.75rem);
2923
+ animation-name: tooltip-slide;
2924
+ }
2925
+ [data-tooltip][data-placement="bottom"]:focus::after,
2926
+ [data-tooltip][data-placement="bottom"]:hover::after {
2927
+ --pico-tooltip-caret-slide-to: translate(-50%, -0.3rem);
2928
+ transform: translate(-50%, -0.5rem);
2929
+ animation-name: tooltip-caret-slide;
2930
+ }
2931
+ [data-tooltip][data-placement="left"]:focus::before,
2932
+ [data-tooltip][data-placement="left"]:focus::after,
2933
+ [data-tooltip][data-placement="left"]:hover::before,
2934
+ [data-tooltip][data-placement="left"]:hover::after {
2935
+ --pico-tooltip-slide-to: translate(-0.25rem, -50%);
2936
+ transform: translate(0.75rem, -50%);
2937
+ animation-name: tooltip-slide;
2938
+ }
2939
+ [data-tooltip][data-placement="left"]:focus::after,
2940
+ [data-tooltip][data-placement="left"]:hover::after {
2941
+ --pico-tooltip-caret-slide-to: translate(0.3rem, -50%);
2942
+ transform: translate(0.05rem, -50%);
2943
+ animation-name: tooltip-caret-slide;
2944
+ }
2945
+ [data-tooltip][data-placement="right"]:focus::before,
2946
+ [data-tooltip][data-placement="right"]:focus::after,
2947
+ [data-tooltip][data-placement="right"]:hover::before,
2948
+ [data-tooltip][data-placement="right"]:hover::after {
2949
+ --pico-tooltip-slide-to: translate(0.25rem, -50%);
2950
+ transform: translate(-0.75rem, -50%);
2951
+ animation-name: tooltip-slide;
2952
+ }
2953
+ [data-tooltip][data-placement="right"]:focus::after,
2954
+ [data-tooltip][data-placement="right"]:hover::after {
2955
+ --pico-tooltip-caret-slide-to: translate(-0.3rem, -50%);
2956
+ transform: translate(-0.05rem, -50%);
2957
+ animation-name: tooltip-caret-slide;
2958
+ }
2959
+ }
2960
+ @keyframes tooltip-slide {
2961
+ to {
2962
+ transform: var(--pico-tooltip-slide-to);
2963
+ opacity: 1;
2964
+ }
2965
+ }
2966
+ @keyframes tooltip-caret-slide {
2967
+ 50% {
2968
+ opacity: 0;
2969
+ }
2970
+ to {
2971
+ transform: var(--pico-tooltip-caret-slide-to);
2972
+ opacity: 1;
2973
+ }
2974
+ }
2975
+ /**
2976
+ * Accessibility & User interaction
2977
+ */
2978
+ [aria-controls] {
2979
+ cursor: pointer;
2980
+ }
2981
+ [aria-disabled="true"],
2982
+ [disabled] {
2983
+ cursor: not-allowed;
2984
+ }
2985
+ [aria-hidden="false"][hidden] {
2986
+ display: initial;
2987
+ }
2988
+ [aria-hidden="false"][hidden]:not(:focus) {
2989
+ clip: rect(0, 0, 0, 0);
2990
+ position: absolute;
2991
+ }
2992
+ a,
2993
+ area,
2994
+ button,
2995
+ input,
2996
+ label,
2997
+ select,
2998
+ summary,
2999
+ textarea,
3000
+ [tabindex] {
3001
+ -ms-touch-action: manipulation;
3002
+ }
3003
+ [dir="rtl"] {
3004
+ direction: rtl;
3005
+ }
3006
+ /**
3007
+ * Reduce Motion Features
3008
+ */
3009
+ @media (prefers-reduced-motion: reduce) {
3010
+ *:not([aria-busy="true"]),
3011
+ :not([aria-busy="true"])::before,
3012
+ :not([aria-busy="true"])::after {
3013
+ background-attachment: initial !important;
3014
+ animation-duration: 1ms !important;
3015
+ animation-delay: -1ms !important;
3016
+ animation-iteration-count: 1 !important;
3017
+ scroll-behavior: auto !important;
3018
+ transition-delay: 0s !important;
3019
+ transition-duration: 0s !important;
3020
+ }
3021
+ }
3022
+ /*** Follows https://github.com/picocss/pico/blob/main/scss/_index.scss ***/
3023
+ /* Layout */
3024
+ /* Extends https://github.com/picocss/pico/blob/main/scss/layout/
3025
+ <!--section:docs-intro-->
3026
+
3027
+ Global styles:
3028
+ ```css */
3029
+ html {
3030
+ /* Prevent horizontal overflow and scrolling, modern way. */
3031
+ overflow-x: clip;
3032
+ }
3033
+ body {
3034
+ /* Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support). */
3035
+ min-height: 100dvh;
3036
+ }
3037
+ /*```
3038
+ <!--section:docs-->
3039
+
3040
+ ### Auto-columns
3041
+ ```css */
3042
+ .columns,
3043
+ [data-is-toc] > ul,
3044
+ [data-is-toc] > ol {
3045
+ -moz-columns: 30ch auto;
3046
+ columns: 30ch auto; /* 2 cols max for 65ch container */
3047
+ }
3048
+ /* Avoid breaking inside elements, such as nested lists */
3049
+ .columns > *, [data-is-toc] > ul > *, [data-is-toc] > ol > * {
3050
+ -moz-column-break-inside: avoid;
3051
+ break-inside: avoid;
3052
+ }
3053
+ /*```
3054
+
3055
+ Table of contents (`[data-is-toc]`) has auto-columns by default.
3056
+
3057
+ ### Jump to top
3058
+ ```css */
3059
+ [data-jump-to="top"] {
3060
+ position: fixed;
3061
+ bottom: 0;
3062
+ right: 0;
3063
+ padding-top: 50vh;
3064
+ opacity: 25%;
3065
+ }
3066
+ [data-jump-to="top"]:hover {
3067
+ opacity: 75%;
3068
+ }
3069
+ /*```
3070
+ <!--section--> */
3071
+ /* <!--section:code-->```css */
3072
+ .breakout,
3073
+ .breakout-all {
3074
+ /* Prepare the container for breakout elements */
3075
+ padding-inline: 10%;
3076
+ max-width: calc(10% + 65ch + 10%);
3077
+ }
3078
+ /* Breakout direct children only */
3079
+ .breakout > *:is(
3080
+ table,
3081
+ pre,
3082
+ figure, video, iframe, canvas,
3083
+ img, picture,
3084
+
3085
+ .breakout-item,
3086
+ .breakout-item-max
3087
+ ),
3088
+ .breakout-all > *:is(
3089
+ table,
3090
+ pre,
3091
+ figure, video, iframe, canvas,
3092
+ img, picture,
3093
+
3094
+ .breakout-item,
3095
+ .breakout-item-max
3096
+ ) {
3097
+ width: -moz-fit-content;
3098
+ width: fit-content;
3099
+ min-width: 100%;
3100
+ max-width: 125%;
3101
+ margin-left: 50%;
3102
+ transform: translateX(-50%);
3103
+ }
3104
+ /* Respect img/picture min-width */
3105
+ .breakout > *:is(img, picture), .breakout-all > *:is(img, picture) {
3106
+ min-width: auto;
3107
+ }
3108
+ /* Max out the width of the element */
3109
+ .breakout > *.breakout-item-max, .breakout-all > *.breakout-item-max {
3110
+ width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
3111
+ }
3112
+ .breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class]) {
3113
+ position: relative;
3114
+ }
3115
+ .breakout-all > *:is(h2, h3, h4, h5, h6, hr):not([class])::before {
3116
+ content: "";
3117
+ display: block;
3118
+ position: absolute;
3119
+ background: gray;
3120
+ opacity: 12.5%;
3121
+ }
3122
+ .breakout-all > *:is(h2, h3, h4, h5, h6):not([class])::before {
3123
+ width: 10em;
3124
+ right: 100%;
3125
+ margin-right: 0.8ch;
3126
+ height: 0.25em;
3127
+ top: 50%;
3128
+ transform: translateY(-50%);
3129
+ background: linear-gradient(to left, gray, transparent);
3130
+ }
3131
+ /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
3132
+ .breakout-all > *:is(h2, h3, h4, h5, h6):not([class]):where(hr + *)::before {
3133
+ display: none !important;
3134
+ }
3135
+ .breakout-all > *:is(hr) {
3136
+ height: 0.5rem;
3137
+ border: none;
3138
+ overflow: visible;
3139
+ }
3140
+ .breakout-all > *:is(hr)::before {
3141
+ width: 100vw;
3142
+ left: 50%;
3143
+ height: 100%;
3144
+ transform: translateX(-50%);
3145
+ }
3146
+ /*```
3147
+ <!--section:docs,summary-->
3148
+
3149
+ Framework-agnostic utilities for breaking out images and figures beyond their container width.
3150
+
3151
+ Use the `.breakout` class to allow elements to extend beyond their parent container.
3152
+
3153
+ <!--section:docs-->
3154
+
3155
+ ```html
3156
+ <div class="breakout">
3157
+ <img src="image.jpg" alt="Description" />
3158
+ </div>
3159
+ ```
3160
+
3161
+ The breakout container has `10%` inline padding and a max-width of `calc(10% + 65ch + 10%)`. The breakout utilities support images, pictures, figures, canvas, audio, video, tables, pre, iframe, and other media elements. Tables inside `.breakout` are specifically enhanced for horizontal scrolling and full-bleed mobile display. This is automatically included when you import the stylesheet.
3162
+
3163
+ <!--section--> */
3164
+ /* Content */
3165
+ /* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
3166
+ <!--section:docs-intro-->
3167
+
3168
+ Global styles:
3169
+ ```css */
3170
+ html {
3171
+ /* Enable font smoothing */
3172
+ -webkit-font-smoothing: antialiased;
3173
+ -moz-osx-font-smoothing: grayscale;
3174
+ }
3175
+ body {
3176
+ /* Evaluates the last ~4 lines of text blocks to prevent a single word from sitting on the final line. */
3177
+ text-wrap: pretty;
3178
+ /* Enable global hyphenation */
3179
+ hyphens: auto;
3180
+ /* ... except for links and tables which are better (safer) without hyphenation */
3181
+ }
3182
+ body a,
3183
+ body table {
3184
+ hyphens: none;
3185
+ }
3186
+ /*```
3187
+ <!--section:docs-->
3188
+
3189
+ ### Heading anchors
3190
+
3191
+ Set `data-is-anchor` attribute on anchors inside headings to position them absolutely, and show only on hover (when supported):
3192
+
3193
+ <article><h2>Heading with anchor <a href="#hwa" data-is-anchor>#</a></h2></article>
3194
+
3195
+ How it works:
3196
+ ```css */
3197
+ h1,
3198
+ h2,
3199
+ h3,
3200
+ h4,
3201
+ h5,
3202
+ h6 {
3203
+ position: relative;
3204
+ }
3205
+ h1 [data-is-anchor], h2 [data-is-anchor], h3 [data-is-anchor], h4 [data-is-anchor], h5 [data-is-anchor], h6 [data-is-anchor] {
3206
+ position: absolute;
3207
+ right: 100%;
3208
+ top: 50%;
3209
+ transform: translateY(-50%);
3210
+ padding-right: 0.2ch;
3211
+ color: silver;
3212
+ text-decoration: none;
3213
+ visibility: hidden;
3214
+ }
3215
+ /* Avoid double-tap on touch devices */
3216
+ @media (hover: hover) {
3217
+ h1:hover [data-is-anchor], h2:hover [data-is-anchor], h3:hover [data-is-anchor], h4:hover [data-is-anchor], h5:hover [data-is-anchor], h6:hover [data-is-anchor] {
3218
+ visibility: visible;
3219
+ }
3220
+ }
3221
+ /*```
3222
+ > **PRO-TIP** for 11ty + markdown-it-anchor: https://github.com/anyblades/eleventy-blades/blob/main/src/eleventy.config.js
3223
+
3224
+ ### List markers
3225
+
3226
+ Use inline `style="--list-marker:'🥷 '"` on `<ul>/<ol>` or even individual `<li>` to customize list markers:
3227
+ <article>
3228
+
3229
+ - Customize
3230
+ - list
3231
+ - markers
3232
+ - with [Blades CSS](https://blades.ninja/css/) {style="--list-marker:'🥷 '"}
3233
+
3234
+ {style="--list-marker:'🧊 '"}
3235
+ </article>
3236
+
3237
+ How it works:
3238
+ ```css */
3239
+ ul[style*="--list-marker:"], ol[style*="--list-marker:"] {
3240
+ list-style-type: var(--list-marker);
3241
+ }
3242
+ ul[style*="--list-marker:"] > li, ol[style*="--list-marker:"] > li {
3243
+ list-style-type: inherit;
3244
+ }
3245
+ ul li[style*="--list-marker:"], ol li[style*="--list-marker:"] {
3246
+ list-style-type: var(--list-marker);
3247
+ }
3248
+ ul li[data-marker]::marker, ol li[data-marker]::marker {
3249
+ /* ⚠️ `data-marker` works only in Chrome and Firefox */
3250
+ content: attr(data-marker) " ";
3251
+ }
3252
+ /*```
3253
+
3254
+ ### Unlist
3255
+
3256
+ Helper class to remove list styling at all:
3257
+ ```css */
3258
+ .unlist {
3259
+ padding-inline-start: 0;
3260
+ }
3261
+ .unlist > li {
3262
+ list-style: none;
3263
+ }
3264
+ /*```
3265
+ <!--section--> */
3266
+ /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
3267
+ <!--section:code-->
3268
+ ```css */
3269
+ /* Use inline flex only if link contains an icon */
3270
+ a:has(> i) {
3271
+ display: inline-flex;
3272
+ gap: 0.375ch; /* =3/8 */
3273
+ overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
3274
+ }
3275
+ a > i {
3276
+ font-style: normal;
3277
+ float: left; /* ✅ Chrome ❌ Safari */
3278
+ text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
3279
+ }
3280
+ /* Favicons */
3281
+ a > i > img {
3282
+ height: 1.25em;
3283
+ margin-block: calc(-0.25em / 2);
3284
+ display: inline-block; /* for Tailwind CSS Typography */
3285
+ }
3286
+ a > i[class^="fa-"],
3287
+ a > i[class*=" fa-"] {
3288
+ line-height: inherit;
3289
+ --fa-width: auto;
3290
+ }
3291
+ /* Font Awesome */
3292
+ a > i.fa-lg {
3293
+ line-height: normal;
3294
+ }
3295
+ /*```
3296
+ > **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
3297
+
3298
+ <!--section:docs,summary-->
3299
+
3300
+ Use Blades' `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links. It automatically handles sizing and alignment while preventing underline on icons.
3301
+
3302
+ <!--section:docs-->
3303
+
3304
+ Compare:
3305
+
3306
+ | Without Blades <hr class="lg"> | With Blades' `<i>`-helper <hr class="lg"> | Clean HTML without `<span>ning` <hr class="x2"> |
3307
+ | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
3308
+ | [🥷 Link with emoji](#) | [<i>🥷</i> Link with emoji](#) | `<a><i>🥷</i> Text</a>` |
3309
+ | [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Multi-line link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Multi-line link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>` |
3310
+ | [<b class="fa-brands fa-github fa-lg"></b> Link with Font Awesome icon](#) | [<i class="fa-brands fa-github fa-lg"></i> Link with Font Awesome icon](#) | `<a><i class="fa-..."></i> Text</a>` |
3311
+
3312
+ ---
3313
+
3314
+ [How we made it ↗ &nbsp;<small>(on Codepen)</small>](https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237){role=button .outline}
3315
+
3316
+ <!--section--> */
3317
+ /* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
3318
+ <!--section:docs-->
3319
+
3320
+ ### Horizontal expanders
3321
+
3322
+ Simply insert `<hr>` inside `<th>` to forcibly widen too narrow columns (especially useful in markdown):
3323
+ ```html
3324
+ <th>Col <hr></th>
3325
+ ```
3326
+ Example table before:
3327
+ <article class="overflow-auto"><table>
3328
+ <tr><th>Wide tables</th><th>with many</th><th>columns might</th><th>get collapsed</th><th>and be really</th><th>hard to read!</th></tr>
3329
+ </table></article>
3330
+
3331
+ Same table after adding `<hr>`-expanders:
3332
+ <article class="overflow-auto"><table>
3333
+ <tr><th>Wide tables <hr></th><th>with many <hr></th><th>columns might <hr></th><th>get collapsed <hr></th><th>and be really <hr></th><th>hard to read! <hr></th></tr>
3334
+ </table></article>
3335
+
3336
+ Living examples of big tables with `<hr>`-expanders:
3337
+ - https://any.digital/insights/ai-ide/
3338
+ - https://any.digital/insights/css-frameworks/
3339
+ - https://any.digital/insights/ssg/
3340
+ - https://blades.ninja/build-awesome-11ty/#min-starters
3341
+
3342
+ How it works:
3343
+ ```css */
3344
+ table th hr {
3345
+ width: 12ch; /* min ~65/12 = ~5 cols */
3346
+ height: 0;
3347
+ margin: 0;
3348
+ visibility: hidden;
3349
+ }
3350
+ table th hr.lg {
3351
+ width: 18ch;
3352
+ }
3353
+ table th hr.x2 {
3354
+ width: 24ch;
3355
+ }
3356
+ /*```
3357
+ ### Borderless table
3358
+
3359
+ `<table class="borderless">` removes all default borders:
3360
+
3361
+ <article>
3362
+
3363
+ | Less | borders |
3364
+ | ---- | ------- |
3365
+ | more | fun |
3366
+
3367
+ {.borderless}
3368
+ </article>
3369
+
3370
+ Living example: https://bladeswitch.com/#minimal-dependencies table
3371
+
3372
+ <!--section--> */
3373
+ table.borderless th,
3374
+ table.borderless td {
3375
+ border: none;
3376
+ }
3377
+ /* <!--section:code-->
3378
+ ```css */
3379
+ table.responsive,
3380
+ .breakout > table:not(.does-not-exist),
3381
+ .breakout-all > table:not(.does-not-exist) {
3382
+ /* Center horizontally */
3383
+ margin-left: 50%;
3384
+ transform: translateX(-50%);
3385
+
3386
+ /* Let them full-bleed */
3387
+ width: -moz-max-content;
3388
+ width: max-content;
3389
+ min-width: auto;
3390
+ max-width: 100vw;
3391
+ padding-inline: 7.5%;
3392
+
3393
+ /* Let them scroll */
3394
+ display: block;
3395
+ overflow-x: auto;
3396
+ -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
3397
+ }
3398
+ table.responsive th,
3399
+ table.responsive td,
3400
+ .breakout > table:not(.does-not-exist) th,
3401
+ .breakout > table:not(.does-not-exist) td,
3402
+ .breakout-all > table:not(.does-not-exist) th,
3403
+ .breakout-all > table:not(.does-not-exist) td {
3404
+ padding-inline-start: 0;
3405
+ }
3406
+ /*```
3407
+ <!--#TODO:css-blade-->
3408
+ Soft-increase selector specificity trick:
3409
+
3410
+ `table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
3411
+
3412
+ <!--section:docs,summary-->
3413
+
3414
+ `<table class="responsive">` allows a table to full-bleed and scroll on mobile.
3415
+
3416
+ <!--section:docs-->
3417
+
3418
+ | Term | Description <hr class="x2"> | Link |
3419
+ | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
3420
+ | Responsive design | Approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. | https://en.wikipedia.org/wiki/Responsive_web_design |
3421
+
3422
+ {.responsive}
3423
+
3424
+ ---
3425
+
3426
+ Tables inside https://blades.ninja/css/breakout/ are responsive by default.
3427
+
3428
+ Living examples:
3429
+
3430
+ - https://any.digital/insights/ai-ide/
3431
+ - https://any.digital/insights/css-frameworks/
3432
+ - https://any.digital/insights/ssg/
3433
+ - https://blades.ninja/build-awesome-11ty/#min-starters
3434
+
3435
+ <!--section--> */
3436
+ /* <!--section:docs-->
3437
+ ### Code
3438
+ Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
3439
+ ```css */
3440
+ pre {
3441
+ padding: 1rem 1.5rem;
3442
+ padding-inline-end: 2rem;
3443
+ }
3444
+ @media screen and (max-width: 767px) {
3445
+ pre {
3446
+ border-radius: 0
3447
+ }
3448
+ }
3449
+ /* Code block caption via data-attr (to display filename, etc.) */
3450
+ code[data-caption]::before {
3451
+ content: attr(data-caption);
3452
+ display: block;
3453
+ margin-bottom: 1rem;
3454
+ opacity: 50%;
3455
+ font-style: italic;
3456
+ }
3457
+ code:where(pre > *) {
3458
+ padding: 0;
3459
+ }
3460
+ /*** Extends https://github.com/PrismJS/prism/blob/master/plugins/treeview/prism-treeview.css ***/
3461
+ .token.treeview-part .entry-line {
3462
+ width: 2.5em !important;
3463
+ opacity: 25%;
3464
+ }
3465
+ .token.treeview-part .entry-name:last-child {
3466
+ opacity: 50%;
3467
+ }
3468
+ .token.treeview-part .entry-name:last-child::before {
3469
+ display: none !important;
3470
+ }
3471
+ /*``` <!--section--> */
3472
+ /* Forms */
3473
+ /* Moved here from https://github.com/anyblades/float-label-css for easier maintenance
3474
+ <!--section:docs-->
3475
+
3476
+ First, we target either:
3477
+ 1. `<label>` which `:has` inner form inputs (classless approach)
3478
+ 2. or explicit `.has-float-label` class (alternative approach)
3479
+ ```css */
3480
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
3481
+ .has-float-label {
3482
+ display: block;
3483
+ position: relative;
3484
+ }
3485
+ /*
3486
+ ```
3487
+ Then, we define the default/fallback state (when the float label should be minimized):
3488
+ ```css */
3489
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
3490
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
3491
+ .has-float-label > span,
3492
+ .has-float-label label {
3493
+ position: absolute;
3494
+ left: 0;
3495
+ top: 0;
3496
+ cursor: text;
3497
+ font-size: 75%;
3498
+ }
3499
+ /*
3500
+ ```
3501
+ Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
3502
+ ```css */
3503
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
3504
+ opacity: 0;
3505
+ }
3506
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
3507
+ opacity: 0;
3508
+ }
3509
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
3510
+ opacity: 0;
3511
+ }
3512
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
3513
+ font-size: inherit;
3514
+ opacity: 50%;
3515
+ }
3516
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
3517
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
3518
+ .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
3519
+ .has-float-label:has(*:placeholder-shown:not(:focus)) label {
3520
+ font-size: inherit;
3521
+ opacity: 50%;
3522
+ }
3523
+ /*
3524
+ ```
3525
+ The `:has(*:placeholder-shown:not(:focus))` trick allows this input state information to *propagate* to the parent level. This enables modern CSS to target inner float label (`<span>` or `<label>`) regardless of its position relative to the input field.
3526
+
3527
+ Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
3528
+ <!--section--> */
3529
+ /* Utilities */
3530
+ /*
3531
+ <!--section:docs-->
3532
+
3533
+ ### Auto-dark
3534
+ ```css */
3535
+ @media (prefers-color-scheme: dark) {
3536
+ :root:not([data-theme="light"]) .dark-auto {
3537
+ filter: invert(100%) hue-rotate(180deg);
3538
+ }
3539
+ }
3540
+ /*```
3541
+
3542
+ ### Faded
3543
+ ```css */
3544
+ .faded {
3545
+ opacity: 50%;
3546
+ }
3547
+ .faded:hover {
3548
+ opacity: 87.5%;
3549
+ }
3550
+ /*```
3551
+
3552
+ ### Invert
3553
+ ```css */
3554
+ /* Extends https://tailwindcss.com/docs/filter-invert */
3555
+ /* Fix the scrollbar color when inverted */
3556
+ .invert ::-webkit-scrollbar {
3557
+ filter: invert(1) !important;
3558
+ }
3559
+ /*``` <!--section--> */
3560
+ /* <!--section:code-->
3561
+ ```css */
3562
+ /* Default/fallback state */
3563
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
3564
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
3565
+ .has-float-label > span,
3566
+ .has-float-label label {
3567
+ padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
3568
+ padding-block-start: 0.25rem;
3569
+ opacity: 75%;
3570
+ transition: all 0.25s;
3571
+ }
3572
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
3573
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
3574
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
3575
+ .has-float-label input,
3576
+ .has-float-label textarea,
3577
+ .has-float-label select {
3578
+ margin-block-start: 0; /* reset Pico */
3579
+ padding-inline-start: 1rem; /* match Pico */
3580
+ padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
3581
+ }
3582
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
3583
+ opacity: 100%;
3584
+ -moz-transition: all 0.25s;
3585
+ transition: all 0.25s;
3586
+ }
3587
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
3588
+ opacity: 100%;
3589
+ transition: all 0.25s;
3590
+ }
3591
+ /* Enlarged state */
3592
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
3593
+ padding-block: 0.75rem; /* match Pico */
3594
+ }
3595
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
3596
+ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
3597
+ .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
3598
+ .has-float-label:has(*:placeholder-shown:not(:focus)) label {
3599
+ padding-block: 0.75rem; /* match Pico */
3600
+ }
3601
+ body {
3602
+ /* Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts. */
3603
+ display: flex;
3604
+ flex-direction: column;
3605
+ }
3606
+ body > main {
3607
+ flex-grow: 1;
3608
+ }
3609
+ a:not([href^="#"]) {
3610
+ text-decoration-thickness: 1px;
3611
+ }
3612
+ a:not([href^="#"]):hover {
3613
+ text-decoration-thickness: 2px;
3614
+ }
3615
+ h1 {
3616
+ font-size: 2.5em; /* for pico.css & tw-typography */
3617
+ margin-bottom: 1rem; /* for tw-typography */
3618
+ }
3619
+ /* Potential fix https://github.com/picocss/pico/blob/main/css/pico.css for the very first headings
3620
+ :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
3621
+ margin-top: var(--pico-typography-spacing-top);
3622
+ }
3623
+ h1,
3624
+ h2,
3625
+ h3,
3626
+ h4,
3627
+ h5,
3628
+ h6 {
3629
+ & ~ & {
3630
+ margin-bottom: 2rem;
3631
+ }
3632
+ }
3633
+ NOTE: be careful with wrapped headings, i.e. inside nav: https://blades.ninja/build-awesome-11ty/#usage
3634
+ */
3635
+ hr {
3636
+ margin-block: 2em; /* for pico.css & tw-typography */
3637
+ }
3638
+ ul ul {
3639
+ font-size: 87.5%;
3640
+ }
3641
+ pre small {
3642
+ opacity: 75%;
3643
+ font-weight: lighter;
3644
+ }
3645
+ table th {
3646
+ vertical-align: bottom;
3647
+ font-weight: bold;
3648
+ }
3649
+ table td {
3650
+ vertical-align: top;
3651
+ }
3652
+ table pre {
3653
+ margin-bottom: 0.25rem;
3654
+ }
3655
+ [data-jump-to="top"] > i {
3656
+ display: inline-block;
3657
+ padding: 0.25rem 0.375rem;
3658
+ margin: 0.5rem;
3659
+ font-size: 0.75rem;
3660
+ color: black;
3661
+ border-color: black;
3662
+ }
3663
+ [data-is-toc] {
3664
+ font-size: 87.5%;
3665
+ }
3666
+ [data-is-toc] a {
3667
+ text-decoration: none;
3668
+ }
3669
+ [data-is-toc] > ul > * > a {
3670
+ font-weight: 500;
3671
+ }
3672
+ .breakout > img,
3673
+ .breakout > figure,
3674
+ .breakout-all > img,
3675
+ .breakout-all > figure {
3676
+ margin-bottom: 1rem;
3677
+ }
3678
+ .faded a {
3679
+ text-decoration-style: dotted;
3680
+ }
3681
+ /*```
3682
+ <!--section--> */