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