ortoni-report 1.0.8 → 1.1.0

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