crieur 2.0.2__py3-none-any.whl

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