1@charset "UTF-8";
2:root {
3 --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
4 --line-height: 1.5;
5 --font-weight: 400;
6 --font-size: 16px;
7 --border-radius: 0.25rem;
8 --border-width: 1px;
9 --outline-width: 3px;
10 --spacing: 1rem;
11 --typography-spacing-vertical: 1.5rem;
12 --block-spacing-vertical: calc(var(--spacing) * 2);
13 --block-spacing-horizontal: var(--spacing);
14 --grid-spacing-vertical: 0;
15 --grid-spacing-horizontal: var(--spacing);
16 --form-element-spacing-vertical: 0.75rem;
17 --form-element-spacing-horizontal: 1rem;
18 --nav-element-spacing-vertical: 1rem;
19 --nav-element-spacing-horizontal: 0.5rem;
20 --nav-link-spacing-vertical: 0.5rem;
21 --nav-link-spacing-horizontal: 0.5rem;
22 --form-label-font-weight: var(--font-weight);
23 --transition: 0.2s ease-in-out
24}
25
26@media (min-width: 576px) {
27 :root {
28 --font-size: 17px
29 }
30}
31
32@media (min-width: 768px) {
33 :root {
34 --font-size: 18px
35 }
36}
37
38@media (min-width: 992px) {
39 :root {
40 --font-size: 19px
41 }
42}
43
44@media (min-width: 1200px) {
45 :root {
46 --font-size: 20px
47 }
48}
49
50@media (min-width: 576px) {
51 body > footer, body > header, body > main, section {
52 --block-spacing-vertical: calc(var(--spacing) * 2.5)
53 }
54}
55
56@media (min-width: 768px) {
57 body > footer, body > header, body > main, section {
58 --block-spacing-vertical: calc(var(--spacing) * 3)
59 }
60}
61
62@media (min-width: 992px) {
63 body > footer, body > header, body > main, section {
64 --block-spacing-vertical: calc(var(--spacing) * 3.5)
65 }
66}
67
68@media (min-width: 1200px) {
69 body > footer, body > header, body > main, section {
70 --block-spacing-vertical: calc(var(--spacing) * 4)
71 }
72}
73
74@media (min-width: 576px) {
75 article {
76 --block-spacing-horizontal: calc(var(--spacing) * 1.25)
77 }
78}
79
80@media (min-width: 768px) {
81 article {
82 --block-spacing-horizontal: calc(var(--spacing) * 1.5)
83 }
84}
85
86@media (min-width: 992px) {
87 article {
88 --block-spacing-horizontal: calc(var(--spacing) * 1.75)
89 }
90}
91
92@media (min-width: 1200px) {
93 article {
94 --block-spacing-horizontal: calc(var(--spacing) * 2)
95 }
96}
97
98a {
99 --text-decoration: none
100}
101
102h1, h2, h3, h4, h5, h6 {
103 --font-weight: 700
104}
105
106h1 {
107 --font-size: 2rem;
108 --typography-spacing-vertical: 3rem
109}
110
111h2 {
112 --font-size: 1.75rem;
113 --typography-spacing-vertical: 2.625rem
114}
115
116h3 {
117 --font-size: 1.5rem;
118 --typography-spacing-vertical: 2.25rem
119}
120
121h4 {
122 --font-size: 1.25rem;
123 --typography-spacing-vertical: 1.874rem
124}
125
126h5 {
127 --font-size: 1.125rem;
128 --typography-spacing-vertical: 1.6875rem
129}
130
131:root:not([data-theme=dark]), [data-theme=light] {
132 color-scheme: light;
133 --background-color: #fff;
134 --color: #415462;
135 --h1-color: #1b2832;
136 --h2-color: #24333e;
137 --h3-color: #2c3d49;
138 --h4-color: #374956;
139 --h5-color: #415462;
140 --h6-color: #4d606d;
141 --muted-color: #73828c;
142 --muted-border-color: #edf0f3;
143 --primary: #1095c1;
144 --primary-hover: #08769b;
145 --primary-focus: rgba(16, 149, 193, 0.125);
146 --primary-inverse: #fff;
147 --secondary: #596b78;
148 --secondary-hover: #415462;
149 --secondary-focus: rgba(89, 107, 120, 0.125);
150 --secondary-inverse: #fff;
151 --contrast: #1b2832;
152 --contrast-hover: #000;
153 --contrast-focus: rgba(89, 107, 120, 0.125);
154 --contrast-inverse: #fff;
155 --mark-background-color: #fff2ca;
156 --mark-color: #543a26;
157 --ins-color: #388e3c;
158 --del-color: #c62828;
159 --blockquote-border-color: var(--muted-border-color);
160 --blockquote-footer-color: var(--muted-color);
161 --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
162 --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
163 --form-element-background-color: transparent;
164 --form-element-border-color: #a2afb9;
165 --form-element-color: var(--color);
166 --form-element-placeholder-color: var(--muted-color);
167 --form-element-active-background-color: transparent;
168 --form-element-active-border-color: var(--primary);
169 --form-element-focus-color: var(--primary-focus);
170 --form-element-disabled-background-color: #d5dce2;
171 --form-element-disabled-border-color: #a2afb9;
172 --form-element-disabled-opacity: 0.5;
173 --form-element-invalid-border-color: #c62828;
174 --form-element-invalid-active-border-color: #d32f2f;
175 --form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);
176 --form-element-valid-border-color: #388e3c;
177 --form-element-valid-active-border-color: #43a047;
178 --form-element-valid-focus-color: rgba(67, 160, 71, 0.125);
179 --switch-background-color: #bbc6ce;
180 --switch-color: var(--primary-inverse);
181 --switch-checked-background-color: var(--primary);
182 --range-border-color: #d5dce2;
183 --range-active-border-color: #bbc6ce;
184 --range-thumb-border-color: var(--background-color);
185 --range-thumb-color: var(--secondary);
186 --range-thumb-hover-color: var(--secondary-hover);
187 --range-thumb-active-color: var(--primary);
188 --table-border-color: var(--muted-border-color);
189 --table-row-stripped-background-color: #f6f8f9;
190 --code-background-color: #edf0f3;
191 --code-color: var(--muted-color);
192 --code-kbd-background-color: var(--contrast);
193 --code-kbd-color: var(--contrast-inverse);
194 --code-tag-color: #b34d80;
195 --code-property-color: #3d888f;
196 --code-value-color: #998866;
197 --code-comment-color: #a2afb9;
198 --accordion-border-color: var(--muted-border-color);
199 --accordion-close-summary-color: var(--color);
200 --accordion-open-summary-color: var(--muted-color);
201 --card-background-color: var(--background-color);
202 --card-border-color: var(--muted-border-color);
203 --card-box-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024);
204 --card-sectionning-background-color: #fbfbfc;
205 --dropdown-background-color: #fbfbfc;
206 --dropdown-border-color: #e1e6eb;
207 --dropdown-box-shadow: var(--card-box-shadow);
208 --dropdown-color: var(--color);
209 --dropdown-hover-background-color: #edf0f3;
210 --modal-overlay-background-color: rgba(213, 220, 226, 0.8);
211 --progress-background-color: #d5dce2;
212 --progress-color: var(--primary);
213 --loading-spinner-opacity: 0.5;
214 --tooltip-background-color: var(--contrast);
215 --tooltip-color: var(--contrast-inverse);
216 --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='%23FFF' 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");
217 --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='rgba(65, 84, 98, 0.999)' 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");
218 --icon-chevron-button: 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='rgba(255, 255, 255, 0.999)' 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");
219 --icon-chevron-button-inverse: 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='rgba(255, 255, 255, 0.999)' 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");
220 --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='rgba(115, 130, 140, 0.999)' stroke-width='4' 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");
221 --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='rgba(65, 84, 98, 0.999)' 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");
222 --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='rgba(198, 40, 40, 0.999)' 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");
223 --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='%23FFF' 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");
224 --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='rgba(65, 84, 98, 0.999)' stroke-width='2' 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");
225 --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='rgba(65, 84, 98, 0.999)' 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");
226 --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='rgba(56, 142, 60, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")
227}
228
229*, ::after, ::before {
230 box-sizing: border-box;
231 background-repeat: no-repeat
232}
233
234::after, ::before {
235 text-decoration: inherit;
236 vertical-align: inherit
237}
238
239:where(:root) {
240 -webkit-tap-highlight-color: transparent;
241 -webkit-text-size-adjust: 100%;
242 -moz-text-size-adjust: 100%;
243 text-size-adjust: 100%;
244 text-rendering: optimizeLegibility;
245 background-color: var(--background-color);
246 color: var(--color);
247 font-weight: var(--font-weight);
248 font-size: var(--font-size);
249 line-height: var(--line-height);
250 font-family: var(--font-family);
251 overflow-wrap: break-word;
252 cursor: default;
253 -moz-tab-size: 4;
254 -o-tab-size: 4;
255 tab-size: 4
256}
257
258main {
259 display: block
260}
261
262body {
263 width: 100%;
264 margin: 0
265}
266
267body > footer, body > header, body > main {
268 width: 100%;
269 margin-right: auto;
270 margin-left: auto;
271 padding: 1rem
272}
273
274.container, .container-fluid {
275 width: 100%;
276 margin-right: auto;
277 margin-left: auto;
278 padding-right: var(--spacing);
279 padding-left: var(--spacing)
280}
281
282@media (min-width: 576px) {
283 .container {
284 max-width: 510px;
285 padding-right: 0;
286 padding-left: 0
287 }
288}
289
290@media (min-width: 768px) {
291 .container {
292 max-width: 700px
293 }
294}
295
296@media (min-width: 992px) {
297 .container {
298 max-width: 800px
299 }
300}
301
302section {
303 margin-bottom: var(--block-spacing-vertical)
304}
305
306.grid {
307 grid-column-gap: var(--grid-spacing-horizontal);
308 grid-row-gap: var(--grid-spacing-vertical);
309 display: grid;
310 grid-template-columns:1fr;
311 margin: 0
312}
313
314@media (min-width: 992px) {
315 .grid {
316 grid-template-columns:repeat(auto-fit, minmax(0%, 1fr))
317 }
318}
319
320.grid > * {
321 min-width: 0
322}
323
324b, strong {
325 font-weight: bolder
326}
327
328address, blockquote, dl, figure, form, ol, p, table, ul {
329 margin-top: 0;
330 margin-bottom: var(--typography-spacing-vertical);
331 color: var(--color);
332 font-style: normal;
333 font-weight: var(--font-weight);
334 font-size: var(--font-size)
335}
336
337[role=link], a {
338 --color: var(--primary);
339 ckground-color: transparent;
340 outline: 0;
341 background-color: var(--background-color);
342 color: var(--color);
343 -webkit-text-decoration: var(--text-decoration);
344 text-decoration: var(--text-decoration);
345 transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
346 transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
347 transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition)
348}
349
350[role=link]:is([aria-current],:hover,:active,:focus), a:is([aria-current],:hover,:active,:focus) {
351 --color: var(--primary-hover);
352 --text-decoration: underline
353}
354
355[role=link]:focus, a:focus {
356 --background-color: var(--primary-focus)
357}
358
359[role=link].secondary, a.secondary {
360 --color: var(--secondary)
361}
362
363[role=link].secondary:is([aria-current],:hover,:active,:focus), a.secondary:is([aria-current],:hover,:active,:focus) {
364 --color: var(--secondary-hover)
365}
366
367[role=link].secondary:focus, a.secondary:focus {
368 --background-color: var(--secondary-focus)
369}
370
371[role=link].contrast, a.contrast {
372 --color: var(--contrast)
373}
374
375[role=link].contrast:is([aria-current],:hover,:active,:focus), a.contrast:is([aria-current],:hover,:active,:focus) {
376 --color: var(--contrast-hover)
377}
378
379[role=link].contrast:focus, a.contrast:focus {
380 --background-color: var(--contrast-focus)
381}
382
383h1, h2, h3, h4, h5, h6 {
384 margin-top: 0;
385 margin-bottom: var(--typography-spacing-vertical);
386 color: var(--color);
387 font-weight: var(--font-weight);
388 font-size: var(--font-size);
389 font-family: var(--font-family)
390}
391
392h1 {
393 --color: var(--h1-color)
394}
395
396h2 {
397 --color: var(--h2-color)
398}
399
400h3 {
401 --color: var(--h3-color)
402}
403
404h4 {
405 --color: var(--h4-color)
406}
407
408h5 {
409 --color: var(--h5-color)
410}
411
412h6 {
413 --color: var(--h6-color)
414}
415
416:where(address,blockquote,dl,figure,form,ol,p,table,ul) ~ :is(h1,h2,h3,h4,h5,h6) {
417 margin-top: var(--typography-spacing-vertical)
418}
419
420.headings, hgroup {
421 margin-bottom: var(--typography-spacing-vertical)
422}
423
424.headings > *, hgroup > * {
425 margin-bottom: 0
426}
427
428.headings > :last-child, hgroup > :last-child {
429 --color: var(--muted-color);
430 --font-weight: unset;
431 font-size: 1rem;
432 font-family: unset
433}
434
435p {
436 margin-bottom: var(--typography-spacing-vertical)
437}
438
439:where(dl,ol,ul) {
440 padding-right: 0;
441 padding-left: var(--spacing);
442 -webkit-padding-start: var(--spacing);
443 padding-inline-start: var(--spacing);
444 -webkit-padding-end: 0;
445 padding-inline-end: 0
446}
447
448:where(dl,ol,ul) li {
449 margin-bottom: calc(var(--typography-spacing-vertical) * .25)
450}
451
452:where(dl,ol,ul):is(dl,ol,ul) {
453 margin: calc(var(--typography-spacing-vertical) * .25) 0 0
454}
455
456ul li {
457 list-style: square;
458}
459
460mark {
461 padding: 0.125rem 0.25rem;
462 background-color: var(--mark-background-color);
463 color: var(--mark-color);
464 vertical-align: baseline
465}
466
467abbr[title] {
468 border-bottom: 1px dotted;
469 text-decoration: none;
470 cursor: help
471}
472
473::-moz-selection {
474 background-color: var(--primary-focus)
475}
476
477::selection {
478 background-color: var(--primary-focus)
479}
480
481:where(audio,canvas,iframe,img,svg,video) {
482 vertical-align: middle
483}
484
485legend {
486 max-width: 100%;
487 padding: 0;
488 color: inherit;
489 white-space: normal
490}
491
492::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
493 height: auto
494}
495
496fieldset legend, label {
497 display: block;
498 margin-bottom: calc(var(--spacing) * .25);
499 font-weight: var(--form-label-font-weight, var(--font-weight))
500}
501
502[type=color]::-webkit-color-swatch-wrapper {
503 padding: 0
504}
505
506kbd, samp {
507 font-size: 0.875em;
508 font-family: var(--font-family)
509}
510
511kbd {
512 border-radius: var(--border-radius);
513 background: var(--eode-background-color);
514 color: var(--code-color);
515 font-weight: var(--font-weight);
516 line-height: initial
517}
518
519 kbd {
520 display: inline-block;
521 padding: 0.375rem 0.5rem
522}
523
524kbd {
525 background-color: var(--code-kbd-background-color);
526 color: var(--code-kbd-color);
527 vertical-align: baseline
528}
529
530hr {
531 height: 0;
532 border: 0;
533 border-top: 1px solid var(--muted-border-color);
534 color: inherit
535}
536
537[hidden], template {
538 display: none !important
539}
540
541article {
542 margin: var(--block-spacing-vertical) 0;
543 padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
544 border-radius: var(--border-radius);
545 background: var(--card-background-color);
546 box-shadow: var(--card-box-shadow)
547}
548
549article > footer, article > header {
550 margin-right: calc(var(--block-spacing-horizontal) * -1);
551 margin-left: calc(var(--block-spacing-horizontal) * -1);
552 padding: calc(var(--block-spacing-vertical) * .66) var(--block-spacing-horizontal);
553 background-color: var(--card-sectionning-background-color)
554}
555
556article > header {
557 margin-top: calc(var(--block-spacing-vertical) * -1);
558 margin-bottom: var(--block-spacing-vertical);
559 border-bottom: var(--border-width) solid var(--card-border-color)
560}
561
562article > footer {
563 margin-top: var(--block-spacing-vertical);
564 margin-bottom: calc(var(--block-spacing-vertical) * -1);
565 border-top: var(--border-width) solid var(--card-border-color)
566}
567
568:root {
569 --scrollbar-width: 0
570}
571
572dialog article {
573 max-height: calc(100vh - var(--spacing) * 2);
574 overflow: auto
575}
576
577@media (min-width: 576px) {
578 dialog article {
579 max-width: 510px
580 }
581}
582
583@media (min-width: 768px) {
584 dialog article {
585 max-width: 700px
586 }
587}
588
589dialog article > footer, dialog article > header {
590 padding: calc(var(--block-spacing-vertical) * .5) var(--block-spacing-horizontal)
591}
592
593dialog article > header .close {
594 margin: 0 0 0 var(--spacing);
595 float: right
596}
597
598dialog article > footer {
599 text-align: right
600}
601
602dialog article > footer [role=button] {
603 margin-bottom: 0
604}
605
606dialog article > footer [role=button]:not(:first-of-type) {
607 margin-left: calc(var(--spacing) * .5)
608}
609
610dialog article p:last-of-type {
611 margin: 0
612}
613
614dialog article .close {
615 display: block;
616 width: 1rem;
617 height: 1rem;
618 margin-top: calc(var(--block-spacing-vertical) * -.5);
619 margin-bottom: var(--typography-spacing-vertical);
620 margin-left: auto;
621 background-image: var(--icon-close);
622 background-position: center;
623 background-size: auto 1rem;
624 background-repeat: no-repeat;
625 opacity: 0.5;
626 transition: opacity var(--transition)
627}
628
629dialog article .close:is([aria-current],:hover,:active,:focus) {
630 opacity: 1
631}
632
633dialog:not([open]), dialog[open=false] {
634 display: none
635}
636
637.modal-is-open {
638 padding-right: var(--scrollbar-width, 0);
639 overflow: hidden;
640 pointer-events: none
641}
642
643.modal-is-open dialog {
644 pointer-events: auto
645}
646
647:where(.modal-is-opening,.modal-is-closing) dialog, :where(.modal-is-opening,.modal-is-closing) dialog > article {
648 -webkit-animation-duration: 0.2s;
649 animation-duration: 0.2s;
650 -webkit-animation-timing-function: ease-in-out;
651 animation-timing-function: ease-in-out;
652 -webkit-animation-fill-mode: both;
653 animation-fill-mode: both
654}
655
656:where(.modal-is-opening,.modal-is-closing) dialog {
657 -webkit-animation-duration: 0.8s;
658 animation-duration: 0.8s;
659 -webkit-animation-name: fadeIn;
660 animation-name: fadeIn
661}
662
663:where(.modal-is-opening,.modal-is-closing) dialog > article {
664 -webkit-animation-delay: 0.2s;
665 animation-delay: 0.2s;
666 -webkit-animation-name: slideInDown;
667 animation-name: slideInDown
668}
669
670.modal-is-closing dialog, .modal-is-closing dialog > article {
671 -webkit-animation-delay: 0s;
672 animation-delay: 0s;
673 animation-direction: reverse
674}
675
676:where(nav li)::before {
677 float: left;
678 content: "​"
679}
680
681nav, nav ul {
682 display: flex
683}
684
685nav {
686 justify-content: space-between
687}
688
689nav ol, nav ul {
690 align-items: center;
691 margin-bottom: 0;
692 padding: 0;
693 list-style: none
694}
695
696nav ol:first-of-type, nav ul:first-of-type {
697 margin-left: calc(var(--nav-element-spacing-horizontal) * -1)
698}
699
700nav ol:last-of-type, nav ul:last-of-type {
701 margin-right: calc(var(--nav-element-spacing-horizontal) * -1)
702}
703
704nav li {
705 display: inline-block;
706 margin: 0;
707 padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal)
708}
709
710nav li > * {
711 --spacing: 0
712}
713
714nav:where(a,[role=link]) {
715 display: inline-block;
716 margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);
717 padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);
718 border-radius: var(--border-radius);
719 text-decoration: none
720}
721
722nav:where(a,[role=link]):is([aria-current],:hover,:active,:focus) {
723 text-decoration: none
724}
725
726nav [role=button] {
727 margin-right: inherit;
728 margin-left: inherit;
729 padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal)
730}
731
732details[role=list], li[role=list] {
733 position: relative
734}
735
736details[role=list] summary + ul, li[role=list] > ul {
737 display: flex;
738 z-index: 99;
739 position: absolute;
740 top: auto;
741 right: 0;
742 left: 0;
743 flex-direction: column;
744 margin: 0;
745 padding: 0;
746 border: var(--border-width) solid var(--dropdown-border-color);
747 border-radius: var(--border-radius);
748 border-top-right-radius: 0;
749 border-top-left-radius: 0;
750 background-color: var(--dropdown-background-color);
751 box-shadow: var(--card-box-shadow);
752 color: var(--dropdown-color);
753 white-space: nowrap
754}
755
756details[role=list] summary + ul li, li[role=list] > ul li {
757 width: 100%;
758 margin-bottom: 0;
759 padding: calc(var(--form-element-spacing-vertical) * .5) var(--form-element-spacing-horizontal);
760 list-style: none
761}
762
763details[role=list] summary + ul li:first-of-type, li[role=list] > ul li:first-of-type {
764 margin-top: calc(var(--form-element-spacing-vertical) * .5)
765}
766
767details[role=list] summary + ul li:last-of-type, li[role=list] > ul li:last-of-type {
768 margin-bottom: calc(var(--form-element-spacing-vertical) * .5)
769}
770
771details[role=list] summary + ul li a, li[role=list] > ul li a {
772 display: block;
773 margin: calc(var(--form-element-spacing-vertical) * -.5) calc(var(--form-element-spacing-horizontal) * -1);
774 padding: calc(var(--form-element-spacing-vertical) * .5) var(--form-element-spacing-horizontal);
775 overflow: hidden;
776 color: var(--dropdown-color);
777 text-decoration: none;
778 text-overflow: ellipsis
779}
780
781details[role=list] summary + ul li a:hover, li[role=list] > ul li a:hover {
782 background-color: var(--dropdown-hover-background-color)
783}
784
785details[role=list] summary::after, li[role=list] > a::after {
786 display: block;
787 width: 1rem;
788 height: calc(1rem * var(--line-height, 1.5));
789 -webkit-margin-start: 0.5rem;
790 margin-inline-start: 0.5rem;
791 float: right;
792 transform: rotate(0);
793 background-position: right center;
794 background-size: 1rem auto;
795 background-repeat: no-repeat;
796 content: ""
797}
798
799nav details[role=list] summary + ul, nav li[role=list] > ul {
800 min-width: -webkit-fit-content;
801 min-width: -moz-fit-content;
802 min-width: fit-content;
803 border-radius: var(--border-radius)
804}
805
806nav details[role=list] summary + ul li a, nav li[role=list] > ul li a {
807 border-radius: 0
808}
809
810nav details[role=list] summary, nav details[role=list] summary:not([role]) {
811 height: auto;
812 padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal)
813}
814
815nav details[role=list][open] summary {
816 border-radius: var(--border-radius)
817}
818
819nav details[role=list] summary + ul {
820 margin-top: var(--outline-width);
821 -webkit-margin-start: 0;
822 margin-inline-start: 0
823}
824
825nav details[role=list] summary[role=link] {
826 margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);
827 line-height: var(--line-height)
828}
829
830nav details[role=list] summary[role=link] + ul {
831 margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
832 -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1);
833 margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1)
834}
835
836li[role=list] a:active ~ ul, li[role=list] a:focus ~ ul, li[role=list]:hover > ul {
837 display: flex
838}
839
840li[role=list] > ul {
841 display: none;
842 margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));
843 -webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));
844 margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal))
845}
846
847li[role=list] > a::after {
848 background-image: var(--icon-chevron)
849}