@anyblades/blades 2.3.0 → 2.3.1

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