@anyblades/blades 3.1.0-beta.7 → 3.1.0

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