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