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