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