From c5a1ffc733a8349613e5eefb32c4abc97e4c0938 Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Sat, 22 Oct 2022 13:11:51 +0700 Subject: [PATCH] refactor: prefix css vars --- css/pico.classless.css | 1500 +++++++++++------------ css/pico.classless.css.map | 2 +- css/pico.classless.min.css | 4 +- css/pico.css | 1568 ++++++++++++------------ css/pico.css.map | 2 +- css/pico.min.css | 4 +- scss/_settings.scss | 6 + scss/components/_accordion.scss | 36 +- scss/components/_card.scss | 40 +- scss/components/_dropdown.scss | 81 +- scss/components/_loading.scss | 8 +- scss/components/_modal.scss | 50 +- scss/components/_nav.scss | 31 +- scss/components/_progress.scss | 24 +- scss/components/_tooltip.scss | 14 +- scss/content/_button.scss | 110 +- scss/content/_code.scss | 32 +- scss/content/_embedded.scss | 2 + scss/content/_miscs.scss | 6 +- scss/content/_table.scss | 16 +- scss/content/_typography.scss | 120 +- scss/forms/_basics.scss | 134 +- scss/forms/_checkbox-radio-switch.scss | 50 +- scss/forms/_input-color.scss | 4 +- scss/forms/_input-date.scss | 22 +- scss/forms/_input-file.scss | 44 +- scss/forms/_input-range.scss | 24 +- scss/forms/_input-search.scss | 16 +- scss/layout/_container.scss | 32 +- scss/layout/_document.scss | 14 +- scss/layout/_grid.scss | 12 +- scss/layout/_scroller.scss | 6 +- scss/layout/_section.scss | 4 +- scss/layout/_sectioning.scss | 36 +- scss/themes/_default.scss | 14 +- scss/themes/default/_dark.scss | 196 +-- scss/themes/default/_light.scss | 194 +-- scss/themes/default/_styles.scss | 199 +-- scss/utilities/_reduce-motion.scss | 4 +- scss/utils/_copyright.scss | 2 +- 40 files changed, 2334 insertions(+), 2329 deletions(-) diff --git a/css/pico.classless.css b/css/pico.classless.css index b80e2d34..a30cf3f0 100644 --- a/css/pico.classless.css +++ b/css/pico.classless.css @@ -1,49 +1,48 @@ @charset "UTF-8"; /*! - * Pico.css v2.0.0-alpha1 (https://picocss.com) + * Pico ✨ v2.0.0-alpha1 (https://picocss.com) * Copyright 2019-2022 - Licensed under MIT */ :root { - --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", - sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --line-height: 1.5; - --font-weight: 400; - --font-size: 16px; - --border-radius: 0.25rem; - --border-width: 1px; - --outline-width: 3px; - --spacing: 1rem; - --typography-spacing-vertical: 1.5rem; - --block-spacing-vertical: calc(var(--spacing) * 2); - --block-spacing-horizontal: var(--spacing); - --form-element-spacing-vertical: 0.75rem; - --form-element-spacing-horizontal: 1rem; - --nav-element-spacing-vertical: 1rem; - --nav-element-spacing-horizontal: 0.5rem; - --nav-link-spacing-vertical: 0.5rem; - --nav-link-spacing-horizontal: 0.5rem; - --form-label-font-weight: var(--font-weight); - --transition: 0.2s ease-in-out; - --modal-overlay-backdrop-filter: blur(0.25rem); + --pico-font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --pico-line-height: 1.5; + --pico-font-weight: 400; + --pico-font-size: 16px; + --pico-border-radius: 0.25rem; + --pico-border-width: 1px; + --pico-outline-width: 3px; + --pico-spacing: 1rem; + --pico-typography-spacing-vertical: 1.5rem; + --pico-block-spacing-vertical: calc(var(--pico-spacing) * 2); + --pico-block-spacing-horizontal: var(--pico-spacing); + --pico-form-element-spacing-vertical: 0.75rem; + --pico-form-element-spacing-horizontal: 1rem; + --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-form-label-font-weight: var(--pico-font-weight); + --pico-transition: 0.2s ease-in-out; + --pico-modal-overlay-backdrop-filter: blur(0.25rem); } @media (min-width: 576px) { :root { - --font-size: 17px; + --pico-font-size: 17px; } } @media (min-width: 768px) { :root { - --font-size: 18px; + --pico-font-size: 18px; } } @media (min-width: 992px) { :root { - --font-size: 19px; + --pico-font-size: 19px; } } @media (min-width: 1200px) { :root { - --font-size: 20px; + --pico-font-size: 20px; } } @@ -52,7 +51,7 @@ body > main, body > footer, section { - --block-spacing-vertical: calc(var(--spacing) * 2.5); + --pico-block-spacing-vertical: calc(var(--pico-spacing) * 2.5); } } @media (min-width: 768px) { @@ -60,7 +59,7 @@ section { body > main, body > footer, section { - --block-spacing-vertical: calc(var(--spacing) * 3); + --pico-block-spacing-vertical: calc(var(--pico-spacing) * 3); } } @media (min-width: 992px) { @@ -68,7 +67,7 @@ section { body > main, body > footer, section { - --block-spacing-vertical: calc(var(--spacing) * 3.5); + --pico-block-spacing-vertical: calc(var(--pico-spacing) * 3.5); } } @media (min-width: 1200px) { @@ -76,54 +75,57 @@ section { body > main, body > footer, section { - --block-spacing-vertical: calc(var(--spacing) * 4); + --pico-block-spacing-vertical: calc(var(--pico-spacing) * 4); } } @media (min-width: 576px) { article { - --block-spacing-horizontal: calc(var(--spacing) * 1.25); + --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.25); } } @media (min-width: 768px) { article { - --block-spacing-horizontal: calc(var(--spacing) * 1.5); + --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.5); } } @media (min-width: 992px) { article { - --block-spacing-horizontal: calc(var(--spacing) * 1.75); + --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.75); } } @media (min-width: 1200px) { article { - --block-spacing-horizontal: calc(var(--spacing) * 2); + --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 2); } } dialog > article { - --block-spacing-vertical: calc(var(--spacing) * 2); - --block-spacing-horizontal: var(--spacing); + --pico-block-spacing-vertical: calc(var(--pico-spacing) * 2); + --pico-block-spacing-horizontal: var(--pico-spacing); } @media (min-width: 576px) { dialog > article { - --block-spacing-vertical: calc(var(--spacing) * 2.5); - --block-spacing-horizontal: calc(var(--spacing) * 1.25); + --pico-block-spacing-vertical: calc(var(--pico-spacing) * 2.5); + --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.25); } } @media (min-width: 768px) { dialog > article { - --block-spacing-vertical: calc(var(--spacing) * 3); - --block-spacing-horizontal: calc(var(--spacing) * 1.5); + --pico-block-spacing-vertical: calc(var(--pico-spacing) * 3); + --pico-block-spacing-horizontal: calc(var(--pico-spacing) * 1.5); } } a { - --text-decoration: none; + --pico-text-decoration: none; +} +a.secondary, a.contrast { + --pico-text-decoration: underline; } small { - --font-size: 0.875em; + --pico-font-size: 0.875em; } h1, @@ -132,380 +134,360 @@ h3, h4, h5, h6 { - --font-weight: 700; + --pico-font-weight: 700; } h1 { - --font-size: 2rem; - --typography-spacing-vertical: 3rem; + --pico-font-size: 2rem; + --pico-typography-spacing-vertical: 3rem; } h2 { - --font-size: 1.75rem; - --typography-spacing-vertical: 2.625rem; + --pico-font-size: 1.75rem; + --pico-typography-spacing-vertical: 2.625rem; } h3 { - --font-size: 1.5rem; - --typography-spacing-vertical: 2.25rem; + --pico-font-size: 1.5rem; + --pico-typography-spacing-vertical: 2.25rem; } h4 { - --font-size: 1.25rem; - --typography-spacing-vertical: 1.874rem; + --pico-font-size: 1.25rem; + --pico-typography-spacing-vertical: 1.874rem; } h5 { - --font-size: 1.125rem; - --typography-spacing-vertical: 1.6875rem; + --pico-font-size: 1.125rem; + --pico-typography-spacing-vertical: 1.6875rem; } [type=checkbox], [type=radio] { - --border-width: 2px; + --pico-border-width: 2px; } [type=checkbox][role=switch] { - --border-width: 3px; + --pico-border-width: 3px; } thead th, thead td, tfoot th, tfoot td { - --border-width: 3px; + --pico-border-width: 3px; } :not(thead, tfoot) > * > td { - --font-size: 0.875em; + --pico-font-size: 0.875em; } pre, code, kbd, samp { - --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", - "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", - "Noto Color Emoji"; + --pico-font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } kbd { - --font-weight: bolder; + --pico-font-weight: bolder; } [data-theme=light], :root:not([data-theme=dark]) { - --background-color: #fff; - --color: hsl(205deg, 20%, 32%); - --h1-color: hsl(205deg, 30%, 15%); - --h2-color: #24333e; - --h3-color: hsl(205deg, 25%, 23%); - --h4-color: #374956; - --h5-color: hsl(205deg, 20%, 32%); - --h6-color: #4d606d; - --muted-color: hsl(205deg, 10%, 50%); - --muted-border-color: hsl(205deg, 20%, 94%); - --primary: hsl(195deg, 85%, 41%); - --primary-hover: hsl(195deg, 90%, 32%); - --primary-focus: rgba(16, 149, 193, 0.125); - --primary-inverse: #fff; - --secondary: hsl(205deg, 15%, 41%); - --secondary-hover: hsl(205deg, 20%, 32%); - --secondary-focus: rgba(89, 107, 120, 0.125); - --secondary-inverse: #fff; - --contrast: hsl(205deg, 30%, 15%); - --contrast-hover: #000; - --contrast-focus: rgba(89, 107, 120, 0.125); - --contrast-inverse: #fff; - --mark-background-color: #fff2ca; - --mark-color: #543a26; - --ins-color: #388e3c; - --del-color: #c62828; - --blockquote-border-color: var(--muted-border-color); - --blockquote-footer-color: var(--muted-color); - --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); - --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); - --form-element-background-color: transparent; - --form-element-border-color: hsl(205deg, 14%, 68%); - --form-element-color: var(--color); - --form-element-placeholder-color: var(--muted-color); - --form-element-active-background-color: transparent; - --form-element-active-border-color: var(--primary); - --form-element-focus-color: var(--primary-focus); - --form-element-disabled-background-color: hsl(205deg, 18%, 86%); - --form-element-disabled-border-color: hsl(205deg, 14%, 68%); - --form-element-disabled-opacity: 0.5; - --form-element-invalid-border-color: #c62828; - --form-element-invalid-active-border-color: #d32f2f; - --form-element-invalid-focus-color: rgba(211, 47, 47, 0.125); - --form-element-valid-border-color: #388e3c; - --form-element-valid-active-border-color: #43a047; - --form-element-valid-focus-color: rgba(67, 160, 71, 0.125); - --switch-background-color: hsl(205deg, 16%, 77%); - --switch-color: var(--primary-inverse); - --switch-checked-background-color: var(--primary); - --range-border-color: hsl(205deg, 18%, 86%); - --range-active-border-color: hsl(205deg, 16%, 77%); - --range-thumb-border-color: var(--background-color); - --range-thumb-color: var(--secondary); - --range-thumb-hover-color: var(--secondary-hover); - --range-thumb-active-color: var(--primary); - --table-border-color: var(--muted-border-color); - --table-row-stripped-background-color: #f6f8f9; - --code-background-color: hsl(205deg, 20%, 94%); - --code-color: var(--muted-color); - --code-kbd-background-color: var(--contrast); - --code-kbd-color: var(--contrast-inverse); - --code-tag-color: hsl(330deg, 40%, 50%); - --code-property-color: hsl(185deg, 40%, 40%); - --code-value-color: hsl(40deg, 20%, 50%); - --code-comment-color: hsl(205deg, 14%, 68%); - --accordion-border-color: var(--muted-border-color); - --accordion-close-summary-color: var(--color); - --accordion-open-summary-color: var(--muted-color); - --card-background-color: var(--background-color); - --card-border-color: var(--muted-border-color); - --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698), - 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024), - 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03), - 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036), - 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302), - 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06), - 0 0 0 0.0625rem rgba(27, 40, 50, 0.015); - --card-sectionning-background-color: #fbfbfc; - --dropdown-background-color: #fbfbfc; - --dropdown-border-color: #e1e6eb; - --dropdown-box-shadow: var(--card-box-shadow); - --dropdown-color: var(--color); - --dropdown-hover-background-color: hsl(205deg, 20%, 94%); - --modal-overlay-background-color: rgba(213, 220, 226, 0.7); - --progress-background-color: hsl(205deg, 18%, 86%); - --progress-color: var(--primary); - --loading-spinner-opacity: 0.5; - --tooltip-background-color: var(--contrast); - --tooltip-color: var(--contrast-inverse); - --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"); - --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(65, 84, 98)' 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"); - --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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"); - --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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"); - --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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); - --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(65, 84, 98)' 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"); - --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(198, 40, 40)' 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"); - --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"); - --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(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); - --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(65, 84, 98)' 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"); - --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(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --pico-background-color: #fff; + --pico-color: hsl(205deg, 20%, 32%); + --pico-h1-color: hsl(205deg, 30%, 15%); + --pico-h2-color: #24333e; + --pico-h3-color: hsl(205deg, 25%, 23%); + --pico-h4-color: #374956; + --pico-h5-color: hsl(205deg, 20%, 32%); + --pico-h6-color: #4d606d; + --pico-muted-color: hsl(205deg, 10%, 50%); + --pico-muted-border-color: hsl(205deg, 20%, 94%); + --pico-primary: hsl(195deg, 85%, 41%); + --pico-primary-hover: hsl(195deg, 90%, 32%); + --pico-primary-focus: rgba(16, 149, 193, 0.125); + --pico-primary-inverse: #fff; + --pico-secondary: hsl(205deg, 15%, 41%); + --pico-secondary-hover: hsl(205deg, 20%, 32%); + --pico-secondary-focus: rgba(89, 107, 120, 0.125); + --pico-secondary-inverse: #fff; + --pico-contrast: hsl(205deg, 30%, 15%); + --pico-contrast-hover: #000; + --pico-contrast-focus: rgba(89, 107, 120, 0.125); + --pico-contrast-inverse: #fff; + --pico-mark-background-color: #fff2ca; + --pico-mark-color: #543a26; + --pico-ins-color: #388e3c; + --pico-del-color: #c62828; + --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-form-element-background-color: transparent; + --pico-form-element-border-color: hsl(205deg, 14%, 68%); + --pico-form-element-color: var(--pico-color); + --pico-form-element-placeholder-color: var(--pico-muted-color); + --pico-form-element-active-background-color: transparent; + --pico-form-element-active-border-color: var(--pico-primary); + --pico-form-element-focus-color: var(--pico-primary-focus); + --pico-form-element-disabled-background-color: hsl(205deg, 18%, 86%); + --pico-form-element-disabled-border-color: hsl(205deg, 14%, 68%); + --pico-form-element-disabled-opacity: 0.5; + --pico-form-element-invalid-border-color: #c62828; + --pico-form-element-invalid-active-border-color: #d32f2f; + --pico-form-element-invalid-focus-color: rgba(211, 47, 47, 0.125); + --pico-form-element-valid-border-color: #388e3c; + --pico-form-element-valid-active-border-color: #43a047; + --pico-form-element-valid-focus-color: rgba(67, 160, 71, 0.125); + --pico-switch-background-color: hsl(205deg, 16%, 77%); + --pico-switch-color: var(--pico-primary-inverse); + --pico-switch-checked-background-color: var(--pico-primary); + --pico-range-border-color: hsl(205deg, 18%, 86%); + --pico-range-active-border-color: hsl(205deg, 16%, 77%); + --pico-range-thumb-border-color: var(--pico-background-color); + --pico-range-thumb-color: var(--pico-secondary); + --pico-range-thumb-hover-color: var(--pico-secondary-hover); + --pico-range-thumb-active-color: var(--pico-primary); + --pico-table-border-color: var(--pico-muted-border-color); + --pico-table-row-stripped-background-color: #f6f8f9; + --pico-code-background-color: hsl(205deg, 20%, 94%); + --pico-code-color: var(--pico-muted-color); + --pico-code-kbd-background-color: var(--pico-contrast); + --pico-code-kbd-color: var(--pico-contrast-inverse); + --pico-code-tag-color: hsl(330deg, 40%, 50%); + --pico-code-property-color: hsl(185deg, 40%, 40%); + --pico-code-value-color: hsl(40deg, 20%, 50%); + --pico-code-comment-color: hsl(205deg, 14%, 68%); + --pico-accordion-border-color: var(--pico-muted-border-color); + --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: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024), 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03), 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036), 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302), 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06), 0 0 0 0.0625rem rgba(27, 40, 50, 0.015); + --pico-card-sectionning-background-color: #fbfbfc; + --pico-dropdown-background-color: #fbfbfc; + --pico-dropdown-border-color: #e1e6eb; + --pico-dropdown-box-shadow: var(--pico-card-box-shadow); + --pico-dropdown-color: var(--pico-color); + --pico-dropdown-hover-background-color: hsl(205deg, 20%, 94%); + --pico-modal-overlay-background-color: rgba(213, 220, 226, 0.7); + --pico-progress-background-color: hsl(205deg, 18%, 86%); + --pico-progress-color: var(--pico-primary); + --pico-loading-spinner-opacity: 0.5; + --pico-tooltip-background-color: var(--pico-contrast); + --pico-tooltip-color: var(--pico-contrast-inverse); + --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-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(65, 84, 98)' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); + --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(65, 84, 98)' 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-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(198, 40, 40)' 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"); + --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-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(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --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(65, 84, 98)' 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-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(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); color-scheme: light; } @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme=light]) { - --background-color: #11191f; - --color: hsl(205deg, 16%, 77%); - --h1-color: hsl(205deg, 20%, 94%); - --h2-color: #e1e6eb; - --h3-color: hsl(205deg, 18%, 86%); - --h4-color: #c8d1d8; - --h5-color: hsl(205deg, 16%, 77%); - --h6-color: #afbbc4; - --muted-color: hsl(205deg, 10%, 50%); - --muted-border-color: #1f2d38; - --primary: hsl(195deg, 85%, 41%); - --primary-hover: hsl(195deg, 80%, 50%); - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #fff; - --secondary: hsl(205deg, 15%, 41%); - --secondary-hover: hsl(205deg, 10%, 50%); - --secondary-focus: rgba(115, 130, 140, 0.25); - --secondary-inverse: #fff; - --contrast: hsl(205deg, 20%, 94%); - --contrast-hover: #fff; - --contrast-focus: rgba(115, 130, 140, 0.25); - --contrast-inverse: #000; - --mark-background-color: #d1c284; - --mark-color: #11191f; - --ins-color: #388e3c; - --del-color: #c62828; - --blockquote-border-color: var(--muted-border-color); - --blockquote-footer-color: var(--muted-color); - --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); - --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); - --form-element-background-color: #11191f; - --form-element-border-color: #374956; - --form-element-color: var(--color); - --form-element-placeholder-color: var(--muted-color); - --form-element-active-background-color: var(--form-element-background-color); - --form-element-active-border-color: var(--primary); - --form-element-focus-color: var(--primary-focus); - --form-element-disabled-background-color: hsl(205deg, 25%, 23%); - --form-element-disabled-border-color: hsl(205deg, 20%, 32%); - --form-element-disabled-opacity: 0.5; - --form-element-invalid-border-color: #b71c1c; - --form-element-invalid-active-border-color: #c62828; - --form-element-invalid-focus-color: rgba(198, 40, 40, 0.25); - --form-element-valid-border-color: #2e7d32; - --form-element-valid-active-border-color: #388e3c; - --form-element-valid-focus-color: rgba(56, 142, 60, 0.25); - --switch-background-color: #374956; - --switch-color: var(--primary-inverse); - --switch-checked-background-color: var(--primary); - --range-border-color: #24333e; - --range-active-border-color: hsl(205deg, 25%, 23%); - --range-thumb-border-color: var(--background-color); - --range-thumb-color: var(--secondary); - --range-thumb-hover-color: var(--secondary-hover); - --range-thumb-active-color: var(--primary); - --table-border-color: var(--muted-border-color); - --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); - --code-background-color: #18232c; - --code-color: var(--muted-color); - --code-kbd-background-color: var(--contrast); - --code-kbd-color: var(--contrast-inverse); - --code-tag-color: hsl(330deg, 30%, 50%); - --code-property-color: hsl(185deg, 30%, 50%); - --code-value-color: hsl(40deg, 10%, 50%); - --code-comment-color: #4d606d; - --accordion-border-color: var(--muted-border-color); - --accordion-active-summary-color: var(--primary); - --accordion-close-summary-color: var(--color); - --accordion-open-summary-color: var(--muted-color); - --card-background-color: #141e26; - --card-border-color: var(--card-background-color); - --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), - 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), - 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), - 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), - 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), - 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), - 0 0 0 0.0625rem rgba(0, 0, 0, 0.015); - --card-sectionning-background-color: #18232c; - --dropdown-background-color: hsl(205deg, 30%, 15%); - --dropdown-border-color: #24333e; - --dropdown-box-shadow: var(--card-box-shadow); - --dropdown-color: var(--color); - --dropdown-hover-background-color: rgba(36, 51, 62, 0.75); - --modal-overlay-background-color: rgba(36, 51, 62, 0.8); - --progress-background-color: #24333e; - --progress-color: var(--primary); - --loading-spinner-opacity: 0.5; - --tooltip-background-color: var(--contrast); - --tooltip-color: var(--contrast-inverse); - --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"); - --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(162, 175, 185)' 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"); - --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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"); - --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' 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"); - --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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); - --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(162, 175, 185)' 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"); - --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(183, 28, 28)' 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"); - --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"); - --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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); - --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(162, 175, 185)' 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"); - --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(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --pico-background-color: #11191f; + --pico-color: hsl(205deg, 16%, 77%); + --pico-h1-color: hsl(205deg, 20%, 94%); + --pico-h2-color: #e1e6eb; + --pico-h3-color: hsl(205deg, 18%, 86%); + --pico-h4-color: #c8d1d8; + --pico-h5-color: hsl(205deg, 16%, 77%); + --pico-h6-color: #afbbc4; + --pico-muted-color: hsl(205deg, 10%, 50%); + --pico-muted-border-color: #1f2d38; + --pico-primary: hsl(195deg, 85%, 41%); + --pico-primary-hover: hsl(195deg, 80%, 50%); + --pico-primary-focus: rgba(16, 149, 193, 0.25); + --pico-primary-inverse: #fff; + --pico-secondary: hsl(205deg, 15%, 41%); + --pico-secondary-hover: hsl(205deg, 10%, 50%); + --pico-secondary-focus: rgba(115, 130, 140, 0.25); + --pico-secondary-inverse: #fff; + --pico-contrast: hsl(205deg, 20%, 94%); + --pico-contrast-hover: #fff; + --pico-contrast-focus: rgba(115, 130, 140, 0.25); + --pico-contrast-inverse: #000; + --pico-mark-background-color: #d1c284; + --pico-mark-color: #11191f; + --pico-ins-color: #388e3c; + --pico-del-color: #c62828; + --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-form-element-background-color: #11191f; + --pico-form-element-border-color: #374956; + --pico-form-element-color: var(--pico-color); + --pico-form-element-placeholder-color: var(--pico-muted-color); + --pico-form-element-active-background-color: var(--pico-form-element-background-color); + --pico-form-element-active-border-color: var(--pico-primary); + --pico-form-element-focus-color: var(--pico-primary-focus); + --pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%); + --pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%); + --pico-form-element-disabled-opacity: 0.5; + --pico-form-element-invalid-border-color: #b71c1c; + --pico-form-element-invalid-active-border-color: #c62828; + --pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25); + --pico-form-element-valid-border-color: #2e7d32; + --pico-form-element-valid-active-border-color: #388e3c; + --pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25); + --pico-switch-background-color: #374956; + --pico-switch-color: var(--pico-primary-inverse); + --pico-switch-checked-background-color: var(--pico-primary); + --pico-range-border-color: #24333e; + --pico-range-active-border-color: hsl(205deg, 25%, 23%); + --pico-range-thumb-border-color: var(--pico-background-color); + --pico-range-thumb-color: var(--pico-secondary); + --pico-range-thumb-hover-color: var(--pico-secondary-hover); + --pico-range-thumb-active-color: var(--pico-primary); + --pico-table-border-color: var(--pico-muted-border-color); + --pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --pico-code-background-color: #18232c; + --pico-code-color: var(--pico-muted-color); + --pico-code-kbd-background-color: var(--pico-contrast); + --pico-code-kbd-color: var(--pico-contrast-inverse); + --pico-code-tag-color: hsl(330deg, 30%, 50%); + --pico-code-property-color: hsl(185deg, 30%, 50%); + --pico-code-value-color: hsl(40deg, 10%, 50%); + --pico-code-comment-color: #4d606d; + --pico-accordion-border-color: var(--pico-muted-border-color); + --pico-accordion-active-summary-color: var(--pico-primary); + --pico-accordion-close-summary-color: var(--pico-color); + --pico-accordion-open-summary-color: var(--pico-muted-color); + --pico-card-background-color: #141e26; + --pico-card-border-color: var(--pico-card-background-color); + --pico-card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015); + --pico-card-sectionning-background-color: #18232c; + --pico-dropdown-background-color: hsl(205deg, 30%, 15%); + --pico-dropdown-border-color: #24333e; + --pico-dropdown-box-shadow: var(--pico-card-box-shadow); + --pico-dropdown-color: var(--pico-color); + --pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75); + --pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8); + --pico-progress-background-color: #24333e; + --pico-progress-color: var(--pico-primary); + --pico-loading-spinner-opacity: 0.5; + --pico-tooltip-background-color: var(--pico-contrast); + --pico-tooltip-color: var(--pico-contrast-inverse); + --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-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(162, 175, 185)' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' 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-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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); + --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(162, 175, 185)' 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-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(183, 28, 28)' 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"); + --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-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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --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(162, 175, 185)' 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-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(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); color-scheme: dark; } } [data-theme=dark] { - --background-color: #11191f; - --color: hsl(205deg, 16%, 77%); - --h1-color: hsl(205deg, 20%, 94%); - --h2-color: #e1e6eb; - --h3-color: hsl(205deg, 18%, 86%); - --h4-color: #c8d1d8; - --h5-color: hsl(205deg, 16%, 77%); - --h6-color: #afbbc4; - --muted-color: hsl(205deg, 10%, 50%); - --muted-border-color: #1f2d38; - --primary: hsl(195deg, 85%, 41%); - --primary-hover: hsl(195deg, 80%, 50%); - --primary-focus: rgba(16, 149, 193, 0.25); - --primary-inverse: #fff; - --secondary: hsl(205deg, 15%, 41%); - --secondary-hover: hsl(205deg, 10%, 50%); - --secondary-focus: rgba(115, 130, 140, 0.25); - --secondary-inverse: #fff; - --contrast: hsl(205deg, 20%, 94%); - --contrast-hover: #fff; - --contrast-focus: rgba(115, 130, 140, 0.25); - --contrast-inverse: #000; - --mark-background-color: #d1c284; - --mark-color: #11191f; - --ins-color: #388e3c; - --del-color: #c62828; - --blockquote-border-color: var(--muted-border-color); - --blockquote-footer-color: var(--muted-color); - --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); - --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); - --form-element-background-color: #11191f; - --form-element-border-color: #374956; - --form-element-color: var(--color); - --form-element-placeholder-color: var(--muted-color); - --form-element-active-background-color: var(--form-element-background-color); - --form-element-active-border-color: var(--primary); - --form-element-focus-color: var(--primary-focus); - --form-element-disabled-background-color: hsl(205deg, 25%, 23%); - --form-element-disabled-border-color: hsl(205deg, 20%, 32%); - --form-element-disabled-opacity: 0.5; - --form-element-invalid-border-color: #b71c1c; - --form-element-invalid-active-border-color: #c62828; - --form-element-invalid-focus-color: rgba(198, 40, 40, 0.25); - --form-element-valid-border-color: #2e7d32; - --form-element-valid-active-border-color: #388e3c; - --form-element-valid-focus-color: rgba(56, 142, 60, 0.25); - --switch-background-color: #374956; - --switch-color: var(--primary-inverse); - --switch-checked-background-color: var(--primary); - --range-border-color: #24333e; - --range-active-border-color: hsl(205deg, 25%, 23%); - --range-thumb-border-color: var(--background-color); - --range-thumb-color: var(--secondary); - --range-thumb-hover-color: var(--secondary-hover); - --range-thumb-active-color: var(--primary); - --table-border-color: var(--muted-border-color); - --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); - --code-background-color: #18232c; - --code-color: var(--muted-color); - --code-kbd-background-color: var(--contrast); - --code-kbd-color: var(--contrast-inverse); - --code-tag-color: hsl(330deg, 30%, 50%); - --code-property-color: hsl(185deg, 30%, 50%); - --code-value-color: hsl(40deg, 10%, 50%); - --code-comment-color: #4d606d; - --accordion-border-color: var(--muted-border-color); - --accordion-active-summary-color: var(--primary); - --accordion-close-summary-color: var(--color); - --accordion-open-summary-color: var(--muted-color); - --card-background-color: #141e26; - --card-border-color: var(--card-background-color); - --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), - 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), - 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), - 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), - 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), - 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), - 0 0 0 0.0625rem rgba(0, 0, 0, 0.015); - --card-sectionning-background-color: #18232c; - --dropdown-background-color: hsl(205deg, 30%, 15%); - --dropdown-border-color: #24333e; - --dropdown-box-shadow: var(--card-box-shadow); - --dropdown-color: var(--color); - --dropdown-hover-background-color: rgba(36, 51, 62, 0.75); - --modal-overlay-background-color: rgba(36, 51, 62, 0.8); - --progress-background-color: #24333e; - --progress-color: var(--primary); - --loading-spinner-opacity: 0.5; - --tooltip-background-color: var(--contrast); - --tooltip-color: var(--contrast-inverse); - --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"); - --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(162, 175, 185)' 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"); - --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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"); - --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' 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"); - --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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); - --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(162, 175, 185)' 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"); - --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(183, 28, 28)' 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"); - --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"); - --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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); - --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(162, 175, 185)' 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"); - --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(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --pico-background-color: #11191f; + --pico-color: hsl(205deg, 16%, 77%); + --pico-h1-color: hsl(205deg, 20%, 94%); + --pico-h2-color: #e1e6eb; + --pico-h3-color: hsl(205deg, 18%, 86%); + --pico-h4-color: #c8d1d8; + --pico-h5-color: hsl(205deg, 16%, 77%); + --pico-h6-color: #afbbc4; + --pico-muted-color: hsl(205deg, 10%, 50%); + --pico-muted-border-color: #1f2d38; + --pico-primary: hsl(195deg, 85%, 41%); + --pico-primary-hover: hsl(195deg, 80%, 50%); + --pico-primary-focus: rgba(16, 149, 193, 0.25); + --pico-primary-inverse: #fff; + --pico-secondary: hsl(205deg, 15%, 41%); + --pico-secondary-hover: hsl(205deg, 10%, 50%); + --pico-secondary-focus: rgba(115, 130, 140, 0.25); + --pico-secondary-inverse: #fff; + --pico-contrast: hsl(205deg, 20%, 94%); + --pico-contrast-hover: #fff; + --pico-contrast-focus: rgba(115, 130, 140, 0.25); + --pico-contrast-inverse: #000; + --pico-mark-background-color: #d1c284; + --pico-mark-color: #11191f; + --pico-ins-color: #388e3c; + --pico-del-color: #c62828; + --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-form-element-background-color: #11191f; + --pico-form-element-border-color: #374956; + --pico-form-element-color: var(--pico-color); + --pico-form-element-placeholder-color: var(--pico-muted-color); + --pico-form-element-active-background-color: var(--pico-form-element-background-color); + --pico-form-element-active-border-color: var(--pico-primary); + --pico-form-element-focus-color: var(--pico-primary-focus); + --pico-form-element-disabled-background-color: hsl(205deg, 25%, 23%); + --pico-form-element-disabled-border-color: hsl(205deg, 20%, 32%); + --pico-form-element-disabled-opacity: 0.5; + --pico-form-element-invalid-border-color: #b71c1c; + --pico-form-element-invalid-active-border-color: #c62828; + --pico-form-element-invalid-focus-color: rgba(198, 40, 40, 0.25); + --pico-form-element-valid-border-color: #2e7d32; + --pico-form-element-valid-active-border-color: #388e3c; + --pico-form-element-valid-focus-color: rgba(56, 142, 60, 0.25); + --pico-switch-background-color: #374956; + --pico-switch-color: var(--pico-primary-inverse); + --pico-switch-checked-background-color: var(--pico-primary); + --pico-range-border-color: #24333e; + --pico-range-active-border-color: hsl(205deg, 25%, 23%); + --pico-range-thumb-border-color: var(--pico-background-color); + --pico-range-thumb-color: var(--pico-secondary); + --pico-range-thumb-hover-color: var(--pico-secondary-hover); + --pico-range-thumb-active-color: var(--pico-primary); + --pico-table-border-color: var(--pico-muted-border-color); + --pico-table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --pico-code-background-color: #18232c; + --pico-code-color: var(--pico-muted-color); + --pico-code-kbd-background-color: var(--pico-contrast); + --pico-code-kbd-color: var(--pico-contrast-inverse); + --pico-code-tag-color: hsl(330deg, 30%, 50%); + --pico-code-property-color: hsl(185deg, 30%, 50%); + --pico-code-value-color: hsl(40deg, 10%, 50%); + --pico-code-comment-color: #4d606d; + --pico-accordion-border-color: var(--pico-muted-border-color); + --pico-accordion-active-summary-color: var(--pico-primary); + --pico-accordion-close-summary-color: var(--pico-color); + --pico-accordion-open-summary-color: var(--pico-muted-color); + --pico-card-background-color: #141e26; + --pico-card-border-color: var(--pico-card-background-color); + --pico-card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015); + --pico-card-sectionning-background-color: #18232c; + --pico-dropdown-background-color: hsl(205deg, 30%, 15%); + --pico-dropdown-border-color: #24333e; + --pico-dropdown-box-shadow: var(--pico-card-box-shadow); + --pico-dropdown-color: var(--pico-color); + --pico-dropdown-hover-background-color: rgba(36, 51, 62, 0.75); + --pico-modal-overlay-background-color: rgba(36, 51, 62, 0.8); + --pico-progress-background-color: #24333e; + --pico-progress-color: var(--pico-primary); + --pico-loading-spinner-opacity: 0.5; + --pico-tooltip-background-color: var(--pico-contrast); + --pico-tooltip-color: var(--pico-contrast-inverse); + --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-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(162, 175, 185)' 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-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' 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-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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); + --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(162, 175, 185)' 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-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(183, 28, 28)' 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"); + --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-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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --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(162, 175, 185)' 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-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(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); color-scheme: dark; } @@ -513,7 +495,7 @@ progress, [type=checkbox], [type=radio], [type=range] { - accent-color: var(--primary); + accent-color: var(--pico-primary); } /** @@ -538,12 +520,12 @@ progress, -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; - background-color: var(--background-color); - color: var(--color); - font-weight: var(--font-weight); - font-size: var(--font-size); - line-height: var(--line-height); - font-family: var(--font-family); + 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-rendering: optimizeLegibility; overflow-wrap: break-word; cursor: default; @@ -570,7 +552,7 @@ body > footer { width: 100%; margin-right: auto; margin-left: auto; - padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); + padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal); } @media (min-width: 576px) { body > header, @@ -608,7 +590,7 @@ body > footer { * Responsive spacings for section */ section { - margin-bottom: var(--block-spacing-vertical); + margin-bottom: var(--pico-block-spacing-vertical); } /** @@ -621,8 +603,8 @@ figure { overflow-x: auto; } figure figcaption { - padding: calc(var(--spacing) * 0.5) 0; - color: var(--muted-color); + padding: calc(var(--pico-spacing) * 0.5) 0; + color: var(--pico-muted-color); } /** @@ -660,34 +642,34 @@ pre, table, ul { margin-top: 0; - margin-bottom: var(--typography-spacing-vertical); - color: var(--color); + margin-bottom: var(--pico-typography-spacing-vertical); + color: var(--pico-color); font-style: normal; - font-weight: var(--font-weight); - font-size: var(--font-size); + font-weight: var(--pico-font-weight); + font-size: var(--pico-font-size); } a, [role=link] { - --color: var(--primary); - --background-color: transparent; + --pico-color: var(--pico-primary); + --pico-background-color: transparent; outline: none; - background-color: var(--background-color); - color: var(--color); - -webkit-text-decoration: var(--text-decoration); - text-decoration: var(--text-decoration); - transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition); - transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition); - transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition); + background-color: var(--pico-background-color); + color: var(--pico-color); + -webkit-text-decoration: var(--pico-text-decoration); + text-decoration: var(--pico-text-decoration); + 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); } a:is([aria-current], :hover, :active, :focus), [role=link]:is([aria-current], :hover, :active, :focus) { - --color: var(--primary-hover); - --text-decoration: underline; + --pico-color: var(--pico-primary-hover); + --pico-text-decoration: underline; } a:focus, [role=link]:focus { - --background-color: var(--primary-focus); + --pico-background-color: var(--pico-primary-focus); } h1, @@ -697,77 +679,77 @@ h4, h5, h6 { margin-top: 0; - margin-bottom: var(--typography-spacing-vertical); - color: var(--color); - font-weight: var(--font-weight); - font-size: var(--font-size); - font-family: var(--font-family); + margin-bottom: var(--pico-typography-spacing-vertical); + color: var(--pico-color); + font-weight: var(--pico-font-weight); + font-size: var(--pico-font-size); + font-family: var(--pico-font-family); } h1 { - --color: var(--h1-color); + --pico-color: var(--pico-h1-color); } h2 { - --color: var(--h2-color); + --pico-color: var(--pico-h2-color); } h3 { - --color: var(--h3-color); + --pico-color: var(--pico-h3-color); } h4 { - --color: var(--h4-color); + --pico-color: var(--pico-h4-color); } h5 { - --color: var(--h5-color); + --pico-color: var(--pico-h5-color); } h6 { - --color: var(--h6-color); + --pico-color: var(--pico-h6-color); } :where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) { - margin-top: var(--typography-spacing-vertical); + margin-top: var(--pico-typography-spacing-vertical); } hgroup { - margin-bottom: var(--typography-spacing-vertical); + margin-bottom: var(--pico-typography-spacing-vertical); } hgroup > * { margin-bottom: 0; } hgroup > *:last-child { - --color: var(--muted-color); - --font-weight: unset; + --pico-color: var(--pico-muted-color); + --pico-font-weight: unset; font-size: 1rem; font-family: unset; } p { - margin-bottom: var(--typography-spacing-vertical); + margin-bottom: var(--pico-typography-spacing-vertical); } small { - font-size: var(--font-size); + font-size: var(--pico-font-size); } :where(dl, ol, ul) { padding-right: 0; - padding-left: var(--spacing); - -webkit-padding-start: var(--spacing); - padding-inline-start: var(--spacing); + padding-left: var(--pico-spacing); + -webkit-padding-start: var(--pico-spacing); + padding-inline-start: var(--pico-spacing); -webkit-padding-end: 0; padding-inline-end: 0; } :where(dl, ol, ul) li { - margin-bottom: calc(var(--typography-spacing-vertical) * 0.25); + margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25); } :where(dl, ol, ul) :is(dl, ol, ul) { margin: 0; - margin-top: calc(var(--typography-spacing-vertical) * 0.25); + margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25); } ul li { @@ -776,25 +758,25 @@ ul li { mark { padding: 0.125rem 0.25rem; - background-color: var(--mark-background-color); - color: var(--mark-color); + background-color: var(--pico-mark-background-color); + color: var(--pico-mark-color); vertical-align: baseline; } blockquote { display: block; - margin: var(--typography-spacing-vertical) 0; - padding: var(--spacing); + margin: var(--pico-typography-spacing-vertical) 0; + padding: var(--pico-spacing); border-right: none; - border-left: 0.25rem solid var(--blockquote-border-color); - -webkit-border-start: 0.25rem solid var(--blockquote-border-color); - border-inline-start: 0.25rem solid var(--blockquote-border-color); + border-left: 0.25rem solid var(--pico-blockquote-border-color); + -webkit-border-start: 0.25rem solid var(--pico-blockquote-border-color); + border-inline-start: 0.25rem solid var(--pico-blockquote-border-color); -webkit-border-end: none; border-inline-end: none; } blockquote footer { - margin-top: calc(var(--typography-spacing-vertical) * 0.5); - color: var(--blockquote-footer-color); + margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5); + color: var(--pico-blockquote-footer-color); } abbr[title] { @@ -804,20 +786,20 @@ abbr[title] { } ins { - color: var(--ins-color); + color: var(--pico-ins-color); text-decoration: none; } del { - color: var(--del-color); + color: var(--pico-del-color); } ::-moz-selection { - background-color: var(--primary-focus); + background-color: var(--pico-primary-focus); } ::selection { - background-color: var(--primary-focus); + background-color: var(--pico-primary-focus); } /** @@ -875,7 +857,7 @@ button, button { display: block; width: 100%; - margin-bottom: var(--spacing); + margin-bottom: var(--pico-spacing); } [role=button] { @@ -888,56 +870,54 @@ input[type=submit], input[type=button], input[type=reset], [role=button] { - --background-color: var(--primary); - --border-color: var(--primary); - --color: var(--primary-inverse); - --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); - padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); - border: var(--border-width) solid var(--border-color); - border-radius: var(--border-radius); + --pico-background-color: var(--pico-primary); + --pico-border-color: var(--pico-primary); + --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: none; - background-color: var(--background-color); - box-shadow: var(--box-shadow); - color: var(--color); - font-weight: var(--font-weight); + 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(--line-height); + line-height: var(--pico-line-height); text-align: center; cursor: pointer; - transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); + transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); } button:is([aria-current], :hover, :active, :focus), input[type=submit]:is([aria-current], :hover, :active, :focus), input[type=button]:is([aria-current], :hover, :active, :focus), input[type=reset]:is([aria-current], :hover, :active, :focus), [role=button]:is([aria-current], :hover, :active, :focus) { - --background-color: var(--primary-hover); - --border-color: var(--primary-hover); - --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); - --color: var(--primary-inverse); + --pico-background-color: var(--pico-primary-hover); + --pico-border-color: var(--pico-primary-hover); + --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); + --pico-color: var(--pico-primary-inverse); } button:focus, input[type=submit]:focus, input[type=button]:focus, input[type=reset]:focus, [role=button]:focus { - --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), - 0 0 0 var(--outline-width) var(--primary-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); } input[type=reset] { - --background-color: var(--secondary); - --border-color: var(--secondary); - --color: var(--secondary-inverse); + --pico-background-color: var(--pico-secondary); + --pico-border-color: var(--pico-secondary); + --pico-color: var(--pico-secondary-inverse); cursor: pointer; } input[type=reset]:is([aria-current], :hover, :active, :focus) { - --background-color: var(--secondary-hover); - --border-color: var(--secondary-hover); + --pico-background-color: var(--pico-secondary-hover); + --pico-border-color: var(--pico-secondary-hover); } input[type=reset]:focus { - --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), - 0 0 0 var(--outline-width) var(--secondary-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); } :where(button, [type=submit], [type=button], [type=reset], [role=button])[disabled], @@ -959,23 +939,23 @@ a[role=button]:not([href]) { th, td { - padding: calc(var(--spacing) / 2) var(--spacing); - border-bottom: var(--border-width) solid var(--table-border-color); - color: var(--color); - font-weight: var(--font-weight); - font-size: var(--font-size); + padding: calc(var(--pico-spacing) / 2) var(--pico-spacing); + border-bottom: var(--pico-border-width) solid var(--pico-table-border-color); + color: var(--pico-color); + font-weight: var(--pico-font-weight); + font-size: var(--pico-font-size); text-align: left; text-align: start; } tfoot th, tfoot td { - border-top: var(--border-width) solid var(--table-border-color); + border-top: var(--pico-border-width) solid var(--pico-table-border-color); border-bottom: 0; } table[role=grid] tbody tr:nth-child(odd) { - background-color: var(--table-row-stripped-background-color); + background-color: var(--pico-table-row-stripped-background-color); } /** @@ -986,7 +966,7 @@ code, kbd, samp { font-size: 0.875em; - font-family: var(--font-family); + font-family: var(--pico-font-family); } pre { @@ -997,10 +977,10 @@ pre { pre, code, kbd { - border-radius: var(--border-radius); - background: var(--code-background-color); - color: var(--code-color); - font-weight: var(--font-weight); + 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; } @@ -1012,37 +992,37 @@ kbd { pre { display: block; - margin-bottom: var(--spacing); + margin-bottom: var(--pico-spacing); overflow-x: auto; } pre > code { display: block; - padding: var(--spacing); + padding: var(--pico-spacing); background: none; font-size: 14px; - line-height: var(--line-height); + line-height: var(--pico-line-height); } code b { - color: var(--code-tag-color); - font-weight: var(--font-weight); + color: var(--pico-code-tag-color); + font-weight: var(--pico-font-weight); } code i { - color: var(--code-property-color); + color: var(--pico-code-property-color); font-style: normal; } code u { - color: var(--code-value-color); + color: var(--pico-code-value-color); text-decoration: none; } code em { - color: var(--code-comment-color); + color: var(--pico-code-comment-color); font-style: normal; } kbd { - background-color: var(--code-kbd-background-color); - color: var(--code-kbd-color); + background-color: var(--pico-code-kbd-background-color); + color: var(--pico-code-kbd-color); vertical-align: baseline; } @@ -1052,7 +1032,7 @@ kbd { hr { height: 0; border: 0; - border-top: 1px solid var(--muted-border-color); + border-top: 1px solid var(--pico-muted-border-color); color: inherit; } @@ -1074,7 +1054,7 @@ select, textarea { margin: 0; font-size: 1rem; - line-height: var(--line-height); + line-height: var(--pico-line-height); font-family: inherit; letter-spacing: inherit; } @@ -1146,12 +1126,12 @@ textarea { } input:not([type=checkbox], [type=radio], [type=range]) { - height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2); + height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); } fieldset { margin: 0; - margin-bottom: var(--spacing); + margin-bottom: var(--pico-spacing); padding: 0; border: 0; } @@ -1159,8 +1139,8 @@ fieldset { label, fieldset legend { display: block; - margin-bottom: calc(var(--spacing) * 0.25); - font-weight: var(--form-label-font-weight, var(--font-weight)); + margin-bottom: calc(var(--pico-spacing) * 0.25); + font-weight: var(--pico-form-label-font-weight, var(--pico-font-weight)); } input:not([type=checkbox], [type=radio]), @@ -1175,82 +1155,82 @@ textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; - padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); } input, select, textarea { - --background-color: var(--form-element-background-color); - --border-color: var(--form-element-border-color); - --color: var(--form-element-color); - --box-shadow: none; - border: var(--border-width) solid var(--border-color); - border-radius: var(--border-radius); + --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: none; - background-color: var(--background-color); - box-shadow: var(--box-shadow); - color: var(--color); - font-weight: var(--font-weight); - transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); + 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); } input:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [readonly]):is(:active, :focus), :where(select, textarea):is(:active, :focus) { - --background-color: var(--form-element-active-background-color); + --pico-background-color: var(--pico-form-element-active-background-color); } input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus), :where(select, textarea):is(:active, :focus) { - --border-color: var(--form-element-active-border-color); + --pico-border-color: var(--pico-form-element-active-border-color); } input:not([type=submit], [type=button], [type=reset], [type=range], [type=file], [readonly]):focus, select:focus, textarea:focus { - --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color); + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); } input:not([type=submit], [type=button], [type=reset])[disabled], select[disabled], textarea[disabled], :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) { - --background-color: var(--form-element-disabled-background-color); - --border-color: var(--form-element-disabled-border-color); - opacity: var(--form-element-disabled-opacity); + --pico-background-color: var(--pico-form-element-disabled-background-color); + --pico-border-color: var(--pico-form-element-disabled-border-color); + opacity: var(--pico-form-element-disabled-opacity); pointer-events: none; } :where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] { - padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; - padding-left: var(--form-element-spacing-horizontal); - -webkit-padding-start: var(--form-element-spacing-horizontal) !important; - padding-inline-start: var(--form-element-spacing-horizontal) !important; - -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; - padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important; + padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; + padding-left: var(--pico-form-element-spacing-horizontal); + -webkit-padding-start: var(--pico-form-element-spacing-horizontal) !important; + padding-inline-start: var(--pico-form-element-spacing-horizontal) !important; + -webkit-padding-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; + padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem) !important; background-position: center right 0.75rem; background-size: 1rem auto; background-repeat: no-repeat; } :where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid=false] { - background-image: var(--icon-valid); + background-image: var(--pico-icon-valid); } :where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid=true] { - background-image: var(--icon-invalid); + background-image: var(--pico-icon-invalid); } :where(input, select, textarea)[aria-invalid=false] { - --border-color: var(--form-element-valid-border-color); + --pico-border-color: var(--pico-form-element-valid-border-color); } :where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) { - --border-color: var(--form-element-valid-active-border-color) !important; - --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important; + --pico-border-color: var(--pico-form-element-valid-active-border-color) !important; + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-valid-focus-color) !important; } :where(input, select, textarea)[aria-invalid=true] { - --border-color: var(--form-element-invalid-border-color); + --pico-border-color: var(--pico-form-element-invalid-border-color); } :where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) { - --border-color: var(--form-element-invalid-active-border-color) !important; - --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important; + --pico-border-color: var(--pico-form-element-invalid-active-border-color) !important; + --pico-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-invalid-focus-color) !important; } [dir=rtl] :where(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false]) { @@ -1262,14 +1242,14 @@ input::-webkit-input-placeholder, textarea::placeholder, textarea::-webkit-input-placeholder, select:invalid { - color: var(--form-element-placeholder-color); + color: var(--pico-form-element-placeholder-color); opacity: 1; } input:not([type=checkbox], [type=radio]), select, textarea { - margin-bottom: var(--spacing); + margin-bottom: var(--pico-spacing); } select::-ms-expand { @@ -1277,13 +1257,13 @@ select::-ms-expand { background-color: transparent; } select:not([multiple], [size]) { - padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); - padding-left: var(--form-element-spacing-horizontal); - -webkit-padding-start: var(--form-element-spacing-horizontal); - padding-inline-start: var(--form-element-spacing-horizontal); - -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); - padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); - background-image: var(--icon-chevron); + padding-right: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); + padding-left: var(--pico-form-element-spacing-horizontal); + -webkit-padding-start: var(--pico-form-element-spacing-horizontal); + padding-inline-start: var(--pico-form-element-spacing-horizontal); + -webkit-padding-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); + padding-inline-end: calc(var(--pico-form-element-spacing-horizontal) + 1.5rem); + background-image: var(--pico-icon-chevron); background-position: center right 0.75rem; background-size: 1rem auto; background-repeat: no-repeat; @@ -1296,13 +1276,13 @@ select:not([multiple], [size]) { :where(input, select, textarea) + small { display: block; width: 100%; - margin-top: calc(var(--spacing) * -0.75); - margin-bottom: var(--spacing); - color: var(--muted-color); + margin-top: calc(var(--pico-spacing) * -0.75); + margin-bottom: var(--pico-spacing); + color: var(--pico-muted-color); } label > :where(input, select, textarea) { - margin-top: calc(var(--spacing) * 0.25); + margin-top: calc(var(--pico-spacing) * 0.25); } /** @@ -1322,7 +1302,7 @@ label > :where(input, select, textarea) { margin-inline-start: 0; -webkit-margin-end: 0.375em; margin-inline-end: 0.375em; - border-width: var(--border-width); + border-width: var(--pico-border-width); font-size: inherit; vertical-align: middle; cursor: pointer; @@ -1335,9 +1315,9 @@ label > :where(input, select, textarea) { [type=radio]:checked, [type=radio]:checked:active, [type=radio]:checked:focus { - --background-color: var(--primary); - --border-color: var(--primary); - background-image: var(--icon-checkbox); + --pico-background-color: var(--pico-primary); + --pico-border-color: var(--pico-primary); + background-image: var(--pico-icon-checkbox); background-position: center; background-size: 0.75em auto; background-repeat: no-repeat; @@ -1351,9 +1331,9 @@ label > :where(input, select, textarea) { } [type=checkbox]:indeterminate { - --background-color: var(--primary); - --border-color: var(--primary); - background-image: var(--icon-minus); + --pico-background-color: var(--pico-primary); + --pico-border-color: var(--pico-primary); + background-image: var(--pico-icon-minus); background-position: center; background-size: 0.75em auto; background-repeat: no-repeat; @@ -1363,36 +1343,36 @@ label > :where(input, select, textarea) { border-radius: 50%; } [type=radio]:checked, [type=radio]:checked:active, [type=radio]:checked:focus { - --background-color: var(--primary-inverse); + --pico-background-color: var(--pico-primary-inverse); border-width: 0.35em; background-image: none; } [type=checkbox][role=switch] { - --background-color: var(--switch-background-color); - --border-color: var(--switch-background-color); - --color: var(--switch-color); + --pico-background-color: var(--pico-switch-background-color); + --pico-border-color: var(--pico-switch-background-color); + --pico-color: var(--pico-switch-color); width: 2.25em; height: 1.25em; - border: var(--border-width) solid var(--border-color); + border: var(--pico-border-width) solid var(--pico-border-color); border-radius: 1.25em; - background-color: var(--background-color); + background-color: var(--pico-background-color); line-height: 1.25em; } [type=checkbox][role=switch]:focus { - --background-color: var(--switch-background-color); - --border-color: var(--switch-background-color); + --pico-background-color: var(--pico-switch-background-color); + --pico-border-color: var(--pico-switch-background-color); } [type=checkbox][role=switch]:checked { - --background-color: var(--switch-checked-background-color); - --border-color: var(--switch-checked-background-color); + --pico-background-color: var(--pico-switch-checked-background-color); + --pico-border-color: var(--pico-switch-checked-background-color); } [type=checkbox][role=switch]:before { display: block; - width: calc(1.25em - (var(--border-width) * 2)); + width: calc(1.25em - (var(--pico-border-width) * 2)); height: 100%; border-radius: 50%; - background-color: var(--color); + background-color: var(--pico-color); content: ""; transition: margin 0.1s ease-in-out; } @@ -1400,9 +1380,9 @@ label > :where(input, select, textarea) { background-image: none; } [type=checkbox][role=switch]:checked::before { - margin-left: calc(1.125em - var(--border-width)); - -webkit-margin-start: calc(1.125em - var(--border-width)); - margin-inline-start: calc(1.125em - var(--border-width)); + margin-left: calc(1.125em - var(--pico-border-width)); + -webkit-margin-start: calc(1.125em - var(--pico-border-width)); + margin-inline-start: calc(1.125em - var(--pico-border-width)); } [type=checkbox][aria-invalid=false], @@ -1411,7 +1391,7 @@ label > :where(input, select, textarea) { [type=radio]:checked[aria-invalid=false], [type=checkbox][role=switch][aria-invalid=false], [type=checkbox][role=switch]:checked[aria-invalid=false] { - --border-color: var(--form-element-valid-border-color); + --pico-border-color: var(--pico-form-element-valid-border-color); } [type=checkbox][aria-invalid=true], [type=checkbox]:checked[aria-invalid=true], @@ -1419,7 +1399,7 @@ label > :where(input, select, textarea) { [type=radio]:checked[aria-invalid=true], [type=checkbox][role=switch][aria-invalid=true], [type=checkbox][role=switch]:checked[aria-invalid=true] { - --border-color: var(--form-element-invalid-border-color); + --pico-border-color: var(--pico-form-element-invalid-border-color); } /** @@ -1433,27 +1413,27 @@ label > :where(input, select, textarea) { } [type=color]::-webkit-color-swatch { border: 0; - border-radius: calc(var(--border-radius) * 0.5); + border-radius: calc(var(--pico-border-radius) * 0.5); } [type=color]::-moz-color-swatch { border: 0; - border-radius: calc(var(--border-radius) * 0.5); + border-radius: calc(var(--pico-border-radius) * 0.5); } /** * Input type datetime */ input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) { - --icon-position: 0.75rem; - --icon-width: 1rem; - padding-right: calc(var(--icon-width) + var(--icon-position)); - background-image: var(--icon-date); - background-position: center right var(--icon-position); - background-size: var(--icon-width) auto; + --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; } input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] { - background-image: var(--icon-time); + background-image: var(--pico-icon-time); } [type=date]::-webkit-calendar-picker-indicator, @@ -1461,9 +1441,9 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] { [type=month]::-webkit-calendar-picker-indicator, [type=time]::-webkit-calendar-picker-indicator, [type=week]::-webkit-calendar-picker-indicator { - width: var(--icon-width); - margin-right: calc(var(--icon-width) * -1); - margin-left: var(--icon-position); + width: var(--pico-icon-width); + margin-right: calc(var(--pico-icon-width) * -1); + margin-left: var(--pico-icon-position); opacity: 0; } @@ -1475,95 +1455,95 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] { * Input type file */ [type=file] { - --color: var(--muted-color); - padding: calc(var(--form-element-spacing-vertical) * 0.5) 0; + --pico-color: var(--pico-muted-color); + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0; border: 0; border-radius: 0; background: none; } [type=file]::file-selector-button { - --background-color: var(--secondary); - --border-color: var(--secondary); - --color: var(--secondary-inverse); - margin-right: calc(var(--spacing) / 2); + --pico-background-color: var(--pico-secondary); + --pico-border-color: var(--pico-secondary); + --pico-color: var(--pico-secondary-inverse); + margin-right: calc(var(--pico-spacing) / 2); margin-left: 0; -webkit-margin-start: 0; margin-inline-start: 0; - -webkit-margin-end: calc(var(--spacing) / 2); - margin-inline-end: calc(var(--spacing) / 2); - padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); - border: var(--border-width) solid var(--border-color); - border-radius: var(--border-radius); + -webkit-margin-end: calc(var(--pico-spacing) / 2); + margin-inline-end: calc(var(--pico-spacing) / 2); + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5); + border: var(--pico-border-width) solid var(--pico-border-color); + border-radius: var(--pico-border-radius); outline: none; - background-color: var(--background-color); - box-shadow: var(--box-shadow); - color: var(--color); - font-weight: var(--font-weight); + 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(--line-height); + line-height: var(--pico-line-height); text-align: center; cursor: pointer; - transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); + transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); } [type=file]::file-selector-button:is(:hover, :active, :focus) { - --background-color: var(--secondary-hover); - --border-color: var(--secondary-hover); + --pico-background-color: var(--pico-secondary-hover); + --pico-border-color: var(--pico-secondary-hover); } [type=file]::-webkit-file-upload-button { - --background-color: var(--secondary); - --border-color: var(--secondary); - --color: var(--secondary-inverse); - margin-right: calc(var(--spacing) / 2); + --pico-background-color: var(--pico-secondary); + --pico-border-color: var(--pico-secondary); + --pico-color: var(--pico-secondary-inverse); + margin-right: calc(var(--pico-spacing) / 2); margin-left: 0; -webkit-margin-start: 0; margin-inline-start: 0; - -webkit-margin-end: calc(var(--spacing) / 2); - margin-inline-end: calc(var(--spacing) / 2); - padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); - border: var(--border-width) solid var(--border-color); - border-radius: var(--border-radius); + -webkit-margin-end: calc(var(--pico-spacing) / 2); + margin-inline-end: calc(var(--pico-spacing) / 2); + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5); + border: var(--pico-border-width) solid var(--pico-border-color); + border-radius: var(--pico-border-radius); outline: none; - background-color: var(--background-color); - box-shadow: var(--box-shadow); - color: var(--color); - font-weight: var(--font-weight); + 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(--line-height); + line-height: var(--pico-line-height); text-align: center; cursor: pointer; - -webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); - transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); + -webkit-transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); + transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); } [type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) { - --background-color: var(--secondary-hover); - --border-color: var(--secondary-hover); + --pico-background-color: var(--pico-secondary-hover); + --pico-border-color: var(--pico-secondary-hover); } [type=file]::-ms-browse { - --background-color: var(--secondary); - --border-color: var(--secondary); - --color: var(--secondary-inverse); - margin-right: calc(var(--spacing) / 2); + --pico-background-color: var(--pico-secondary); + --pico-border-color: var(--pico-secondary); + --pico-color: var(--pico-secondary-inverse); + margin-right: calc(var(--pico-spacing) / 2); margin-left: 0; margin-inline-start: 0; - margin-inline-end: calc(var(--spacing) / 2); - padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5); - border: var(--border-width) solid var(--border-color); - border-radius: var(--border-radius); + margin-inline-end: calc(var(--pico-spacing) / 2); + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) calc(var(--pico-form-element-spacing-horizontal) * 0.5); + border: var(--pico-border-width) solid var(--pico-border-color); + border-radius: var(--pico-border-radius); outline: none; - background-color: var(--background-color); - box-shadow: var(--box-shadow); - color: var(--color); - font-weight: var(--font-weight); + 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(--line-height); + line-height: var(--pico-line-height); text-align: center; cursor: pointer; - -ms-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); - transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); + -ms-transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); + transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); } [type=file]::-ms-browse:is(:hover, :active, :focus) { - --background-color: var(--secondary-hover); - --border-color: var(--secondary-hover); + --pico-background-color: var(--pico-secondary-hover); + --pico-border-color: var(--pico-secondary-hover); } /** @@ -1580,69 +1560,69 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] { [type=range]::-webkit-slider-runnable-track { width: 100%; height: 0.25rem; - border-radius: var(--border-radius); - background-color: var(--range-border-color); - -webkit-transition: background-color var(--transition), box-shadow var(--transition); - transition: background-color var(--transition), box-shadow var(--transition); + 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); } [type=range]::-moz-range-track { width: 100%; height: 0.25rem; - border-radius: var(--border-radius); - background-color: var(--range-border-color); - -moz-transition: background-color var(--transition), box-shadow var(--transition); - transition: background-color var(--transition), box-shadow var(--transition); + 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); } [type=range]::-ms-track { width: 100%; height: 0.25rem; - border-radius: var(--border-radius); - background-color: var(--range-border-color); - -ms-transition: background-color var(--transition), box-shadow var(--transition); - transition: background-color var(--transition), box-shadow var(--transition); + 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); } [type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--range-thumb-border-color); + border: 2px solid var(--pico-range-thumb-border-color); border-radius: 50%; - background-color: var(--range-thumb-color); + background-color: var(--pico-range-thumb-color); cursor: pointer; - -webkit-transition: background-color var(--transition), transform var(--transition); - transition: background-color var(--transition), transform var(--transition); + -webkit-transition: background-color var(--pico-transition), transform var(--pico-transition); + transition: background-color var(--pico-transition), transform var(--pico-transition); } [type=range]::-moz-range-thumb { -webkit-appearance: none; width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--range-thumb-border-color); + border: 2px solid var(--pico-range-thumb-border-color); border-radius: 50%; - background-color: var(--range-thumb-color); + background-color: var(--pico-range-thumb-color); cursor: pointer; - -moz-transition: background-color var(--transition), transform var(--transition); - transition: background-color var(--transition), transform var(--transition); + -moz-transition: background-color var(--pico-transition), transform var(--pico-transition); + transition: background-color var(--pico-transition), transform var(--pico-transition); } [type=range]::-ms-thumb { -webkit-appearance: none; width: 1.25rem; height: 1.25rem; margin-top: -0.5rem; - border: 2px solid var(--range-thumb-border-color); + border: 2px solid var(--pico-range-thumb-border-color); border-radius: 50%; - background-color: var(--range-thumb-color); + background-color: var(--pico-range-thumb-color); cursor: pointer; - -ms-transition: background-color var(--transition), transform var(--transition); - transition: background-color var(--transition), transform var(--transition); + -ms-transition: background-color var(--pico-transition), transform var(--pico-transition); + transition: background-color var(--pico-transition), transform var(--pico-transition); } [type=range]:hover, [type=range]:focus { - --range-border-color: var(--range-active-border-color); - --range-thumb-color: var(--range-thumb-hover-color); + --pico-range-border-color: var(--pico-range-active-border-color); + --pico-range-thumb-color: var(--pico-range-thumb-hover-color); } [type=range]:active { - --range-thumb-color: var(--range-thumb-active-color); + --pico-range-thumb-color: var(--pico-range-thumb-active-color); } [type=range]:active::-webkit-slider-thumb { transform: scale(1.25); @@ -1658,24 +1638,24 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] { * Input type search */ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] { - -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); - padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); + -webkit-padding-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem); + padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem); border-radius: 5rem; - background-image: var(--icon-search); + background-image: var(--pico-icon-search); background-position: center left 1.125rem; background-size: 1rem auto; background-repeat: no-repeat; } input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] { - -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; - padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important; + -webkit-padding-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important; + padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem) !important; background-position: center left 1.125rem, center right 0.75rem; } input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=false] { - background-image: var(--icon-search), var(--icon-valid); + background-image: var(--pico-icon-search), var(--pico-icon-valid); } input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=true] { - background-image: var(--icon-search), var(--icon-invalid); + background-image: var(--pico-icon-search), var(--pico-icon-invalid); } [type=search]::-webkit-search-cancel-button { @@ -1695,18 +1675,18 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] */ details { display: block; - margin-bottom: var(--spacing); - padding-bottom: var(--spacing); - border-bottom: var(--border-width) solid var(--accordion-border-color); + margin-bottom: var(--pico-spacing); + padding-bottom: var(--pico-spacing); + border-bottom: var(--pico-border-width) solid var(--pico-accordion-border-color); } details summary { line-height: 1rem; list-style-type: none; cursor: pointer; - transition: color var(--transition); + transition: color var(--pico-transition); } details summary:not([role]) { - color: var(--accordion-close-summary-color); + color: var(--pico-accordion-close-summary-color); } details summary::-webkit-details-marker { display: none; @@ -1721,36 +1701,36 @@ details summary::after { display: block; width: 1rem; height: 1rem; - -webkit-margin-start: calc(var(--spacing, 1rem) * 0.5); - margin-inline-start: calc(var(--spacing, 1rem) * 0.5); + -webkit-margin-start: calc(var(--pico-spacing, 1rem) * 0.5); + margin-inline-start: calc(var(--pico-spacing, 1rem) * 0.5); float: right; transform: rotate(-90deg); - background-image: var(--icon-chevron); + background-image: var(--pico-icon-chevron); background-position: right center; background-size: 1rem auto; background-repeat: no-repeat; content: ""; - transition: transform var(--transition); + transition: transform var(--pico-transition); } details summary:focus { outline: none; } details summary:focus:not([role=button]) { - color: var(--accordion-active-summary-color); + color: var(--pico-accordion-active-summary-color); } details summary[role=button] { width: 100%; text-align: left; } details summary[role=button]::after { - height: calc(1rem * var(--line-height, 1.5)); - background-image: var(--icon-chevron-button); + height: calc(1rem * var(--pico-line-height, 1.5)); + background-image: var(--pico-icon-chevron-button); } details[open] > summary { - margin-bottom: calc(var(--spacing)); + margin-bottom: calc(var(--pico-spacing)); } details[open] > summary:not([role]):not(:focus) { - color: var(--accordion-open-summary-color); + color: var(--pico-accordion-open-summary-color); } details[open] > summary::after { transform: rotate(0); @@ -1768,32 +1748,32 @@ details[open] > summary::after { * Card (
) */ article { - margin: var(--block-spacing-vertical) 0; - padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); - border-radius: var(--border-radius); - background: var(--card-background-color); - box-shadow: var(--card-box-shadow); + margin: var(--pico-block-spacing-vertical) 0; + 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); } article > header, article > footer { - margin-right: calc(var(--block-spacing-horizontal) * -1); - margin-left: calc(var(--block-spacing-horizontal) * -1); - padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal); - background-color: var(--card-sectionning-background-color); + 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) * 0.66) var(--pico-block-spacing-horizontal); + background-color: var(--pico-card-sectionning-background-color); } article > header { - margin-top: calc(var(--block-spacing-vertical) * -1); - margin-bottom: var(--block-spacing-vertical); - border-bottom: var(--border-width) solid var(--card-border-color); - border-top-right-radius: var(--border-radius); - border-top-left-radius: var(--border-radius); + 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); } article > footer { - margin-top: var(--block-spacing-vertical); - margin-bottom: calc(var(--block-spacing-vertical) * -1); - border-top: var(--border-width) solid var(--card-border-color); - border-bottom-right-radius: var(--border-radius); - border-bottom-left-radius: var(--border-radius); + 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); } /** @@ -1815,50 +1795,50 @@ li[role=list] > ul { flex-direction: column; margin: 0; padding: 0; - border: var(--border-width) solid var(--dropdown-border-color); - border-radius: var(--border-radius); + border: var(--pico-border-width) solid var(--pico-dropdown-border-color); + border-radius: var(--pico-border-radius); border-top-right-radius: 0; border-top-left-radius: 0; - background-color: var(--dropdown-background-color); - box-shadow: var(--card-box-shadow); - color: var(--dropdown-color); + background-color: var(--pico-dropdown-background-color); + box-shadow: var(--pico-card-box-shadow); + color: var(--pico-dropdown-color); white-space: nowrap; } details[role=list] summary + ul li, li[role=list] > ul li { width: 100%; margin-bottom: 0; - padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal); + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); list-style: none; } details[role=list] summary + ul li:first-of-type, li[role=list] > ul li:first-of-type { - margin-top: calc(var(--form-element-spacing-vertical) * 0.5); + margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5); } details[role=list] summary + ul li:last-of-type, li[role=list] > ul li:last-of-type { - margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5); + margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5); } details[role=list] summary + ul li a, li[role=list] > ul li a { display: block; - margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1); - padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal); + margin: calc(var(--pico-form-element-spacing-vertical) * -0.5) calc(var(--pico-form-element-spacing-horizontal) * -1); + padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal); overflow: hidden; - color: var(--dropdown-color); + color: var(--pico-dropdown-color); text-decoration: none; text-overflow: ellipsis; } details[role=list] summary + ul li a:hover, li[role=list] > ul li a:hover { - background-color: var(--dropdown-hover-background-color); + background-color: var(--pico-dropdown-hover-background-color); } details[role=list] summary::after, li[role=list] > a::after { display: block; width: 1rem; - height: calc(1rem * var(--line-height, 1.5)); + height: calc(1rem * var(--pico-line-height, 1.5)); -webkit-margin-start: 0.5rem; margin-inline-start: 0.5rem; float: right; @@ -1877,22 +1857,22 @@ details[role=list] summary { margin-bottom: 0; } details[role=list] summary:not([role]) { - height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2); - padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal); - border: var(--border-width) solid var(--form-element-border-color); - border-radius: var(--border-radius); - background-color: var(--form-element-background-color); - color: var(--form-element-placeholder-color); + 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; - transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition); + transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition); } details[role=list] summary:not([role]):active, details[role=list] summary:not([role]):focus { - border-color: var(--form-element-active-border-color); - background-color: var(--form-element-active-background-color); + border-color: var(--pico-form-element-active-border-color); + background-color: var(--pico-form-element-active-background-color); } details[role=list] summary:not([role]):focus { - box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color); + box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-form-element-focus-color); } details[role=list][open] summary { border-bottom-right-radius: 0; @@ -1921,7 +1901,7 @@ nav details[role=list] summary + ul, nav li[role=list] > ul { min-width: -moz-fit-content; min-width: fit-content; - border-radius: var(--border-radius); + border-radius: var(--pico-border-radius); } nav details[role=list] summary + ul li a, nav li[role=list] > ul li a { @@ -1931,24 +1911,24 @@ nav li[role=list] > ul li a { nav details[role=list] summary, nav details[role=list] summary:not([role]) { height: auto; - padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); + padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal); } nav details[role=list][open] summary { - border-radius: var(--border-radius); + border-radius: var(--pico-border-radius); } nav details[role=list] summary + ul { - margin-top: var(--outline-width); + margin-top: var(--pico-outline-width); -webkit-margin-start: 0; margin-inline-start: 0; } nav details[role=list] summary[role=link] { - margin-bottom: calc(var(--nav-link-spacing-vertical) * -1); - line-height: var(--line-height); + margin-bottom: calc(var(--pico-nav-link-spacing-vertical) * -1); + line-height: var(--pico-line-height); } nav details[role=list] summary[role=link] + ul { - margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); - -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1); - margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1); + margin-top: calc(var(--pico-nav-link-spacing-vertical) + var(--pico-outline-width)); + -webkit-margin-start: calc(var(--pico-nav-link-spacing-horizontal) * -1); + margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) * -1); } li[role=list]:hover > ul, @@ -1958,12 +1938,12 @@ li[role=list] a:focus ~ ul { } li[role=list] > ul { display: none; - margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); - -webkit-margin-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)); - margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal)); + margin-top: calc(var(--pico-nav-link-spacing-vertical) + var(--pico-outline-width)); + -webkit-margin-start: calc(var(--pico-nav-element-spacing-horizontal) - var(--pico-nav-link-spacing-horizontal)); + margin-inline-start: calc(var(--pico-nav-element-spacing-horizontal) - var(--pico-nav-link-spacing-horizontal)); } li[role=list] > a::after { - background-image: var(--icon-chevron); + background-image: var(--pico-icon-chevron); } /** @@ -1984,15 +1964,15 @@ li[role=list] > a::after { vertical-align: text-bottom; vertical-align: -0.125em; animation: spinner 0.75s linear infinite; - opacity: var(--loading-spinner-opacity); + opacity: var(--pico-loading-spinner-opacity); } [aria-busy=true]:not(input, select, textarea):not(:empty)::before { - margin-right: calc(var(--spacing) * 0.5); + margin-right: calc(var(--pico-spacing) * 0.5); margin-left: 0; -webkit-margin-start: 0; margin-inline-start: 0; - -webkit-margin-end: calc(var(--spacing) * 0.5); - margin-inline-end: calc(var(--spacing) * 0.5); + -webkit-margin-end: calc(var(--pico-spacing) * 0.5); + margin-inline-end: calc(var(--pico-spacing) * 0.5); } [aria-busy=true]:not(input, select, textarea):empty { text-align: center; @@ -2015,7 +1995,7 @@ a[aria-busy=true] { * Modal () */ :root { - --scrollbar-width: 0px; + --pico-scrollbar-width: 0px; } dialog { @@ -2032,15 +2012,15 @@ dialog { min-width: 100%; height: inherit; min-height: 100%; - padding: var(--spacing); + padding: var(--pico-spacing); border: 0; - -webkit-backdrop-filter: var(--modal-overlay-backdrop-filter); - backdrop-filter: var(--modal-overlay-backdrop-filter); - background-color: var(--modal-overlay-background-color); - color: var(--color); + -webkit-backdrop-filter: var(--pico-modal-overlay-backdrop-filter); + backdrop-filter: var(--pico-modal-overlay-backdrop-filter); + background-color: var(--pico-modal-overlay-background-color); + color: var(--pico-color); } dialog article { - max-height: calc(100vh - var(--spacing) * 2); + max-height: calc(100vh - var(--pico-spacing) * 2); overflow: auto; } @media (min-width: 576px) { @@ -2055,11 +2035,11 @@ dialog article { } dialog article > header, dialog article > footer { - padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal); + padding: calc(var(--pico-block-spacing-vertical) * 0.5) var(--pico-block-spacing-horizontal); } dialog article > header .close { margin: 0; - margin-left: var(--spacing); + margin-left: var(--pico-spacing); float: right; } dialog article > footer { @@ -2069,7 +2049,7 @@ dialog article > footer [role=button] { margin-bottom: 0; } dialog article > footer [role=button]:not(:first-of-type) { - margin-left: calc(var(--spacing) * 0.5); + margin-left: calc(var(--pico-spacing) * 0.5); } dialog article p:last-of-type { margin: 0; @@ -2103,25 +2083,25 @@ nav ul { } nav ol:first-of-type, nav ul:first-of-type { - margin-left: calc(var(--nav-element-spacing-horizontal) * -1); + margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1); } nav ol:last-of-type, nav ul:last-of-type { - margin-right: calc(var(--nav-element-spacing-horizontal) * -1); + margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1); } nav li { display: inline-block; margin: 0; - padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal); + padding: var(--pico-nav-element-spacing-vertical) var(--pico-nav-element-spacing-horizontal); } nav li > * { - --spacing: 0; + --pico-spacing: 0; } nav :where(a, [role=link]) { display: inline-block; - margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1); - padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); - border-radius: var(--border-radius); + 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); text-decoration: none; } nav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) { @@ -2132,16 +2112,16 @@ nav[aria-label=breadcrumb] { justify-content: start; } nav[aria-label=breadcrumb] ul li:not(:first-child) { - -webkit-margin-start: var(--nav-link-spacing-horizontal); - margin-inline-start: var(--nav-link-spacing-horizontal); + -webkit-margin-start: var(--pico-nav-link-spacing-horizontal); + margin-inline-start: var(--pico-nav-link-spacing-horizontal); } nav[aria-label=breadcrumb] ul li:not(:last-child) ::after { position: absolute; - width: calc(var(--nav-link-spacing-horizontal) * 2); - -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2); - margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2); + width: calc(var(--pico-nav-link-spacing-horizontal) * 2); + -webkit-margin-start: calc(var(--pico-nav-link-spacing-horizontal) / 2); + margin-inline-start: calc(var(--pico-nav-link-spacing-horizontal) / 2); content: "/"; - color: var(--muted-color); + color: var(--pico-muted-color); text-align: center; } nav[aria-label=breadcrumb] a[aria-current] { @@ -2153,7 +2133,7 @@ nav[aria-label=breadcrumb] a[aria-current] { nav [role=button] { margin-right: inherit; margin-left: inherit; - padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); + padding: var(--pico-nav-link-spacing-vertical) var(--pico-nav-link-spacing-horizontal); } aside nav, @@ -2163,7 +2143,7 @@ aside li { display: block; } aside li { - padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal); + padding: calc(var(--pico-nav-element-spacing-vertical) * 0.5) var(--pico-nav-element-spacing-horizontal); } aside li a { display: block; @@ -2191,26 +2171,26 @@ progress { appearance: none; width: 100%; height: 0.5rem; - margin-bottom: calc(var(--spacing) * 0.5); + margin-bottom: calc(var(--pico-spacing) * 0.5); overflow: hidden; border: 0; - border-radius: var(--border-radius); - background-color: var(--progress-background-color); - color: var(--progress-color); + border-radius: var(--pico-border-radius); + background-color: var(--pico-progress-background-color); + color: var(--pico-progress-color); } progress::-webkit-progress-bar { - border-radius: var(--border-radius); + border-radius: var(--pico-border-radius); background: none; } progress[value]::-webkit-progress-value { - background-color: var(--progress-color); + background-color: var(--pico-progress-color); } progress::-moz-progress-bar { - background-color: var(--progress-color); + background-color: var(--pico-progress-color); } @media (prefers-reduced-motion: no-preference) { progress:indeterminate { - background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat; + 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 { @@ -2255,12 +2235,12 @@ progress::-moz-progress-bar { padding: 0.25rem 0.5rem; overflow: hidden; transform: translate(-50%, -0.25rem); - border-radius: var(--border-radius); - background: var(--tooltip-background-color); + border-radius: var(--pico-border-radius); + background: var(--pico-tooltip-background-color); content: attr(data-tooltip); - color: var(--tooltip-color); + color: var(--pico-tooltip-color); font-style: normal; - font-weight: var(--font-weight); + font-weight: var(--pico-font-weight); font-size: 0.875rem; text-decoration: none; text-overflow: ellipsis; @@ -2277,7 +2257,7 @@ progress::-moz-progress-bar { border-radius: 0; background-color: transparent; content: ""; - color: var(--tooltip-background-color); + color: var(--pico-tooltip-background-color); } [data-tooltip][data-placement=bottom]::before, [data-tooltip][data-placement=bottom]::after { top: 100%; diff --git a/css/pico.classless.css.map b/css/pico.classless.css.map index 6feb9856..fe3999f8 100644 --- a/css/pico.classless.css.map +++ b/css/pico.classless.css.map @@ -1 +1 @@ -{"version":3,"sources":["pico.classless.css","../scss/utils/_copyright.scss","../scss/themes/default/_styles.scss","../scss/themes/_default.scss","../scss/themes/default/_light.scss","../scss/themes/default/_dark.scss","../scss/layout/_document.scss","../scss/layout/_sectioning.scss","../scss/layout/_section.scss","../scss/layout/_scroller.scss","../scss/content/_typography.scss","../scss/content/_embedded.scss","../scss/content/_button.scss","../scss/content/_table.scss","../scss/content/_code.scss","../scss/content/_miscs.scss","../scss/forms/_basics.scss","../scss/forms/_checkbox-radio-switch.scss","../scss/forms/_input-color.scss","../scss/forms/_input-date.scss","../scss/forms/_input-file.scss","../scss/forms/_input-range.scss","../scss/forms/_input-search.scss","../scss/components/_accordion.scss","../scss/components/_card.scss","../scss/components/_dropdown.scss","../scss/components/_loading.scss","../scss/components/_modal.scss","../scss/components/_nav.scss","../scss/components/_progress.scss","../scss/components/_tooltip.scss","../scss/utilities/_accessibility.scss","../scss/utilities/_reduce-motion.scss"],"names":[],"mappings":"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","file":"pico.classless.css","sourcesContent":["@charset \"UTF-8\";\n/*!\n * Pico.css v2.0.0-alpha1 (https://picocss.com)\n * Copyright 2019-2022 - Licensed under MIT\n */\n:root {\n --font-family: system-ui, -apple-system, \"Segoe UI\", \"Roboto\", \"Ubuntu\", \"Cantarell\", \"Noto Sans\",\n sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --line-height: 1.5;\n --font-weight: 400;\n --font-size: 16px;\n --border-radius: 0.25rem;\n --border-width: 1px;\n --outline-width: 3px;\n --spacing: 1rem;\n --typography-spacing-vertical: 1.5rem;\n --block-spacing-vertical: calc(var(--spacing) * 2);\n --block-spacing-horizontal: var(--spacing);\n --form-element-spacing-vertical: 0.75rem;\n --form-element-spacing-horizontal: 1rem;\n --nav-element-spacing-vertical: 1rem;\n --nav-element-spacing-horizontal: 0.5rem;\n --nav-link-spacing-vertical: 0.5rem;\n --nav-link-spacing-horizontal: 0.5rem;\n --form-label-font-weight: var(--font-weight);\n --transition: 0.2s ease-in-out;\n --modal-overlay-backdrop-filter: blur(0.25rem);\n}\n@media (min-width: 576px) {\n :root {\n --font-size: 17px;\n }\n}\n@media (min-width: 768px) {\n :root {\n --font-size: 18px;\n }\n}\n@media (min-width: 992px) {\n :root {\n --font-size: 19px;\n }\n}\n@media (min-width: 1200px) {\n :root {\n --font-size: 20px;\n }\n}\n\n@media (min-width: 576px) {\n body > header,\nbody > main,\nbody > footer,\nsection {\n --block-spacing-vertical: calc(var(--spacing) * 2.5);\n }\n}\n@media (min-width: 768px) {\n body > header,\nbody > main,\nbody > footer,\nsection {\n --block-spacing-vertical: calc(var(--spacing) * 3);\n }\n}\n@media (min-width: 992px) {\n body > header,\nbody > main,\nbody > footer,\nsection {\n --block-spacing-vertical: calc(var(--spacing) * 3.5);\n }\n}\n@media (min-width: 1200px) {\n body > header,\nbody > main,\nbody > footer,\nsection {\n --block-spacing-vertical: calc(var(--spacing) * 4);\n }\n}\n\n@media (min-width: 576px) {\n article {\n --block-spacing-horizontal: calc(var(--spacing) * 1.25);\n }\n}\n@media (min-width: 768px) {\n article {\n --block-spacing-horizontal: calc(var(--spacing) * 1.5);\n }\n}\n@media (min-width: 992px) {\n article {\n --block-spacing-horizontal: calc(var(--spacing) * 1.75);\n }\n}\n@media (min-width: 1200px) {\n article {\n --block-spacing-horizontal: calc(var(--spacing) * 2);\n }\n}\n\ndialog > article {\n --block-spacing-vertical: calc(var(--spacing) * 2);\n --block-spacing-horizontal: var(--spacing);\n}\n@media (min-width: 576px) {\n dialog > article {\n --block-spacing-vertical: calc(var(--spacing) * 2.5);\n --block-spacing-horizontal: calc(var(--spacing) * 1.25);\n }\n}\n@media (min-width: 768px) {\n dialog > article {\n --block-spacing-vertical: calc(var(--spacing) * 3);\n --block-spacing-horizontal: calc(var(--spacing) * 1.5);\n }\n}\n\na {\n --text-decoration: none;\n}\n\nsmall {\n --font-size: 0.875em;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n --font-weight: 700;\n}\n\nh1 {\n --font-size: 2rem;\n --typography-spacing-vertical: 3rem;\n}\n\nh2 {\n --font-size: 1.75rem;\n --typography-spacing-vertical: 2.625rem;\n}\n\nh3 {\n --font-size: 1.5rem;\n --typography-spacing-vertical: 2.25rem;\n}\n\nh4 {\n --font-size: 1.25rem;\n --typography-spacing-vertical: 1.874rem;\n}\n\nh5 {\n --font-size: 1.125rem;\n --typography-spacing-vertical: 1.6875rem;\n}\n\n[type=checkbox],\n[type=radio] {\n --border-width: 2px;\n}\n\n[type=checkbox][role=switch] {\n --border-width: 3px;\n}\n\nthead th,\nthead td,\ntfoot th,\ntfoot td {\n --border-width: 3px;\n}\n\n:not(thead, tfoot) > * > td {\n --font-size: 0.875em;\n}\n\npre,\ncode,\nkbd,\nsamp {\n --font-family: \"Menlo\", \"Consolas\", \"Roboto Mono\", \"Ubuntu Monospace\", \"Noto Mono\", \"Oxygen Mono\",\n \"Liberation Mono\", monospace, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n \"Noto Color Emoji\";\n}\n\nkbd {\n --font-weight: bolder;\n}\n\n[data-theme=light],\n:root:not([data-theme=dark]) {\n --background-color: #fff;\n --color: hsl(205deg, 20%, 32%);\n --h1-color: hsl(205deg, 30%, 15%);\n --h2-color: #24333e;\n --h3-color: hsl(205deg, 25%, 23%);\n --h4-color: #374956;\n --h5-color: hsl(205deg, 20%, 32%);\n --h6-color: #4d606d;\n --muted-color: hsl(205deg, 10%, 50%);\n --muted-border-color: hsl(205deg, 20%, 94%);\n --primary: hsl(195deg, 85%, 41%);\n --primary-hover: hsl(195deg, 90%, 32%);\n --primary-focus: rgba(16, 149, 193, 0.125);\n --primary-inverse: #fff;\n --secondary: hsl(205deg, 15%, 41%);\n --secondary-hover: hsl(205deg, 20%, 32%);\n --secondary-focus: rgba(89, 107, 120, 0.125);\n --secondary-inverse: #fff;\n --contrast: hsl(205deg, 30%, 15%);\n --contrast-hover: #000;\n --contrast-focus: rgba(89, 107, 120, 0.125);\n --contrast-inverse: #fff;\n --mark-background-color: #fff2ca;\n --mark-color: #543a26;\n --ins-color: #388e3c;\n --del-color: #c62828;\n --blockquote-border-color: var(--muted-border-color);\n --blockquote-footer-color: var(--muted-color);\n --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);\n --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);\n --form-element-background-color: transparent;\n --form-element-border-color: hsl(205deg, 14%, 68%);\n --form-element-color: var(--color);\n --form-element-placeholder-color: var(--muted-color);\n --form-element-active-background-color: transparent;\n --form-element-active-border-color: var(--primary);\n --form-element-focus-color: var(--primary-focus);\n --form-element-disabled-background-color: hsl(205deg, 18%, 86%);\n --form-element-disabled-border-color: hsl(205deg, 14%, 68%);\n --form-element-disabled-opacity: 0.5;\n --form-element-invalid-border-color: #c62828;\n --form-element-invalid-active-border-color: #d32f2f;\n --form-element-invalid-focus-color: rgba(211, 47, 47, 0.125);\n --form-element-valid-border-color: #388e3c;\n --form-element-valid-active-border-color: #43a047;\n --form-element-valid-focus-color: rgba(67, 160, 71, 0.125);\n --switch-background-color: hsl(205deg, 16%, 77%);\n --switch-color: var(--primary-inverse);\n --switch-checked-background-color: var(--primary);\n --range-border-color: hsl(205deg, 18%, 86%);\n --range-active-border-color: hsl(205deg, 16%, 77%);\n --range-thumb-border-color: var(--background-color);\n --range-thumb-color: var(--secondary);\n --range-thumb-hover-color: var(--secondary-hover);\n --range-thumb-active-color: var(--primary);\n --table-border-color: var(--muted-border-color);\n --table-row-stripped-background-color: #f6f8f9;\n --code-background-color: hsl(205deg, 20%, 94%);\n --code-color: var(--muted-color);\n --code-kbd-background-color: var(--contrast);\n --code-kbd-color: var(--contrast-inverse);\n --code-tag-color: hsl(330deg, 40%, 50%);\n --code-property-color: hsl(185deg, 40%, 40%);\n --code-value-color: hsl(40deg, 20%, 50%);\n --code-comment-color: hsl(205deg, 14%, 68%);\n --accordion-border-color: var(--muted-border-color);\n --accordion-close-summary-color: var(--color);\n --accordion-open-summary-color: var(--muted-color);\n --card-background-color: var(--background-color);\n --card-border-color: var(--muted-border-color);\n --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698),\n 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024),\n 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03),\n 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036),\n 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302),\n 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06),\n 0 0 0 0.0625rem rgba(27, 40, 50, 0.015);\n --card-sectionning-background-color: #fbfbfc;\n --dropdown-background-color: #fbfbfc;\n --dropdown-border-color: #e1e6eb;\n --dropdown-box-shadow: var(--card-box-shadow);\n --dropdown-color: var(--color);\n --dropdown-hover-background-color: hsl(205deg, 20%, 94%);\n --modal-overlay-background-color: rgba(213, 220, 226, 0.7);\n --progress-background-color: hsl(205deg, 18%, 86%);\n --progress-color: var(--primary);\n --loading-spinner-opacity: 0.5;\n --tooltip-background-color: var(--contrast);\n --tooltip-color: var(--contrast-inverse);\n --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\");\n --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(65, 84, 98)' 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\");\n --icon-chevron-button: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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\");\n --icon-chevron-button-inverse: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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\");\n --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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E\");\n --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(65, 84, 98)' 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\");\n --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(198, 40, 40)' 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\");\n --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\");\n --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(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E\");\n --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(65, 84, 98)' 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\");\n --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(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n color-scheme: light;\n}\n\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme=light]) {\n --background-color: #11191f;\n --color: hsl(205deg, 16%, 77%);\n --h1-color: hsl(205deg, 20%, 94%);\n --h2-color: #e1e6eb;\n --h3-color: hsl(205deg, 18%, 86%);\n --h4-color: #c8d1d8;\n --h5-color: hsl(205deg, 16%, 77%);\n --h6-color: #afbbc4;\n --muted-color: hsl(205deg, 10%, 50%);\n --muted-border-color: #1f2d38;\n --primary: hsl(195deg, 85%, 41%);\n --primary-hover: hsl(195deg, 80%, 50%);\n --primary-focus: rgba(16, 149, 193, 0.25);\n --primary-inverse: #fff;\n --secondary: hsl(205deg, 15%, 41%);\n --secondary-hover: hsl(205deg, 10%, 50%);\n --secondary-focus: rgba(115, 130, 140, 0.25);\n --secondary-inverse: #fff;\n --contrast: hsl(205deg, 20%, 94%);\n --contrast-hover: #fff;\n --contrast-focus: rgba(115, 130, 140, 0.25);\n --contrast-inverse: #000;\n --mark-background-color: #d1c284;\n --mark-color: #11191f;\n --ins-color: #388e3c;\n --del-color: #c62828;\n --blockquote-border-color: var(--muted-border-color);\n --blockquote-footer-color: var(--muted-color);\n --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);\n --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);\n --form-element-background-color: #11191f;\n --form-element-border-color: #374956;\n --form-element-color: var(--color);\n --form-element-placeholder-color: var(--muted-color);\n --form-element-active-background-color: var(--form-element-background-color);\n --form-element-active-border-color: var(--primary);\n --form-element-focus-color: var(--primary-focus);\n --form-element-disabled-background-color: hsl(205deg, 25%, 23%);\n --form-element-disabled-border-color: hsl(205deg, 20%, 32%);\n --form-element-disabled-opacity: 0.5;\n --form-element-invalid-border-color: #b71c1c;\n --form-element-invalid-active-border-color: #c62828;\n --form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);\n --form-element-valid-border-color: #2e7d32;\n --form-element-valid-active-border-color: #388e3c;\n --form-element-valid-focus-color: rgba(56, 142, 60, 0.25);\n --switch-background-color: #374956;\n --switch-color: var(--primary-inverse);\n --switch-checked-background-color: var(--primary);\n --range-border-color: #24333e;\n --range-active-border-color: hsl(205deg, 25%, 23%);\n --range-thumb-border-color: var(--background-color);\n --range-thumb-color: var(--secondary);\n --range-thumb-hover-color: var(--secondary-hover);\n --range-thumb-active-color: var(--primary);\n --table-border-color: var(--muted-border-color);\n --table-row-stripped-background-color: rgba(115, 130, 140, 0.05);\n --code-background-color: #18232c;\n --code-color: var(--muted-color);\n --code-kbd-background-color: var(--contrast);\n --code-kbd-color: var(--contrast-inverse);\n --code-tag-color: hsl(330deg, 30%, 50%);\n --code-property-color: hsl(185deg, 30%, 50%);\n --code-value-color: hsl(40deg, 10%, 50%);\n --code-comment-color: #4d606d;\n --accordion-border-color: var(--muted-border-color);\n --accordion-active-summary-color: var(--primary);\n --accordion-close-summary-color: var(--color);\n --accordion-open-summary-color: var(--muted-color);\n --card-background-color: #141e26;\n --card-border-color: var(--card-background-color);\n --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),\n 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),\n 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),\n 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),\n 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),\n 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),\n 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);\n --card-sectionning-background-color: #18232c;\n --dropdown-background-color: hsl(205deg, 30%, 15%);\n --dropdown-border-color: #24333e;\n --dropdown-box-shadow: var(--card-box-shadow);\n --dropdown-color: var(--color);\n --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);\n --modal-overlay-background-color: rgba(36, 51, 62, 0.8);\n --progress-background-color: #24333e;\n --progress-color: var(--primary);\n --loading-spinner-opacity: 0.5;\n --tooltip-background-color: var(--contrast);\n --tooltip-color: var(--contrast-inverse);\n --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\");\n --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(162, 175, 185)' 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\");\n --icon-chevron-button: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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\");\n --icon-chevron-button-inverse: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' 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\");\n --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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E\");\n --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(162, 175, 185)' 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\");\n --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(183, 28, 28)' 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\");\n --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\");\n --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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E\");\n --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(162, 175, 185)' 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\");\n --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(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n color-scheme: dark;\n }\n}\n[data-theme=dark] {\n --background-color: #11191f;\n --color: hsl(205deg, 16%, 77%);\n --h1-color: hsl(205deg, 20%, 94%);\n --h2-color: #e1e6eb;\n --h3-color: hsl(205deg, 18%, 86%);\n --h4-color: #c8d1d8;\n --h5-color: hsl(205deg, 16%, 77%);\n --h6-color: #afbbc4;\n --muted-color: hsl(205deg, 10%, 50%);\n --muted-border-color: #1f2d38;\n --primary: hsl(195deg, 85%, 41%);\n --primary-hover: hsl(195deg, 80%, 50%);\n --primary-focus: rgba(16, 149, 193, 0.25);\n --primary-inverse: #fff;\n --secondary: hsl(205deg, 15%, 41%);\n --secondary-hover: hsl(205deg, 10%, 50%);\n --secondary-focus: rgba(115, 130, 140, 0.25);\n --secondary-inverse: #fff;\n --contrast: hsl(205deg, 20%, 94%);\n --contrast-hover: #fff;\n --contrast-focus: rgba(115, 130, 140, 0.25);\n --contrast-inverse: #000;\n --mark-background-color: #d1c284;\n --mark-color: #11191f;\n --ins-color: #388e3c;\n --del-color: #c62828;\n --blockquote-border-color: var(--muted-border-color);\n --blockquote-footer-color: var(--muted-color);\n --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);\n --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);\n --form-element-background-color: #11191f;\n --form-element-border-color: #374956;\n --form-element-color: var(--color);\n --form-element-placeholder-color: var(--muted-color);\n --form-element-active-background-color: var(--form-element-background-color);\n --form-element-active-border-color: var(--primary);\n --form-element-focus-color: var(--primary-focus);\n --form-element-disabled-background-color: hsl(205deg, 25%, 23%);\n --form-element-disabled-border-color: hsl(205deg, 20%, 32%);\n --form-element-disabled-opacity: 0.5;\n --form-element-invalid-border-color: #b71c1c;\n --form-element-invalid-active-border-color: #c62828;\n --form-element-invalid-focus-color: rgba(198, 40, 40, 0.25);\n --form-element-valid-border-color: #2e7d32;\n --form-element-valid-active-border-color: #388e3c;\n --form-element-valid-focus-color: rgba(56, 142, 60, 0.25);\n --switch-background-color: #374956;\n --switch-color: var(--primary-inverse);\n --switch-checked-background-color: var(--primary);\n --range-border-color: #24333e;\n --range-active-border-color: hsl(205deg, 25%, 23%);\n --range-thumb-border-color: var(--background-color);\n --range-thumb-color: var(--secondary);\n --range-thumb-hover-color: var(--secondary-hover);\n --range-thumb-active-color: var(--primary);\n --table-border-color: var(--muted-border-color);\n --table-row-stripped-background-color: rgba(115, 130, 140, 0.05);\n --code-background-color: #18232c;\n --code-color: var(--muted-color);\n --code-kbd-background-color: var(--contrast);\n --code-kbd-color: var(--contrast-inverse);\n --code-tag-color: hsl(330deg, 30%, 50%);\n --code-property-color: hsl(185deg, 30%, 50%);\n --code-value-color: hsl(40deg, 10%, 50%);\n --code-comment-color: #4d606d;\n --accordion-border-color: var(--muted-border-color);\n --accordion-active-summary-color: var(--primary);\n --accordion-close-summary-color: var(--color);\n --accordion-open-summary-color: var(--muted-color);\n --card-background-color: #141e26;\n --card-border-color: var(--card-background-color);\n --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698),\n 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024),\n 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03),\n 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036),\n 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302),\n 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06),\n 0 0 0 0.0625rem rgba(0, 0, 0, 0.015);\n --card-sectionning-background-color: #18232c;\n --dropdown-background-color: hsl(205deg, 30%, 15%);\n --dropdown-border-color: #24333e;\n --dropdown-box-shadow: var(--card-box-shadow);\n --dropdown-color: var(--color);\n --dropdown-hover-background-color: rgba(36, 51, 62, 0.75);\n --modal-overlay-background-color: rgba(36, 51, 62, 0.8);\n --progress-background-color: #24333e;\n --progress-color: var(--primary);\n --loading-spinner-opacity: 0.5;\n --tooltip-background-color: var(--contrast);\n --tooltip-color: var(--contrast-inverse);\n --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\");\n --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(162, 175, 185)' 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\");\n --icon-chevron-button: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' 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\");\n --icon-chevron-button-inverse: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' 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\");\n --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(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E\");\n --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(162, 175, 185)' 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\");\n --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(183, 28, 28)' 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\");\n --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\");\n --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(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E\");\n --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(162, 175, 185)' 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\");\n --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(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n color-scheme: dark;\n}\n\nprogress,\n[type=checkbox],\n[type=radio],\n[type=range] {\n accent-color: var(--primary);\n}\n\n/**\n * Document\n * Content-box & Responsive typography\n */\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n background-repeat: no-repeat;\n}\n\n::before,\n::after {\n text-decoration: inherit;\n vertical-align: inherit;\n}\n\n:where(:root) {\n -webkit-tap-highlight-color: transparent;\n -webkit-text-size-adjust: 100%;\n text-size-adjust: 100%;\n background-color: var(--background-color);\n color: var(--color);\n font-weight: var(--font-weight);\n font-size: var(--font-size);\n line-height: var(--line-height);\n font-family: var(--font-family);\n text-rendering: optimizeLegibility;\n overflow-wrap: break-word;\n cursor: default;\n tab-size: 4;\n}\n\n/**\n * Sectioning\n * Container and responsive spacings for header, main, footer\n */\nmain {\n display: block;\n}\n\nbody {\n width: 100%;\n margin: 0;\n}\nbody > header,\nbody > main,\nbody > footer {\n width: 100%;\n margin-right: auto;\n margin-left: auto;\n padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);\n}\n@media (min-width: 576px) {\n body > header,\nbody > main,\nbody > footer {\n max-width: 510px;\n padding-right: 0;\n padding-left: 0;\n }\n}\n@media (min-width: 768px) {\n body > header,\nbody > main,\nbody > footer {\n max-width: 700px;\n }\n}\n@media (min-width: 992px) {\n body > header,\nbody > main,\nbody > footer {\n max-width: 920px;\n }\n}\n@media (min-width: 1200px) {\n body > header,\nbody > main,\nbody > footer {\n max-width: 1130px;\n }\n}\n\n/**\n * Section\n * Responsive spacings for section\n */\nsection {\n margin-bottom: var(--block-spacing-vertical);\n}\n\n/**\n * Horizontal scroller (
)\n */\nfigure {\n display: block;\n margin: 0;\n padding: 0;\n overflow-x: auto;\n}\nfigure figcaption {\n padding: calc(var(--spacing) * 0.5) 0;\n color: var(--muted-color);\n}\n\n/**\n * Typography\n */\nb,\nstrong {\n font-weight: bolder;\n}\n\nsub,\nsup {\n position: relative;\n font-size: 0.75em;\n line-height: 0;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\naddress,\nblockquote,\ndl,\nfigure,\nform,\nol,\np,\npre,\ntable,\nul {\n margin-top: 0;\n margin-bottom: var(--typography-spacing-vertical);\n color: var(--color);\n font-style: normal;\n font-weight: var(--font-weight);\n font-size: var(--font-size);\n}\n\na,\n[role=link] {\n --color: var(--primary);\n --background-color: transparent;\n outline: none;\n background-color: var(--background-color);\n color: var(--color);\n text-decoration: var(--text-decoration);\n transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);\n}\na:is([aria-current], :hover, :active, :focus),\n[role=link]:is([aria-current], :hover, :active, :focus) {\n --color: var(--primary-hover);\n --text-decoration: underline;\n}\na:focus,\n[role=link]:focus {\n --background-color: var(--primary-focus);\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-top: 0;\n margin-bottom: var(--typography-spacing-vertical);\n color: var(--color);\n font-weight: var(--font-weight);\n font-size: var(--font-size);\n font-family: var(--font-family);\n}\n\nh1 {\n --color: var(--h1-color);\n}\n\nh2 {\n --color: var(--h2-color);\n}\n\nh3 {\n --color: var(--h3-color);\n}\n\nh4 {\n --color: var(--h4-color);\n}\n\nh5 {\n --color: var(--h5-color);\n}\n\nh6 {\n --color: var(--h6-color);\n}\n\n:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {\n margin-top: var(--typography-spacing-vertical);\n}\n\nhgroup {\n margin-bottom: var(--typography-spacing-vertical);\n}\nhgroup > * {\n margin-bottom: 0;\n}\nhgroup > *:last-child {\n --color: var(--muted-color);\n --font-weight: unset;\n font-size: 1rem;\n font-family: unset;\n}\n\np {\n margin-bottom: var(--typography-spacing-vertical);\n}\n\nsmall {\n font-size: var(--font-size);\n}\n\n:where(dl, ol, ul) {\n padding-right: 0;\n padding-left: var(--spacing);\n padding-inline-start: var(--spacing);\n padding-inline-end: 0;\n}\n:where(dl, ol, ul) li {\n margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);\n}\n\n:where(dl, ol, ul) :is(dl, ol, ul) {\n margin: 0;\n margin-top: calc(var(--typography-spacing-vertical) * 0.25);\n}\n\nul li {\n list-style: square;\n}\n\nmark {\n padding: 0.125rem 0.25rem;\n background-color: var(--mark-background-color);\n color: var(--mark-color);\n vertical-align: baseline;\n}\n\nblockquote {\n display: block;\n margin: var(--typography-spacing-vertical) 0;\n padding: var(--spacing);\n border-right: none;\n border-left: 0.25rem solid var(--blockquote-border-color);\n border-inline-start: 0.25rem solid var(--blockquote-border-color);\n border-inline-end: none;\n}\nblockquote footer {\n margin-top: calc(var(--typography-spacing-vertical) * 0.5);\n color: var(--blockquote-footer-color);\n}\n\nabbr[title] {\n border-bottom: 1px dotted;\n text-decoration: none;\n cursor: help;\n}\n\nins {\n color: var(--ins-color);\n text-decoration: none;\n}\n\ndel {\n color: var(--del-color);\n}\n\n::selection {\n background-color: var(--primary-focus);\n}\n\n/**\n * Embedded content\n */\n:where(audio, canvas, iframe, img, svg, video) {\n vertical-align: middle;\n}\n\naudio,\nvideo {\n display: inline-block;\n}\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n:where(iframe) {\n border-style: none;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n border-style: none;\n}\n\n:where(svg:not([fill])) {\n fill: currentColor;\n}\n\nsvg:not(:root) {\n overflow: hidden;\n}\n\n/**\n * Button\n */\nbutton {\n margin: 0;\n overflow: visible;\n font-family: inherit;\n text-transform: none;\n}\n\nbutton,\n[type=button],\n[type=reset],\n[type=submit] {\n -webkit-appearance: button;\n}\n\nbutton {\n display: block;\n width: 100%;\n margin-bottom: var(--spacing);\n}\n\n[role=button] {\n display: inline-block;\n text-decoration: none;\n}\n\nbutton,\ninput[type=submit],\ninput[type=button],\ninput[type=reset],\n[role=button] {\n --background-color: var(--primary);\n --border-color: var(--primary);\n --color: var(--primary-inverse);\n --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));\n padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);\n border: var(--border-width) solid var(--border-color);\n border-radius: var(--border-radius);\n outline: none;\n background-color: var(--background-color);\n box-shadow: var(--box-shadow);\n color: var(--color);\n font-weight: var(--font-weight);\n font-size: 1rem;\n line-height: var(--line-height);\n text-align: center;\n cursor: pointer;\n transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);\n}\nbutton:is([aria-current], :hover, :active, :focus),\ninput[type=submit]:is([aria-current], :hover, :active, :focus),\ninput[type=button]:is([aria-current], :hover, :active, :focus),\ninput[type=reset]:is([aria-current], :hover, :active, :focus),\n[role=button]:is([aria-current], :hover, :active, :focus) {\n --background-color: var(--primary-hover);\n --border-color: var(--primary-hover);\n --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));\n --color: var(--primary-inverse);\n}\nbutton:focus,\ninput[type=submit]:focus,\ninput[type=button]:focus,\ninput[type=reset]:focus,\n[role=button]:focus {\n --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),\n 0 0 0 var(--outline-width) var(--primary-focus);\n}\n\ninput[type=reset] {\n --background-color: var(--secondary);\n --border-color: var(--secondary);\n --color: var(--secondary-inverse);\n cursor: pointer;\n}\ninput[type=reset]:is([aria-current], :hover, :active, :focus) {\n --background-color: var(--secondary-hover);\n --border-color: var(--secondary-hover);\n}\ninput[type=reset]:focus {\n --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),\n 0 0 0 var(--outline-width) var(--secondary-focus);\n}\n\n:where(button, [type=submit], [type=button], [type=reset], [role=button])[disabled],\n:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]),\na[role=button]:not([href]) {\n opacity: 0.5;\n pointer-events: none;\n}\n\n/**\n * Table\n */\n:where(table) {\n width: 100%;\n border-collapse: collapse;\n border-spacing: 0;\n text-indent: 0;\n}\n\nth,\ntd {\n padding: calc(var(--spacing) / 2) var(--spacing);\n border-bottom: var(--border-width) solid var(--table-border-color);\n color: var(--color);\n font-weight: var(--font-weight);\n font-size: var(--font-size);\n text-align: left;\n text-align: start;\n}\n\ntfoot th,\ntfoot td {\n border-top: var(--border-width) solid var(--table-border-color);\n border-bottom: 0;\n}\n\ntable[role=grid] tbody tr:nth-child(odd) {\n background-color: var(--table-row-stripped-background-color);\n}\n\n/**\n * Code\n */\npre,\ncode,\nkbd,\nsamp {\n font-size: 0.875em;\n font-family: var(--font-family);\n}\n\npre {\n -ms-overflow-style: scrollbar;\n overflow: auto;\n}\n\npre,\ncode,\nkbd {\n border-radius: var(--border-radius);\n background: var(--code-background-color);\n color: var(--code-color);\n font-weight: var(--font-weight);\n line-height: initial;\n}\n\ncode,\nkbd {\n display: inline-block;\n padding: 0.375rem 0.5rem;\n}\n\npre {\n display: block;\n margin-bottom: var(--spacing);\n overflow-x: auto;\n}\npre > code {\n display: block;\n padding: var(--spacing);\n background: none;\n font-size: 14px;\n line-height: var(--line-height);\n}\n\ncode b {\n color: var(--code-tag-color);\n font-weight: var(--font-weight);\n}\ncode i {\n color: var(--code-property-color);\n font-style: normal;\n}\ncode u {\n color: var(--code-value-color);\n text-decoration: none;\n}\ncode em {\n color: var(--code-comment-color);\n font-style: normal;\n}\n\nkbd {\n background-color: var(--code-kbd-background-color);\n color: var(--code-kbd-color);\n vertical-align: baseline;\n}\n\n/**\n * Miscs\n */\nhr {\n height: 0;\n border: 0;\n border-top: 1px solid var(--muted-border-color);\n color: inherit;\n}\n\n[hidden],\ntemplate {\n display: none !important;\n}\n\ncanvas {\n display: inline-block;\n}\n\n/**\n * Basics form elements\n */\ninput,\noptgroup,\nselect,\ntextarea {\n margin: 0;\n font-size: 1rem;\n line-height: var(--line-height);\n font-family: inherit;\n letter-spacing: inherit;\n}\n\ninput {\n overflow: visible;\n}\n\nselect {\n text-transform: none;\n}\n\nlegend {\n max-width: 100%;\n padding: 0;\n color: inherit;\n white-space: normal;\n}\n\ntextarea {\n overflow: auto;\n}\n\n[type=checkbox],\n[type=radio] {\n padding: 0;\n}\n\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n[type=search] {\n -webkit-appearance: textfield;\n outline-offset: -2px;\n}\n\n[type=search]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n font: inherit;\n}\n\n::-moz-focus-inner {\n padding: 0;\n border-style: none;\n}\n\n:-moz-focusring {\n outline: none;\n}\n\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n::-ms-expand {\n display: none;\n}\n\n[type=file],\n[type=range] {\n padding: 0;\n border-width: 0;\n}\n\ninput:not([type=checkbox], [type=radio], [type=range]) {\n height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);\n}\n\nfieldset {\n margin: 0;\n margin-bottom: var(--spacing);\n padding: 0;\n border: 0;\n}\n\nlabel,\nfieldset legend {\n display: block;\n margin-bottom: calc(var(--spacing) * 0.25);\n font-weight: var(--form-label-font-weight, var(--font-weight));\n}\n\ninput:not([type=checkbox], [type=radio]),\nselect,\ntextarea {\n width: 100%;\n}\n\ninput:not([type=checkbox], [type=radio], [type=range], [type=file]),\nselect,\ntextarea {\n appearance: none;\n padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);\n}\n\ninput,\nselect,\ntextarea {\n --background-color: var(--form-element-background-color);\n --border-color: var(--form-element-border-color);\n --color: var(--form-element-color);\n --box-shadow: none;\n border: var(--border-width) solid var(--border-color);\n border-radius: var(--border-radius);\n outline: none;\n background-color: var(--background-color);\n box-shadow: var(--box-shadow);\n color: var(--color);\n font-weight: var(--font-weight);\n transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);\n}\n\ninput:not([type=submit], [type=button], [type=reset], [type=checkbox], [type=radio], [readonly]):is(:active, :focus),\n:where(select, textarea):is(:active, :focus) {\n --background-color: var(--form-element-active-background-color);\n}\n\ninput:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),\n:where(select, textarea):is(:active, :focus) {\n --border-color: var(--form-element-active-border-color);\n}\n\ninput:not([type=submit], [type=button], [type=reset], [type=range], [type=file], [readonly]):focus,\nselect:focus,\ntextarea:focus {\n --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);\n}\n\ninput:not([type=submit], [type=button], [type=reset])[disabled],\nselect[disabled],\ntextarea[disabled],\n:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {\n --background-color: var(--form-element-disabled-background-color);\n --border-color: var(--form-element-disabled-border-color);\n opacity: var(--form-element-disabled-opacity);\n pointer-events: none;\n}\n\n:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid] {\n padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;\n padding-left: var(--form-element-spacing-horizontal);\n padding-inline-start: var(--form-element-spacing-horizontal) !important;\n padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;\n background-position: center right 0.75rem;\n background-size: 1rem auto;\n background-repeat: no-repeat;\n}\n:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid=false] {\n background-image: var(--icon-valid);\n}\n:where(input, select, textarea):not([type=checkbox], [type=radio], [type=date], [type=datetime-local], [type=month], [type=time], [type=week])[aria-invalid=true] {\n background-image: var(--icon-invalid);\n}\n:where(input, select, textarea)[aria-invalid=false] {\n --border-color: var(--form-element-valid-border-color);\n}\n:where(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {\n --border-color: var(--form-element-valid-active-border-color) !important;\n --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;\n}\n:where(input, select, textarea)[aria-invalid=true] {\n --border-color: var(--form-element-invalid-border-color);\n}\n:where(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {\n --border-color: var(--form-element-invalid-active-border-color) !important;\n --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;\n}\n\n[dir=rtl] :where(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false]) {\n background-position: center left 0.75rem;\n}\n\ninput::placeholder,\ninput::-webkit-input-placeholder,\ntextarea::placeholder,\ntextarea::-webkit-input-placeholder,\nselect:invalid {\n color: var(--form-element-placeholder-color);\n opacity: 1;\n}\n\ninput:not([type=checkbox], [type=radio]),\nselect,\ntextarea {\n margin-bottom: var(--spacing);\n}\n\nselect::-ms-expand {\n border: 0;\n background-color: transparent;\n}\nselect:not([multiple], [size]) {\n padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);\n padding-left: var(--form-element-spacing-horizontal);\n padding-inline-start: var(--form-element-spacing-horizontal);\n padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);\n background-image: var(--icon-chevron);\n background-position: center right 0.75rem;\n background-size: 1rem auto;\n background-repeat: no-repeat;\n}\n\n[dir=rtl] select:not([multiple], [size]) {\n background-position: center left 0.75rem;\n}\n\n:where(input, select, textarea) + small {\n display: block;\n width: 100%;\n margin-top: calc(var(--spacing) * -0.75);\n margin-bottom: var(--spacing);\n color: var(--muted-color);\n}\n\nlabel > :where(input, select, textarea) {\n margin-top: calc(var(--spacing) * 0.25);\n}\n\n/**\n * Checkboxes, Radios and Switches\n */\n[type=checkbox],\n[type=radio] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 1.25em;\n height: 1.25em;\n margin-top: -0.125em;\n margin-right: 0.375em;\n margin-left: 0;\n margin-inline-start: 0;\n margin-inline-end: 0.375em;\n border-width: var(--border-width);\n font-size: inherit;\n vertical-align: middle;\n cursor: pointer;\n}\n[type=checkbox]::-ms-check,\n[type=radio]::-ms-check {\n display: none;\n}\n[type=checkbox]:checked, [type=checkbox]:checked:active, [type=checkbox]:checked:focus,\n[type=radio]:checked,\n[type=radio]:checked:active,\n[type=radio]:checked:focus {\n --background-color: var(--primary);\n --border-color: var(--primary);\n background-image: var(--icon-checkbox);\n background-position: center;\n background-size: 0.75em auto;\n background-repeat: no-repeat;\n}\n[type=checkbox] ~ label,\n[type=radio] ~ label {\n display: inline-block;\n margin-right: 0.375em;\n margin-bottom: 0;\n cursor: pointer;\n}\n\n[type=checkbox]:indeterminate {\n --background-color: var(--primary);\n --border-color: var(--primary);\n background-image: var(--icon-minus);\n background-position: center;\n background-size: 0.75em auto;\n background-repeat: no-repeat;\n}\n\n[type=radio] {\n border-radius: 50%;\n}\n[type=radio]:checked, [type=radio]:checked:active, [type=radio]:checked:focus {\n --background-color: var(--primary-inverse);\n border-width: 0.35em;\n background-image: none;\n}\n\n[type=checkbox][role=switch] {\n --background-color: var(--switch-background-color);\n --border-color: var(--switch-background-color);\n --color: var(--switch-color);\n width: 2.25em;\n height: 1.25em;\n border: var(--border-width) solid var(--border-color);\n border-radius: 1.25em;\n background-color: var(--background-color);\n line-height: 1.25em;\n}\n[type=checkbox][role=switch]:focus {\n --background-color: var(--switch-background-color);\n --border-color: var(--switch-background-color);\n}\n[type=checkbox][role=switch]:checked {\n --background-color: var(--switch-checked-background-color);\n --border-color: var(--switch-checked-background-color);\n}\n[type=checkbox][role=switch]:before {\n display: block;\n width: calc(1.25em - (var(--border-width) * 2));\n height: 100%;\n border-radius: 50%;\n background-color: var(--color);\n content: \"\";\n transition: margin 0.1s ease-in-out;\n}\n[type=checkbox][role=switch]:checked {\n background-image: none;\n}\n[type=checkbox][role=switch]:checked::before {\n margin-left: calc(1.125em - var(--border-width));\n margin-inline-start: calc(1.125em - var(--border-width));\n}\n\n[type=checkbox][aria-invalid=false],\n[type=checkbox]:checked[aria-invalid=false],\n[type=radio][aria-invalid=false],\n[type=radio]:checked[aria-invalid=false],\n[type=checkbox][role=switch][aria-invalid=false],\n[type=checkbox][role=switch]:checked[aria-invalid=false] {\n --border-color: var(--form-element-valid-border-color);\n}\n[type=checkbox][aria-invalid=true],\n[type=checkbox]:checked[aria-invalid=true],\n[type=radio][aria-invalid=true],\n[type=radio]:checked[aria-invalid=true],\n[type=checkbox][role=switch][aria-invalid=true],\n[type=checkbox][role=switch]:checked[aria-invalid=true] {\n --border-color: var(--form-element-invalid-border-color);\n}\n\n/**\n * Input type color\n */\n[type=color]::-webkit-color-swatch-wrapper {\n padding: 0;\n}\n[type=color]::-moz-focus-inner {\n padding: 0;\n}\n[type=color]::-webkit-color-swatch {\n border: 0;\n border-radius: calc(var(--border-radius) * 0.5);\n}\n[type=color]::-moz-color-swatch {\n border: 0;\n border-radius: calc(var(--border-radius) * 0.5);\n}\n\n/**\n * Input type datetime\n */\ninput:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {\n --icon-position: 0.75rem;\n --icon-width: 1rem;\n padding-right: calc(var(--icon-width) + var(--icon-position));\n background-image: var(--icon-date);\n background-position: center right var(--icon-position);\n background-size: var(--icon-width) auto;\n background-repeat: no-repeat;\n}\ninput:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {\n background-image: var(--icon-time);\n}\n\n[type=date]::-webkit-calendar-picker-indicator,\n[type=datetime-local]::-webkit-calendar-picker-indicator,\n[type=month]::-webkit-calendar-picker-indicator,\n[type=time]::-webkit-calendar-picker-indicator,\n[type=week]::-webkit-calendar-picker-indicator {\n width: var(--icon-width);\n margin-right: calc(var(--icon-width) * -1);\n margin-left: var(--icon-position);\n opacity: 0;\n}\n\n[dir=rtl] :is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {\n text-align: right;\n}\n\n/**\n * Input type file\n */\n[type=file] {\n --color: var(--muted-color);\n padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;\n border: 0;\n border-radius: 0;\n background: none;\n}\n[type=file]::file-selector-button {\n --background-color: var(--secondary);\n --border-color: var(--secondary);\n --color: var(--secondary-inverse);\n margin-right: calc(var(--spacing) / 2);\n margin-left: 0;\n margin-inline-start: 0;\n margin-inline-end: calc(var(--spacing) / 2);\n padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);\n border: var(--border-width) solid var(--border-color);\n border-radius: var(--border-radius);\n outline: none;\n background-color: var(--background-color);\n box-shadow: var(--box-shadow);\n color: var(--color);\n font-weight: var(--font-weight);\n font-size: 1rem;\n line-height: var(--line-height);\n text-align: center;\n cursor: pointer;\n transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);\n}\n[type=file]::file-selector-button:is(:hover, :active, :focus) {\n --background-color: var(--secondary-hover);\n --border-color: var(--secondary-hover);\n}\n[type=file]::-webkit-file-upload-button {\n --background-color: var(--secondary);\n --border-color: var(--secondary);\n --color: var(--secondary-inverse);\n margin-right: calc(var(--spacing) / 2);\n margin-left: 0;\n margin-inline-start: 0;\n margin-inline-end: calc(var(--spacing) / 2);\n padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);\n border: var(--border-width) solid var(--border-color);\n border-radius: var(--border-radius);\n outline: none;\n background-color: var(--background-color);\n box-shadow: var(--box-shadow);\n color: var(--color);\n font-weight: var(--font-weight);\n font-size: 1rem;\n line-height: var(--line-height);\n text-align: center;\n cursor: pointer;\n transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);\n}\n[type=file]::-webkit-file-upload-button:is(:hover, :active, :focus) {\n --background-color: var(--secondary-hover);\n --border-color: var(--secondary-hover);\n}\n[type=file]::-ms-browse {\n --background-color: var(--secondary);\n --border-color: var(--secondary);\n --color: var(--secondary-inverse);\n margin-right: calc(var(--spacing) / 2);\n margin-left: 0;\n margin-inline-start: 0;\n margin-inline-end: calc(var(--spacing) / 2);\n padding: calc(var(--form-element-spacing-vertical) * 0.5) calc(var(--form-element-spacing-horizontal) * 0.5);\n border: var(--border-width) solid var(--border-color);\n border-radius: var(--border-radius);\n outline: none;\n background-color: var(--background-color);\n box-shadow: var(--box-shadow);\n color: var(--color);\n font-weight: var(--font-weight);\n font-size: 1rem;\n line-height: var(--line-height);\n text-align: center;\n cursor: pointer;\n transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);\n}\n[type=file]::-ms-browse:is(:hover, :active, :focus) {\n --background-color: var(--secondary-hover);\n --border-color: var(--secondary-hover);\n}\n\n/**\n * Input type range\n */\n[type=range] {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n width: 100%;\n height: 1.25rem;\n background: none;\n}\n[type=range]::-webkit-slider-runnable-track {\n width: 100%;\n height: 0.25rem;\n border-radius: var(--border-radius);\n background-color: var(--range-border-color);\n transition: background-color var(--transition), box-shadow var(--transition);\n}\n[type=range]::-moz-range-track {\n width: 100%;\n height: 0.25rem;\n border-radius: var(--border-radius);\n background-color: var(--range-border-color);\n transition: background-color var(--transition), box-shadow var(--transition);\n}\n[type=range]::-ms-track {\n width: 100%;\n height: 0.25rem;\n border-radius: var(--border-radius);\n background-color: var(--range-border-color);\n transition: background-color var(--transition), box-shadow var(--transition);\n}\n[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n margin-top: -0.5rem;\n border: 2px solid var(--range-thumb-border-color);\n border-radius: 50%;\n background-color: var(--range-thumb-color);\n cursor: pointer;\n transition: background-color var(--transition), transform var(--transition);\n}\n[type=range]::-moz-range-thumb {\n -webkit-appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n margin-top: -0.5rem;\n border: 2px solid var(--range-thumb-border-color);\n border-radius: 50%;\n background-color: var(--range-thumb-color);\n cursor: pointer;\n transition: background-color var(--transition), transform var(--transition);\n}\n[type=range]::-ms-thumb {\n -webkit-appearance: none;\n width: 1.25rem;\n height: 1.25rem;\n margin-top: -0.5rem;\n border: 2px solid var(--range-thumb-border-color);\n border-radius: 50%;\n background-color: var(--range-thumb-color);\n cursor: pointer;\n transition: background-color var(--transition), transform var(--transition);\n}\n[type=range]:hover, [type=range]:focus {\n --range-border-color: var(--range-active-border-color);\n --range-thumb-color: var(--range-thumb-hover-color);\n}\n[type=range]:active {\n --range-thumb-color: var(--range-thumb-active-color);\n}\n[type=range]:active::-webkit-slider-thumb {\n transform: scale(1.25);\n}\n[type=range]:active::-moz-range-thumb {\n transform: scale(1.25);\n}\n[type=range]:active::-ms-thumb {\n transform: scale(1.25);\n}\n\n/**\n * Input type search\n */\ninput:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {\n padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);\n border-radius: 5rem;\n background-image: var(--icon-search);\n background-position: center left 1.125rem;\n background-size: 1rem auto;\n background-repeat: no-repeat;\n}\ninput:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {\n padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;\n background-position: center left 1.125rem, center right 0.75rem;\n}\ninput:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=false] {\n background-image: var(--icon-search), var(--icon-valid);\n}\ninput:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid=true] {\n background-image: var(--icon-search), var(--icon-invalid);\n}\n\n[type=search]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n display: none;\n}\n\n[dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {\n background-position: center right 1.125rem;\n}\n[dir=rtl] :where(input):not([type=checkbox], [type=radio], [type=range], [type=file])[type=search][aria-invalid] {\n background-position: center right 1.125rem, center left 0.75rem;\n}\n\n/**\n * Accordion (
)\n */\ndetails {\n display: block;\n margin-bottom: var(--spacing);\n padding-bottom: var(--spacing);\n border-bottom: var(--border-width) solid var(--accordion-border-color);\n}\ndetails summary {\n line-height: 1rem;\n list-style-type: none;\n cursor: pointer;\n transition: color var(--transition);\n}\ndetails summary:not([role]) {\n color: var(--accordion-close-summary-color);\n}\ndetails summary::-webkit-details-marker {\n display: none;\n}\ndetails summary::marker {\n display: none;\n}\ndetails summary::-moz-list-bullet {\n list-style-type: none;\n}\ndetails summary::after {\n display: block;\n width: 1rem;\n height: 1rem;\n margin-inline-start: calc(var(--spacing, 1rem) * 0.5);\n float: right;\n transform: rotate(-90deg);\n background-image: var(--icon-chevron);\n background-position: right center;\n background-size: 1rem auto;\n background-repeat: no-repeat;\n content: \"\";\n transition: transform var(--transition);\n}\ndetails summary:focus {\n outline: none;\n}\ndetails summary:focus:not([role=button]) {\n color: var(--accordion-active-summary-color);\n}\ndetails summary[role=button] {\n width: 100%;\n text-align: left;\n}\ndetails summary[role=button]::after {\n height: calc(1rem * var(--line-height, 1.5));\n background-image: var(--icon-chevron-button);\n}\ndetails[open] > summary {\n margin-bottom: calc(var(--spacing));\n}\ndetails[open] > summary:not([role]):not(:focus) {\n color: var(--accordion-open-summary-color);\n}\ndetails[open] > summary::after {\n transform: rotate(0);\n}\n\n[dir=rtl] details summary {\n text-align: right;\n}\n[dir=rtl] details summary::after {\n float: left;\n background-position: left center;\n}\n\n/**\n * Card (
)\n */\narticle {\n margin: var(--block-spacing-vertical) 0;\n padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);\n border-radius: var(--border-radius);\n background: var(--card-background-color);\n box-shadow: var(--card-box-shadow);\n}\narticle > header,\narticle > footer {\n margin-right: calc(var(--block-spacing-horizontal) * -1);\n margin-left: calc(var(--block-spacing-horizontal) * -1);\n padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);\n background-color: var(--card-sectionning-background-color);\n}\narticle > header {\n margin-top: calc(var(--block-spacing-vertical) * -1);\n margin-bottom: var(--block-spacing-vertical);\n border-bottom: var(--border-width) solid var(--card-border-color);\n border-top-right-radius: var(--border-radius);\n border-top-left-radius: var(--border-radius);\n}\narticle > footer {\n margin-top: var(--block-spacing-vertical);\n margin-bottom: calc(var(--block-spacing-vertical) * -1);\n border-top: var(--border-width) solid var(--card-border-color);\n border-bottom-right-radius: var(--border-radius);\n border-bottom-left-radius: var(--border-radius);\n}\n\n/**\n * Dropdown ([role=\"list\"])\n */\ndetails[role=list],\nli[role=list] {\n position: relative;\n}\n\ndetails[role=list] summary + ul,\nli[role=list] > ul {\n display: flex;\n z-index: 99;\n position: absolute;\n top: auto;\n right: 0;\n left: 0;\n flex-direction: column;\n margin: 0;\n padding: 0;\n border: var(--border-width) solid var(--dropdown-border-color);\n border-radius: var(--border-radius);\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n background-color: var(--dropdown-background-color);\n box-shadow: var(--card-box-shadow);\n color: var(--dropdown-color);\n white-space: nowrap;\n}\ndetails[role=list] summary + ul li,\nli[role=list] > ul li {\n width: 100%;\n margin-bottom: 0;\n padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);\n list-style: none;\n}\ndetails[role=list] summary + ul li:first-of-type,\nli[role=list] > ul li:first-of-type {\n margin-top: calc(var(--form-element-spacing-vertical) * 0.5);\n}\ndetails[role=list] summary + ul li:last-of-type,\nli[role=list] > ul li:last-of-type {\n margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5);\n}\ndetails[role=list] summary + ul li a,\nli[role=list] > ul li a {\n display: block;\n margin: calc(var(--form-element-spacing-vertical) * -0.5) calc(var(--form-element-spacing-horizontal) * -1);\n padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);\n overflow: hidden;\n color: var(--dropdown-color);\n text-decoration: none;\n text-overflow: ellipsis;\n}\ndetails[role=list] summary + ul li a:hover,\nli[role=list] > ul li a:hover {\n background-color: var(--dropdown-hover-background-color);\n}\n\ndetails[role=list] summary::after,\nli[role=list] > a::after {\n display: block;\n width: 1rem;\n height: calc(1rem * var(--line-height, 1.5));\n margin-inline-start: 0.5rem;\n float: right;\n transform: rotate(0deg);\n background-position: right center;\n background-size: 1rem auto;\n background-repeat: no-repeat;\n content: \"\";\n}\n\ndetails[role=list] {\n padding: 0;\n border-bottom: none;\n}\ndetails[role=list] summary {\n margin-bottom: 0;\n}\ndetails[role=list] summary:not([role]) {\n height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);\n padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);\n border: var(--border-width) solid var(--form-element-border-color);\n border-radius: var(--border-radius);\n background-color: var(--form-element-background-color);\n color: var(--form-element-placeholder-color);\n line-height: inherit;\n cursor: pointer;\n transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);\n}\ndetails[role=list] summary:not([role]):active, details[role=list] summary:not([role]):focus {\n border-color: var(--form-element-active-border-color);\n background-color: var(--form-element-active-background-color);\n}\ndetails[role=list] summary:not([role]):focus {\n box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);\n}\ndetails[role=list][open] summary {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n}\ndetails[role=list][open] summary::before {\n display: block;\n z-index: 1;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background: none;\n content: \"\";\n cursor: default;\n}\n\nnav details[role=list] summary,\nnav li[role=list] a {\n display: flex;\n direction: ltr;\n}\n\nnav details[role=list] summary + ul,\nnav li[role=list] > ul {\n min-width: fit-content;\n border-radius: var(--border-radius);\n}\nnav details[role=list] summary + ul li a,\nnav li[role=list] > ul li a {\n border-radius: 0;\n}\n\nnav details[role=list] summary,\nnav details[role=list] summary:not([role]) {\n height: auto;\n padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);\n}\nnav details[role=list][open] summary {\n border-radius: var(--border-radius);\n}\nnav details[role=list] summary + ul {\n margin-top: var(--outline-width);\n margin-inline-start: 0;\n}\nnav details[role=list] summary[role=link] {\n margin-bottom: calc(var(--nav-link-spacing-vertical) * -1);\n line-height: var(--line-height);\n}\nnav details[role=list] summary[role=link] + ul {\n margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));\n margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1);\n}\n\nli[role=list]:hover > ul,\nli[role=list] a:active ~ ul,\nli[role=list] a:focus ~ ul {\n display: flex;\n}\nli[role=list] > ul {\n display: none;\n margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width));\n margin-inline-start: calc(var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal));\n}\nli[role=list] > a::after {\n background-image: var(--icon-chevron);\n}\n\n/**\n * Loading ([aria-busy=true])\n */\n[aria-busy=true] {\n cursor: progress;\n}\n\n[aria-busy=true]:not(input, select, textarea)::before {\n display: inline-block;\n width: 1em;\n height: 1em;\n border: 0.1875em solid currentColor;\n border-radius: 1em;\n border-right-color: transparent;\n content: \"\";\n vertical-align: text-bottom;\n vertical-align: -0.125em;\n animation: spinner 0.75s linear infinite;\n opacity: var(--loading-spinner-opacity);\n}\n[aria-busy=true]:not(input, select, textarea):not(:empty)::before {\n margin-right: calc(var(--spacing) * 0.5);\n margin-left: 0;\n margin-inline-start: 0;\n margin-inline-end: calc(var(--spacing) * 0.5);\n}\n[aria-busy=true]:not(input, select, textarea):empty {\n text-align: center;\n}\n\nbutton[aria-busy=true],\ninput[type=submit][aria-busy=true],\ninput[type=button][aria-busy=true],\ninput[type=reset][aria-busy=true],\na[aria-busy=true] {\n pointer-events: none;\n}\n\n@keyframes spinner {\n to {\n transform: rotate(360deg);\n }\n}\n/**\n * Modal ()\n */\n:root {\n --scrollbar-width: 0px;\n}\n\ndialog {\n display: flex;\n z-index: 999;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n align-items: center;\n justify-content: center;\n width: inherit;\n min-width: 100%;\n height: inherit;\n min-height: 100%;\n padding: var(--spacing);\n border: 0;\n backdrop-filter: var(--modal-overlay-backdrop-filter);\n background-color: var(--modal-overlay-background-color);\n color: var(--color);\n}\ndialog article {\n max-height: calc(100vh - var(--spacing) * 2);\n overflow: auto;\n}\n@media (min-width: 576px) {\n dialog article {\n max-width: 510px;\n }\n}\n@media (min-width: 768px) {\n dialog article {\n max-width: 700px;\n }\n}\ndialog article > header,\ndialog article > footer {\n padding: calc(var(--block-spacing-vertical) * 0.5) var(--block-spacing-horizontal);\n}\ndialog article > header .close {\n margin: 0;\n margin-left: var(--spacing);\n float: right;\n}\ndialog article > footer {\n text-align: right;\n}\ndialog article > footer [role=button] {\n margin-bottom: 0;\n}\ndialog article > footer [role=button]:not(:first-of-type) {\n margin-left: calc(var(--spacing) * 0.5);\n}\ndialog article p:last-of-type {\n margin: 0;\n}\ndialog:not([open]), dialog[open=false] {\n display: none;\n}\n\n/**\n * Nav\n */\n:where(nav li)::before {\n float: left;\n content: \"​\";\n}\n\nnav,\nnav ul {\n display: flex;\n}\n\nnav {\n justify-content: space-between;\n}\nnav ol,\nnav ul {\n align-items: center;\n margin-bottom: 0;\n padding: 0;\n list-style: none;\n}\nnav ol:first-of-type,\nnav ul:first-of-type {\n margin-left: calc(var(--nav-element-spacing-horizontal) * -1);\n}\nnav ol:last-of-type,\nnav ul:last-of-type {\n margin-right: calc(var(--nav-element-spacing-horizontal) * -1);\n}\nnav li {\n display: inline-block;\n margin: 0;\n padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);\n}\nnav li > * {\n --spacing: 0;\n}\nnav :where(a, [role=link]) {\n display: inline-block;\n margin: calc(var(--nav-link-spacing-vertical) * -1) calc(var(--nav-link-spacing-horizontal) * -1);\n padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);\n border-radius: var(--border-radius);\n text-decoration: none;\n}\nnav :where(a, [role=link]):is([aria-current], :hover, :active, :focus) {\n text-decoration: none;\n}\nnav[aria-label=breadcrumb] {\n align-items: center;\n justify-content: start;\n}\nnav[aria-label=breadcrumb] ul li:not(:first-child) {\n margin-inline-start: var(--nav-link-spacing-horizontal);\n}\nnav[aria-label=breadcrumb] ul li:not(:last-child) ::after {\n position: absolute;\n width: calc(var(--nav-link-spacing-horizontal) * 2);\n margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2);\n content: \"/\";\n color: var(--muted-color);\n text-align: center;\n}\nnav[aria-label=breadcrumb] a[aria-current] {\n background-color: transparent;\n color: inherit;\n text-decoration: none;\n pointer-events: none;\n}\nnav [role=button] {\n margin-right: inherit;\n margin-left: inherit;\n padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal);\n}\n\naside nav,\naside ol,\naside ul,\naside li {\n display: block;\n}\naside li {\n padding: calc(var(--nav-element-spacing-vertical) * 0.5) var(--nav-element-spacing-horizontal);\n}\naside li a {\n display: block;\n}\naside li [role=button] {\n margin: inherit;\n}\n\n[dir=rtl] nav[aria-label=breadcrumb] ul li:not(:last-child) ::after {\n content: \"\\\\\";\n}\n\n/**\n * Progress\n */\nprogress {\n display: inline-block;\n vertical-align: baseline;\n}\n\nprogress {\n -webkit-appearance: none;\n -moz-appearance: none;\n display: inline-block;\n appearance: none;\n width: 100%;\n height: 0.5rem;\n margin-bottom: calc(var(--spacing) * 0.5);\n overflow: hidden;\n border: 0;\n border-radius: var(--border-radius);\n background-color: var(--progress-background-color);\n color: var(--progress-color);\n}\nprogress::-webkit-progress-bar {\n border-radius: var(--border-radius);\n background: none;\n}\nprogress[value]::-webkit-progress-value {\n background-color: var(--progress-color);\n}\nprogress::-moz-progress-bar {\n background-color: var(--progress-color);\n}\n@media (prefers-reduced-motion: no-preference) {\n progress:indeterminate {\n background: var(--progress-background-color) linear-gradient(to right, var(--progress-color) 30%, var(--progress-background-color) 30%) top left/150% 150% no-repeat;\n animation: progress-indeterminate 1s linear infinite;\n }\n progress:indeterminate[value]::-webkit-progress-value {\n background-color: transparent;\n }\n progress:indeterminate::-moz-progress-bar {\n background-color: transparent;\n }\n}\n\n@media (prefers-reduced-motion: no-preference) {\n [dir=rtl] progress:indeterminate {\n animation-direction: reverse;\n }\n}\n\n@keyframes progress-indeterminate {\n 0% {\n background-position: 200% 0;\n }\n 100% {\n background-position: -200% 0;\n }\n}\n/**\n * Tooltip ([data-tooltip])\n */\n[data-tooltip] {\n position: relative;\n}\n[data-tooltip]:not(a, button, input) {\n border-bottom: 1px dotted;\n text-decoration: none;\n cursor: help;\n}\n[data-tooltip][data-placement=top]::before, [data-tooltip][data-placement=top]::after, [data-tooltip]::before, [data-tooltip]::after {\n display: block;\n z-index: 99;\n position: absolute;\n bottom: 100%;\n left: 50%;\n padding: 0.25rem 0.5rem;\n overflow: hidden;\n transform: translate(-50%, -0.25rem);\n border-radius: var(--border-radius);\n background: var(--tooltip-background-color);\n content: attr(data-tooltip);\n color: var(--tooltip-color);\n font-style: normal;\n font-weight: var(--font-weight);\n font-size: 0.875rem;\n text-decoration: none;\n text-overflow: ellipsis;\n white-space: nowrap;\n opacity: 0;\n pointer-events: none;\n}\n[data-tooltip][data-placement=top]::after, [data-tooltip]::after {\n padding: 0;\n transform: translate(-50%, 0rem);\n border-top: 0.3rem solid;\n border-right: 0.3rem solid transparent;\n border-left: 0.3rem solid transparent;\n border-radius: 0;\n background-color: transparent;\n content: \"\";\n color: var(--tooltip-background-color);\n}\n[data-tooltip][data-placement=bottom]::before, [data-tooltip][data-placement=bottom]::after {\n top: 100%;\n bottom: auto;\n transform: translate(-50%, 0.25rem);\n}\n[data-tooltip][data-placement=bottom]:after {\n transform: translate(-50%, -0.3rem);\n border: 0.3rem solid transparent;\n border-bottom: 0.3rem solid;\n}\n[data-tooltip][data-placement=left]::before, [data-tooltip][data-placement=left]::after {\n top: 50%;\n right: 100%;\n bottom: auto;\n left: auto;\n transform: translate(-0.25rem, -50%);\n}\n[data-tooltip][data-placement=left]:after {\n transform: translate(0.3rem, -50%);\n border: 0.3rem solid transparent;\n border-left: 0.3rem solid;\n}\n[data-tooltip][data-placement=right]::before, [data-tooltip][data-placement=right]::after {\n top: 50%;\n right: auto;\n bottom: auto;\n left: 100%;\n transform: translate(0.25rem, -50%);\n}\n[data-tooltip][data-placement=right]:after {\n transform: translate(-0.3rem, -50%);\n border: 0.3rem solid transparent;\n border-right: 0.3rem solid;\n}\n[data-tooltip]:focus::before, [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {\n opacity: 1;\n}\n@media (hover: hover) and (pointer: fine) {\n [data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::before, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {\n animation-duration: 0.2s;\n animation-name: tooltip-slide-top;\n }\n [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::after {\n animation-name: tooltip-caret-slide-top;\n }\n [data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::before, [data-tooltip][data-placement=bottom]:hover::after {\n animation-duration: 0.2s;\n animation-name: tooltip-slide-bottom;\n }\n [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover::after {\n animation-name: tooltip-caret-slide-bottom;\n }\n [data-tooltip][data-placement=left]:focus::before, [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::before, [data-tooltip][data-placement=left]:hover::after {\n animation-duration: 0.2s;\n animation-name: tooltip-slide-left;\n }\n [data-tooltip][data-placement=left]:focus::after, [data-tooltip][data-placement=left]:hover::after {\n animation-name: tooltip-caret-slide-left;\n }\n [data-tooltip][data-placement=right]:focus::before, [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::before, [data-tooltip][data-placement=right]:hover::after {\n animation-duration: 0.2s;\n animation-name: tooltip-slide-right;\n }\n [data-tooltip][data-placement=right]:focus::after, [data-tooltip][data-placement=right]:hover::after {\n animation-name: tooltip-caret-slide-right;\n }\n}\n@keyframes tooltip-slide-top {\n from {\n transform: translate(-50%, 0.75rem);\n opacity: 0;\n }\n to {\n transform: translate(-50%, -0.25rem);\n opacity: 1;\n }\n}\n@keyframes tooltip-caret-slide-top {\n from {\n opacity: 0;\n }\n 50% {\n transform: translate(-50%, -0.25rem);\n opacity: 0;\n }\n to {\n transform: translate(-50%, 0rem);\n opacity: 1;\n }\n}\n@keyframes tooltip-slide-bottom {\n from {\n transform: translate(-50%, -0.75rem);\n opacity: 0;\n }\n to {\n transform: translate(-50%, 0.25rem);\n opacity: 1;\n }\n}\n@keyframes tooltip-caret-slide-bottom {\n from {\n opacity: 0;\n }\n 50% {\n transform: translate(-50%, -0.5rem);\n opacity: 0;\n }\n to {\n transform: translate(-50%, -0.3rem);\n opacity: 1;\n }\n}\n@keyframes tooltip-slide-left {\n from {\n transform: translate(0.75rem, -50%);\n opacity: 0;\n }\n to {\n transform: translate(-0.25rem, -50%);\n opacity: 1;\n }\n}\n@keyframes tooltip-caret-slide-left {\n from {\n opacity: 0;\n }\n 50% {\n transform: translate(0.05rem, -50%);\n opacity: 0;\n }\n to {\n transform: translate(0.3rem, -50%);\n opacity: 1;\n }\n}\n@keyframes tooltip-slide-right {\n from {\n transform: translate(-0.75rem, -50%);\n opacity: 0;\n }\n to {\n transform: translate(0.25rem, -50%);\n opacity: 1;\n }\n}\n@keyframes tooltip-caret-slide-right {\n from {\n opacity: 0;\n }\n 50% {\n transform: translate(-0.05rem, -50%);\n opacity: 0;\n }\n to {\n transform: translate(-0.3rem, -50%);\n opacity: 1;\n }\n}\n\n/**\n * Accessibility & User interaction\n */\n[aria-controls] {\n cursor: pointer;\n}\n\n[aria-disabled=true],\n[disabled] {\n cursor: not-allowed;\n}\n\n[aria-hidden=false][hidden] {\n display: initial;\n}\n\n[aria-hidden=false][hidden]:not(:focus) {\n clip: rect(0, 0, 0, 0);\n position: absolute;\n}\n\na,\narea,\nbutton,\ninput,\nlabel,\nselect,\nsummary,\ntextarea,\n[tabindex] {\n -ms-touch-action: manipulation;\n}\n\n[dir=rtl] {\n direction: rtl;\n}\n\n/**\n* Reduce Motion Features\n*/\n@media (prefers-reduced-motion: reduce) {\n *:not([aria-busy=true]),\n:not([aria-busy=true])::before,\n:not([aria-busy=true])::after {\n background-attachment: initial !important;\n animation-duration: 1ms !important;\n animation-delay: -1ms !important;\n animation-iteration-count: 1 !important;\n scroll-behavior: auto !important;\n transition-delay: 0s !important;\n transition-duration: 0s !important;\n }\n}\n\n/*# sourceMappingURL=pico.classless.css.map */\n","/*!\n * Pico.css v2.0.0-alpha1 (https://picocss.com)\n * Copyright 2019-2022 - Licensed under MIT\n */\n","@use \"sass:map\";\n@use \"../../settings\";\n\n// Commons Styles:\n:root {\n // Typography\n --font-family: system-ui, -apple-system, \"Segoe UI\", \"Roboto\", \"Ubuntu\", \"Cantarell\", \"Noto Sans\",\n sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n --line-height: 1.5;\n --font-weight: 400;\n --font-size: 16px;\n\n // Responsive typography\n @if settings.$enable-responsive-typography {\n @if map-get(settings.$breakpoints, \"sm\") {\n @media (min-width: map-get(settings.$breakpoints, \"sm\")) {\n --font-size: 17px;\n }\n }\n\n @if map-get(settings.$breakpoints, \"md\") {\n @media (min-width: map-get(settings.$breakpoints, \"md\")) {\n --font-size: 18px;\n }\n }\n\n @if map-get(settings.$breakpoints, \"lg\") {\n @media (min-width: map-get(settings.$breakpoints, \"lg\")) {\n --font-size: 19px;\n }\n }\n\n @if map-get(settings.$breakpoints, \"xl\") {\n @media (min-width: map-get(settings.$breakpoints, \"xl\")) {\n --font-size: 20px;\n }\n }\n }\n\n // Borders\n --border-radius: 0.25rem;\n --border-width: 1px;\n --outline-width: 3px;\n\n // Spacings\n --spacing: 1rem;\n\n // Spacings for typography elements\n --typography-spacing-vertical: 1.5rem;\n\n // Spacings for body > header, body > main, body > footer, section, article\n --block-spacing-vertical: calc(var(--spacing) * 2);\n --block-spacing-horizontal: var(--spacing);\n\n @if (settings.$enable-classes and settings.$enable-grid) {\n --grid-spacing-vertical: 0;\n --grid-spacing-horizontal: var(--spacing);\n }\n\n // Spacings for form elements and button\n --form-element-spacing-vertical: 0.75rem;\n --form-element-spacing-horizontal: 1rem;\n\n // Spacings for nav component\n --nav-element-spacing-vertical: 1rem;\n --nav-element-spacing-horizontal: 0.5rem;\n --nav-link-spacing-vertical: 0.5rem;\n --nav-link-spacing-horizontal: 0.5rem;\n\n // Font weight for form labels & fieldsets legend\n --form-label-font-weight: var(--font-weight);\n\n // Transitions\n --transition: 0.2s ease-in-out;\n\n // Modal ()\n --modal-overlay-backdrop-filter: blur(0.25rem);\n}\n\n// Responsives spacings\n@if settings.$enable-responsive-spacings {\n // Sectioning\n #{settings.$semantic-root-element} > header,\n #{settings.$semantic-root-element} > main,\n #{settings.$semantic-root-element} > footer,\n section {\n @if map-get(settings.$breakpoints, \"sm\") {\n @media (min-width: map-get(settings.$breakpoints, \"sm\")) {\n --block-spacing-vertical: calc(var(--spacing) * 2.5);\n }\n }\n\n @if map-get(settings.$breakpoints, \"md\") {\n @media (min-width: map-get(settings.$breakpoints, \"md\")) {\n --block-spacing-vertical: calc(var(--spacing) * 3);\n }\n }\n\n @if map-get(settings.$breakpoints, \"lg\") {\n @media (min-width: map-get(settings.$breakpoints, \"lg\")) {\n --block-spacing-vertical: calc(var(--spacing) * 3.5);\n }\n }\n\n @if map-get(settings.$breakpoints, \"xl\") {\n @media (min-width: map-get(settings.$breakpoints, \"xl\")) {\n --block-spacing-vertical: calc(var(--spacing) * 4);\n }\n }\n }\n\n // Card (
)\n article {\n @if map-get(settings.$breakpoints, \"sm\") {\n @media (min-width: map-get(settings.$breakpoints, \"sm\")) {\n --block-spacing-horizontal: calc(var(--spacing) * 1.25);\n }\n }\n\n @if map-get(settings.$breakpoints, \"md\") {\n @media (min-width: map-get(settings.$breakpoints, \"md\")) {\n --block-spacing-horizontal: calc(var(--spacing) * 1.5);\n }\n }\n\n @if map-get(settings.$breakpoints, \"lg\") {\n @media (min-width: map-get(settings.$breakpoints, \"lg\")) {\n --block-spacing-horizontal: calc(var(--spacing) * 1.75);\n }\n }\n\n @if map-get(settings.$breakpoints, \"xl\") {\n @media (min-width: map-get(settings.$breakpoints, \"xl\")) {\n --block-spacing-horizontal: calc(var(--spacing) * 2);\n }\n }\n }\n\n // Modal\n dialog > article {\n --block-spacing-vertical: calc(var(--spacing) * 2);\n --block-spacing-horizontal: var(--spacing);\n\n @if map-get(settings.$breakpoints, \"sm\") {\n @media (min-width: map-get(settings.$breakpoints, \"sm\")) {\n --block-spacing-vertical: calc(var(--spacing) * 2.5);\n --block-spacing-horizontal: calc(var(--spacing) * 1.25);\n }\n }\n\n @if map-get(settings.$breakpoints, \"md\") {\n @media (min-width: map-get(settings.$breakpoints, \"md\")) {\n --block-spacing-vertical: calc(var(--spacing) * 3);\n --block-spacing-horizontal: calc(var(--spacing) * 1.5);\n }\n }\n }\n}\n\n// Link\na {\n --text-decoration: none;\n\n // Secondary & Contrast\n @if settings.$enable-classes {\n &.secondary,\n &.contrast {\n --text-decoration: underline;\n }\n }\n}\n\n// Small\nsmall {\n --font-size: 0.875em;\n}\n\n// Headings\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n --font-weight: 700;\n}\n\nh1 {\n --font-size: 2rem;\n --typography-spacing-vertical: 3rem;\n}\n\nh2 {\n --font-size: 1.75rem;\n --typography-spacing-vertical: 2.625rem;\n}\n\nh3 {\n --font-size: 1.5rem;\n --typography-spacing-vertical: 2.25rem;\n}\n\nh4 {\n --font-size: 1.25rem;\n --typography-spacing-vertical: 1.874rem;\n}\n\nh5 {\n --font-size: 1.125rem;\n --typography-spacing-vertical: 1.6875rem;\n}\n\n// Forms elements\n[type=\"checkbox\"],\n[type=\"radio\"] {\n --border-width: 2px;\n}\n\n[type=\"checkbox\"][role=\"switch\"] {\n --border-width: 3px;\n}\n\n// Table\nthead,\ntfoot {\n th,\n td {\n --border-width: 3px;\n }\n}\n\n:not(thead, tfoot) > * > td {\n --font-size: 0.875em;\n}\n\n// Code\npre,\ncode,\nkbd,\nsamp {\n --font-family: \"Menlo\", \"Consolas\", \"Roboto Mono\", \"Ubuntu Monospace\", \"Noto Mono\", \"Oxygen Mono\",\n \"Liberation Mono\", monospace, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n \"Noto Color Emoji\";\n}\n\nkbd {\n --font-weight: bolder;\n}\n","@use \"../settings\";\n@use \"default/light\" as *;\n@use \"default/dark\" as *;\n\n// Commons styles\n@use \"default/styles\";\n\n// Light theme (Default)\n// Can be forced with data-theme=\"light\"\n[data-theme=\"light\"],\n:root:not([data-theme=\"dark\"]) {\n @include light;\n}\n\n// Dark theme (Auto)\n// Automatically enabled if user has Dark mode enabled\n@media only screen and (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) {\n @include dark;\n }\n}\n\n// Dark theme (Forced)\n// Enabled if forced with data-theme=\"dark\"\n[data-theme=\"dark\"] {\n @include dark;\n}\n\nprogress,\n[type=\"checkbox\"],\n[type=\"radio\"],\n[type=\"range\"] {\n accent-color: var(--primary);\n}\n","@use \"colors\" as *;\n@use \"../../utils/functions\";\n\n// Default: Light theme\n@mixin light {\n --background-color: #{$white};\n\n // Texts colors\n --color: #{$grey-700};\n --h1-color: #{$grey-900};\n --h2-color: #{mix($grey-900, $grey-800)};\n --h3-color: #{$grey-800};\n --h4-color: #{mix($grey-800, $grey-700)};\n --h5-color: #{$grey-700};\n --h6-color: #{mix($grey-700, $grey-600)};\n\n // Muted colors\n --muted-color: #{$grey-500};\n --muted-border-color: #{$grey-50};\n\n // Primary colors\n --primary: #{$primary-600};\n --primary-hover: #{$primary-700};\n --primary-focus: #{rgba($primary-600, 0.125)};\n --primary-inverse: #{$white};\n\n // Secondary colors\n --secondary: #{$grey-600};\n --secondary-hover: #{$grey-700};\n --secondary-focus: #{rgba($grey-600, 0.125)};\n --secondary-inverse: #{$white};\n\n // Contrast colors\n --contrast: #{$grey-900};\n --contrast-hover: #{$black};\n --contrast-focus: #{rgba($grey-600, 0.125)};\n --contrast-inverse: #{$white};\n\n // Highlighted text ()\n --mark-background-color: #{mix($amber-100, $amber-50)};\n --mark-color: #{mix($grey-900, $amber-900, 75%)};\n\n // Inserted () & Deleted ()\n --ins-color: #{$green-700};\n --del-color: #{$red-800};\n\n // Blockquote\n --blockquote-border-color: var(--muted-border-color);\n --blockquote-footer-color: var(--muted-color);\n\n // Button\n // To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'\n // Don't use, 'none, 'false, 'null', '0', etc.\n --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);\n --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);\n\n // Form elements\n --form-element-background-color: transparent;\n --form-element-border-color: #{$grey-300};\n --form-element-color: var(--color);\n --form-element-placeholder-color: var(--muted-color);\n --form-element-active-background-color: transparent;\n --form-element-active-border-color: var(--primary);\n --form-element-focus-color: var(--primary-focus);\n --form-element-disabled-background-color: #{$grey-100};\n --form-element-disabled-border-color: #{$grey-300};\n --form-element-disabled-opacity: 0.5;\n --form-element-invalid-border-color: #{$red-800};\n --form-element-invalid-active-border-color: #{$red-700};\n --form-element-invalid-focus-color: #{rgba($red-700, 0.125)};\n --form-element-valid-border-color: #{$green-700};\n --form-element-valid-active-border-color: #{$green-600};\n --form-element-valid-focus-color: #{rgba($green-600, 0.125)};\n\n // Switch (input[type=\"checkbox\"][role=\"switch\"])\n --switch-background-color: #{$grey-200};\n --switch-color: var(--primary-inverse);\n --switch-checked-background-color: var(--primary);\n\n // Range (input[type=\"range\"])\n --range-border-color: #{$grey-100};\n --range-active-border-color: #{$grey-200};\n --range-thumb-border-color: var(--background-color);\n --range-thumb-color: var(--secondary);\n --range-thumb-hover-color: var(--secondary-hover);\n --range-thumb-active-color: var(--primary);\n\n // Table\n --table-border-color: var(--muted-border-color);\n --table-row-stripped-background-color: #{mix($grey-50, $white)};\n\n // Code\n --code-background-color: #{$grey-50};\n --code-color: var(--muted-color);\n --code-kbd-background-color: var(--contrast);\n --code-kbd-color: var(--contrast-inverse);\n --code-tag-color: #{hsl(330, 40%, 50%)};\n --code-property-color: #{hsl(185, 40%, 40%)};\n --code-value-color: #{hsl(40, 20%, 50%)};\n --code-comment-color: #{$grey-300};\n\n // Accordion (
)\n --accordion-border-color: var(--muted-border-color);\n --accordion-close-summary-color: var(--color);\n --accordion-open-summary-color: var(--muted-color);\n\n // Card (
)\n $box-shadow-elevation: 1rem;\n $box-shadow-blur-strengh: 6rem;\n $box-shadow-opacity: 0.06;\n --card-background-color: var(--background-color);\n --card-border-color: var(--muted-border-color);\n --card-box-shadow: #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{(\n $box-shadow-blur-strengh * 0.029\n )} #{rgba($grey-900, ($box-shadow-opacity * 0.283))},\n #{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{(\n $box-shadow-blur-strengh * 0.067\n )} #{rgba($grey-900, ($box-shadow-opacity * 0.4))},\n #{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{(\n $box-shadow-blur-strengh * 0.125\n )} #{rgba($grey-900, ($box-shadow-opacity * 0.5))},\n #{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{(\n $box-shadow-blur-strengh * 0.225\n )} #{rgba($grey-900, ($box-shadow-opacity * 0.6))},\n #{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{(\n $box-shadow-blur-strengh * 0.417\n )} #{rgba($grey-900, ($box-shadow-opacity * 0.717))},\n #{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba(\n $grey-900,\n $box-shadow-opacity\n )},\n 0 0 0 0.0625rem #{rgba($grey-900, ($box-shadow-opacity * 0.25))};\n --card-sectionning-background-color: #{mix($grey-50, $white, 25%)};\n\n // Dropdown (
)\n --dropdown-background-color: #{mix($grey-50, $white, 25%)};\n --dropdown-border-color: #{mix($grey-100, $grey-50)};\n --dropdown-box-shadow: var(--card-box-shadow);\n --dropdown-color: var(--color);\n --dropdown-hover-background-color: #{$grey-50};\n\n // Modal ()\n --modal-overlay-background-color: #{rgba($grey-100, 0.7)};\n\n // Progress\n --progress-background-color: #{$grey-100};\n --progress-color: var(--primary);\n\n // Loading ([aria-busy=true])\n --loading-spinner-opacity: 0.5;\n\n // Tooltip ([data-tooltip])\n --tooltip-background-color: var(--contrast);\n --tooltip-color: var(--contrast-inverse);\n\n // Icons\n --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='#{functions.display-rgb($white)}' 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\");\n --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='#{functions.display-rgb($grey-700)}' 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\");\n --icon-chevron-button: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' 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\");\n --icon-chevron-button-inverse: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' 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\");\n --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='#{functions.display-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E\");\n --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='#{functions.display-rgb($grey-700)}' 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\");\n --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='#{functions.display-rgb($red-800)}' 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\");\n --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='#{functions.display-rgb($white)}' 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\");\n --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='#{functions.display-rgb($grey-700)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E\");\n --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='#{functions.display-rgb($grey-700)}' 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\");\n --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='#{functions.display-rgb($green-700)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n\n // Document\n color-scheme: light;\n}\n","@use \"colors\" as *;\n@use \"../../utils/functions\";\n\n// Default: Dark theme\n@mixin dark {\n --background-color: #{mix($black, $grey-900, 37.5%)};\n\n // Texts colors\n --color: #{$grey-200};\n --h1-color: #{$grey-50};\n --h2-color: #{mix($grey-100, $grey-50)};\n --h3-color: #{$grey-100};\n --h4-color: #{mix($grey-200, $grey-100)};\n --h5-color: #{$grey-200};\n --h6-color: #{mix($grey-300, $grey-200)};\n\n // Muted colors\n --muted-color: #{$grey-500};\n --muted-border-color: #{mix($grey-900, $grey-800, 75%)};\n\n // Primary colors\n --primary: #{$primary-600};\n --primary-hover: #{$primary-500};\n --primary-focus: #{rgba($primary-600, 0.25)};\n --primary-inverse: #{$white};\n\n // Secondary colors\n --secondary: #{$grey-600};\n --secondary-hover: #{$grey-500};\n --secondary-focus: #{rgba($grey-500, 0.25)};\n --secondary-inverse: #{$white};\n\n // Contrast colors\n --contrast: #{$grey-50};\n --contrast-hover: #{$white};\n --contrast-focus: #{rgba($grey-500, 0.25)};\n --contrast-inverse: #{$black};\n\n // Highlighted text ()\n --mark-background-color: #{mix($grey-300, $amber-300)};\n --mark-color: #{mix($black, $grey-900, 37.5%)};\n\n // Inserted () & Deleted ()\n --ins-color: #{$green-700};\n --del-color: #{$red-800};\n\n // Blockquote\n --blockquote-border-color: var(--muted-border-color);\n --blockquote-footer-color: var(--muted-color);\n\n // Button\n // To disable box-shadow, remove the var or set to '0 0 0 rgba(0, 0, 0, 0)'\n // Don't use, 'none, 'false, 'null', '0', etc.\n --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0);\n --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0);\n\n // Form elements\n --form-element-background-color: #{mix($black, $grey-900, 37.5%)};\n --form-element-border-color: #{mix($grey-800, $grey-700)};\n --form-element-color: var(--color);\n --form-element-placeholder-color: var(--muted-color);\n --form-element-active-background-color: var(--form-element-background-color);\n --form-element-active-border-color: var(--primary);\n --form-element-focus-color: var(--primary-focus);\n --form-element-disabled-background-color: #{$grey-800};\n --form-element-disabled-border-color: #{$grey-700};\n --form-element-disabled-opacity: 0.5;\n --form-element-invalid-border-color: #{$red-900};\n --form-element-invalid-active-border-color: #{$red-800};\n --form-element-invalid-focus-color: #{rgba($red-800, 0.25)};\n --form-element-valid-border-color: #{$green-800};\n --form-element-valid-active-border-color: #{$green-700};\n --form-element-valid-focus-color: #{rgba($green-700, 0.25)};\n\n // Switch (input[type=\"checkbox\"][role=\"switch\"])\n --switch-background-color: #{mix($grey-800, $grey-700)};\n --switch-color: var(--primary-inverse);\n --switch-checked-background-color: var(--primary);\n\n // Range (input[type=\"range\"])\n --range-border-color: #{mix($grey-900, $grey-800)};\n --range-active-border-color: #{$grey-800};\n --range-thumb-border-color: var(--background-color);\n --range-thumb-color: var(--secondary);\n --range-thumb-hover-color: var(--secondary-hover);\n --range-thumb-active-color: var(--primary);\n\n // Table\n --table-border-color: var(--muted-border-color);\n --table-row-stripped-background-color: #{rgba($grey-500, 0.05)};\n\n // Code\n --code-background-color: #{mix($black, $grey-900, 12.5%)};\n --code-color: var(--muted-color);\n --code-kbd-background-color: var(--contrast);\n --code-kbd-color: var(--contrast-inverse);\n --code-tag-color: #{hsl(330, 30%, 50%)};\n --code-property-color: #{hsl(185, 30%, 50%)};\n --code-value-color: #{hsl(40, 10%, 50%)};\n --code-comment-color: #{mix($grey-700, $grey-600)};\n\n // Accordion (
)\n --accordion-border-color: var(--muted-border-color);\n --accordion-active-summary-color: var(--primary);\n --accordion-close-summary-color: var(--color);\n --accordion-open-summary-color: var(--muted-color);\n\n // Card (
)\n $box-shadow-elevation: 1rem;\n $box-shadow-blur-strengh: 6rem;\n $box-shadow-opacity: 0.06;\n --card-background-color: #{mix($black, $grey-900, 25%)};\n --card-border-color: var(--card-background-color);\n --card-box-shadow: #{($box-shadow-elevation * 0.5 * 0.029)} #{($box-shadow-elevation * 0.029)} #{(\n $box-shadow-blur-strengh * 0.029\n )} #{rgba($black, ($box-shadow-opacity * 0.283))},\n #{($box-shadow-elevation * 0.5 * 0.067)} #{($box-shadow-elevation * 0.067)} #{(\n $box-shadow-blur-strengh * 0.067\n )} #{rgba($black, ($box-shadow-opacity * 0.4))},\n #{($box-shadow-elevation * 0.5 * 0.125)} #{($box-shadow-elevation * 0.125)} #{(\n $box-shadow-blur-strengh * 0.125\n )} #{rgba($black, ($box-shadow-opacity * 0.5))},\n #{($box-shadow-elevation * 0.5 * 0.225)} #{($box-shadow-elevation * 0.225)} #{(\n $box-shadow-blur-strengh * 0.225\n )} #{rgba($black, ($box-shadow-opacity * 0.6))},\n #{($box-shadow-elevation * 0.5 * 0.417)} #{($box-shadow-elevation * 0.417)} #{(\n $box-shadow-blur-strengh * 0.417\n )} #{rgba($black, ($box-shadow-opacity * 0.717))},\n #{($box-shadow-elevation * 0.5)} #{$box-shadow-elevation} #{$box-shadow-blur-strengh} #{rgba(\n $black,\n $box-shadow-opacity\n )},\n 0 0 0 0.0625rem #{rgba($black, ($box-shadow-opacity * 0.25))};\n --card-sectionning-background-color: #{mix($black, $grey-900, 12.5%)};\n\n // Dropdown (
)\n --dropdown-background-color: #{$grey-900};\n --dropdown-border-color: #{mix($grey-900, $grey-800)};\n --dropdown-box-shadow: var(--card-box-shadow);\n --dropdown-color: var(--color);\n --dropdown-hover-background-color: #{rgba(mix($grey-900, $grey-800), 0.75)};\n\n // Modal ()\n --modal-overlay-background-color: #{rgba(mix($grey-900, $grey-800), 0.8)};\n\n // Progress\n --progress-background-color: #{mix($grey-900, $grey-800)};\n --progress-color: var(--primary);\n\n // Loading ([aria-busy=true])\n --loading-spinner-opacity: 0.5;\n\n // Tooltip ([data-tooltip])\n --tooltip-background-color: var(--contrast);\n --tooltip-color: var(--contrast-inverse);\n\n // Icons\n --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='#{functions.display-rgb($white)}' 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\");\n --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='#{functions.display-rgb($grey-300)}' 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\");\n --icon-chevron-button: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($white)}' 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\");\n --icon-chevron-button-inverse: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#{functions.display-rgb($black)}' 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\");\n --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='#{functions.display-rgb($grey-500)}' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E\");\n --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='#{functions.display-rgb($grey-300)}' 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\");\n --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='#{functions.display-rgb($red-900)}' 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\");\n --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='#{functions.display-rgb($white)}' 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\");\n --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='#{functions.display-rgb($grey-300)}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E\");\n --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='#{functions.display-rgb($grey-300)}' 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\");\n --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='#{functions.display-rgb($green-800)}' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E\");\n\n // Document\n color-scheme: dark;\n}\n","/**\n * Document\n * Content-box & Responsive typography\n */\n\n// Reboot based on :\n// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css\n// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css\n// ––––––––––––––––––––\n\n// 1. Add border box sizing in all browsers (opinionated)\n// 2. Backgrounds do not repeat by default (opinionated)\n*,\n*::before,\n*::after {\n box-sizing: border-box; // 1\n background-repeat: no-repeat; // 2\n}\n\n// 1. Add text decoration inheritance in all browsers (opinionated)\n// 2. Add vertical alignment inheritance in all browsers (opinionated)\n::before,\n::after {\n text-decoration: inherit; // 1\n vertical-align: inherit; // 2\n}\n\n// 1. Use the default cursor in all browsers (opinionated)\n// 2. Change the line height in all browsers (opinionated)\n// 3. Breaks words to prevent overflow in all browsers (opinionated)\n// 4. Use a 4-space tab width in all browsers (opinionated)\n// 5. Remove the grey highlight on links in iOS (opinionated)\n// 6. Prevent adjustments of font size after orientation changes in iOS\n:where(:root) {\n -webkit-tap-highlight-color: transparent; // 5\n -webkit-text-size-adjust: 100%; // 6\n text-size-adjust: 100%; // 6\n background-color: var(--background-color);\n color: var(--color);\n font-weight: var(--font-weight);\n font-size: var(--font-size);\n line-height: var(--line-height); // 2\n font-family: var(--font-family);\n text-rendering: optimizeLegibility;\n overflow-wrap: break-word; // 3\n cursor: default; // 1\n tab-size: 4; // 4\n}\n","@use \"../settings\";\n\n/**\n * Sectioning\n * Container and responsive spacings for header, main, footer\n */\n\n// Reboot based on :\n// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css\n// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css\n// ––––––––––––––––––––\n\n// Render the `main` element consistently in IE\nmain {\n display: block;\n}\n\n// Pico\n// ––––––––––––––––––––\n\n// 1. Remove the margin in all browsers (opinionated)\n#{settings.$semantic-root-element} {\n width: 100%;\n margin: 0; // 1\n\n > header,\n > main,\n > footer {\n width: 100%;\n margin-right: auto;\n margin-left: auto;\n\n // Semantic container\n @if settings.$enable-semantic-container {\n padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);\n\n // Centered viewport\n @if settings.$enable-viewport {\n @if map-get(settings.$breakpoints, \"sm\") and settings.$enable-viewport {\n @media (min-width: map-get(settings.$breakpoints, \"sm\")) {\n max-width: map-get(settings.$viewports, \"sm\");\n padding-right: 0;\n padding-left: 0;\n }\n }\n\n @if map-get(settings.$breakpoints, \"md\") and settings.$enable-viewport {\n @media (min-width: map-get(settings.$breakpoints, \"md\")) {\n max-width: map-get(settings.$viewports, \"md\");\n }\n }\n\n @if map-get(settings.$breakpoints, \"lg\") and settings.$enable-viewport {\n @media (min-width: map-get(settings.$breakpoints, \"lg\")) {\n max-width: map-get(settings.$viewports, \"lg\");\n }\n }\n\n @if map-get(settings.$breakpoints, \"xl\") and settings.$enable-viewport {\n @media (min-width: map-get(settings.$breakpoints, \"xl\")) {\n max-width: map-get(settings.$viewports, \"xl\");\n }\n }\n }\n }\n\n // Semantic container\n @else {\n padding: var(--block-spacing-vertical) 0;\n }\n }\n}\n","/**\n * Section\n * Responsive spacings for section\n */\n\nsection {\n margin-bottom: var(--block-spacing-vertical);\n}\n","/**\n * Horizontal scroller (
)\n */\n\n// Wrapper to make any content responsive across all viewports\nfigure {\n display: block;\n margin: 0;\n padding: 0;\n overflow-x: auto;\n\n figcaption {\n padding: calc(var(--spacing) * 0.5) 0;\n color: var(--muted-color);\n }\n}\n","@use \"../settings\";\n\n/**\n * Typography\n */\n\n// Reboot based on :\n// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css\n// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css\n// ––––––––––––––––––––\n\n// Add the correct font weight in Chrome, Edge, and Safari\nb,\nstrong {\n font-weight: bolder;\n}\n\n// Prevent `sub` and `sup` elements from affecting the line height in all browsers\nsub,\nsup {\n position: relative;\n font-size: 0.75em;\n line-height: 0;\n vertical-align: baseline;\n}\nsub {\n bottom: -0.25em;\n}\nsup {\n top: -0.5em;\n}\n\n// Pico\n// ––––––––––––––––––––\n\naddress,\nblockquote,\ndl,\nfigure,\nform,\nol,\np,\npre,\ntable,\nul {\n margin-top: 0;\n margin-bottom: var(--typography-spacing-vertical);\n color: var(--color);\n font-style: normal;\n font-weight: var(--font-weight);\n font-size: var(--font-size);\n}\n\n// Links\n// 1. Remove the gray background on active links in IE 10\na,\n[role=\"link\"] {\n --color: var(--primary);\n --background-color: transparent;\n outline: none;\n background-color: var(--background-color); // 1\n color: var(--color);\n text-decoration: var(--text-decoration);\n\n @if settings.$enable-transitions {\n transition: background-color var(--transition), color var(--transition),\n text-decoration var(--transition), box-shadow var(--transition);\n }\n\n &:is([aria-current], :hover, :active, :focus) {\n --color: var(--primary-hover);\n --text-decoration: underline;\n }\n\n &:focus {\n --background-color: var(--primary-focus);\n }\n\n @if settings.$enable-classes {\n // Secondary\n &.secondary {\n --color: var(--secondary);\n\n &:is([aria-current], :hover, :active, :focus) {\n --color: var(--secondary-hover);\n }\n\n &:focus {\n --background-color: var(--secondary-focus);\n }\n }\n\n // Contrast\n &.contrast {\n --color: var(--contrast);\n\n &:is([aria-current], :hover, :active, :focus) {\n --color: var(--contrast-hover);\n }\n\n &:focus {\n --background-color: var(--contrast-focus);\n }\n }\n }\n}\n\n// Headings\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n margin-top: 0;\n margin-bottom: var(--typography-spacing-vertical);\n color: var(--color);\n font-weight: var(--font-weight);\n font-size: var(--font-size);\n font-family: var(--font-family);\n}\n\nh1 {\n --color: var(--h1-color);\n}\nh2 {\n --color: var(--h2-color);\n}\nh3 {\n --color: var(--h3-color);\n}\nh4 {\n --color: var(--h4-color);\n}\nh5 {\n --color: var(--h5-color);\n}\nh6 {\n --color: var(--h6-color);\n}\n\n// Margin-top for headings after a typography block\n:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) {\n ~ :is(h1, h2, h3, h4, h5, h6) {\n margin-top: var(--typography-spacing-vertical);\n }\n}\n\n// Heading group\n@if settings.$enable-classes == false {\n hgroup {\n margin-bottom: var(--typography-spacing-vertical);\n\n > * {\n margin-bottom: 0;\n }\n\n > *:last-child {\n --color: var(--muted-color);\n --font-weight: unset;\n font-size: 1rem;\n font-family: unset;\n }\n }\n}\n\n@if settings.$enable-classes {\n hgroup,\n .headings {\n margin-bottom: var(--typography-spacing-vertical);\n\n > * {\n margin-bottom: 0;\n }\n\n > *:last-child {\n --color: var(--muted-color);\n --font-weight: unset;\n font-size: 1rem;\n font-family: unset;\n }\n }\n}\n\n// Paragraphs\np {\n margin-bottom: var(--typography-spacing-vertical);\n}\n\n// Small\nsmall {\n font-size: var(--font-size);\n}\n\n// Lists\n:where(dl, ol, ul) {\n padding-right: 0;\n padding-left: var(--spacing);\n padding-inline-start: var(--spacing);\n padding-inline-end: 0;\n\n li {\n margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);\n }\n}\n\n// Margin-top for nested lists\n// 1. Remove the margin on nested lists in Chrome, Edge, IE, and Safari\n:where(dl, ol, ul) {\n :is(dl, ol, ul) {\n margin: 0; // 1\n margin-top: calc(var(--typography-spacing-vertical) * 0.25);\n }\n}\n\nul li {\n list-style: square;\n}\n\n// Highlighted text\nmark {\n padding: 0.125rem 0.25rem;\n background-color: var(--mark-background-color);\n color: var(--mark-color);\n vertical-align: baseline;\n}\n\n// Blockquote\nblockquote {\n display: block;\n margin: var(--typography-spacing-vertical) 0;\n padding: var(--spacing);\n border-right: none;\n border-left: 0.25rem solid var(--blockquote-border-color);\n border-inline-start: 0.25rem solid var(--blockquote-border-color);\n border-inline-end: none;\n\n footer {\n margin-top: calc(var(--typography-spacing-vertical) * 0.5);\n color: var(--blockquote-footer-color);\n }\n}\n\n// Abbreviations\n// 1. Remove underline decoration in Chrome, Edge, IE, Opera, and Safari\nabbr[title] {\n border-bottom: 1px dotted;\n text-decoration: none; // 1\n cursor: help;\n}\n\n// Ins\nins {\n color: var(--ins-color);\n text-decoration: none;\n}\n\n// del\ndel {\n color: var(--del-color);\n}\n\n// selection\n::selection {\n background-color: var(--primary-focus);\n}\n","/**\n * Embedded content\n */\n\n// Reboot based on :\n// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css\n// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css\n// ––––––––––––––––––––\n\n// Change the alignment on media elements in all browsers (opinionated)\n:where(audio, canvas, iframe, img, svg, video) {\n vertical-align: middle;\n}\n\n// Add the correct display in IE 9-\naudio,\nvideo {\n display: inline-block;\n}\n\n// Add the correct display in iOS 4-7\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n// Remove the border on iframes in all browsers (opinionated)\n:where(iframe) {\n border-style: none;\n}\n\n// 1. Remove the border on images inside links in IE 10.\n// 2. Responsive by default\nimg {\n max-width: 100%; // 2\n height: auto; // 2\n border-style: none; // 1\n}\n\n// Change the fill color to match the text color in all browsers (opinionated)\n:where(svg:not([fill])) {\n fill: currentColor;\n}\n\n// Hide the overflow in IE\nsvg:not(:root) {\n overflow: hidden;\n}\n","@use \"../settings\";\n\n/**\n * Button\n */\n\n// Reboot based on :\n// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css\n// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css\n// ––––––––––––––––––––\n\n// 1. Change the font styles in all browsers\n// 2. Remove the margin on controls in Safari\n// 3. Show the overflow in Edge\nbutton {\n margin: 0; // 2\n overflow: visible; // 3\n font-family: inherit; // 1\n text-transform: none; // 1\n}\n\n// Correct the inability to style buttons in iOS and Safari\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n// Pico\n// ––––––––––––––––––––\n\nbutton {\n display: block;\n width: 100%;\n margin-bottom: var(--spacing);\n}\n\n[role=\"button\"] {\n display: inline-block;\n text-decoration: none;\n}\n\nbutton,\ninput[type=\"submit\"],\ninput[type=\"button\"],\ninput[type=\"reset\"],\n[role=\"button\"] {\n --background-color: var(--primary);\n --border-color: var(--primary);\n --color: var(--primary-inverse);\n --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));\n padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);\n border: var(--border-width) solid var(--border-color);\n border-radius: var(--border-radius);\n outline: none;\n background-color: var(--background-color);\n box-shadow: var(--box-shadow);\n color: var(--color);\n font-weight: var(--font-weight);\n font-size: 1rem;\n line-height: var(--line-height);\n text-align: center;\n cursor: pointer;\n\n @if settings.$enable-transitions {\n transition: background-color var(--transition), border-color var(--transition),\n color var(--transition), box-shadow var(--transition);\n }\n\n &:is([aria-current], :hover, :active, :focus) {\n --background-color: var(--primary-hover);\n --border-color: var(--primary-hover);\n --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));\n --color: var(--primary-inverse);\n }\n\n &:focus {\n --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),\n 0 0 0 var(--outline-width) var(--primary-focus);\n }\n}\n\n// .secondary, .contrast & .outline\n@if settings.$enable-classes {\n // Secondary\n :is(button, input[type=\"submit\"], input[type=\"button\"], [role=\"button\"]).secondary,\n input[type=\"reset\"] {\n --background-color: var(--secondary);\n --border-color: var(--secondary);\n --color: var(--secondary-inverse);\n cursor: pointer;\n\n &:is([aria-current], :hover, :active, :focus) {\n --background-color: var(--secondary-hover);\n --border-color: var(--secondary-hover);\n --color: var(--secondary-inverse);\n }\n\n &:focus {\n --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),\n 0 0 0 var(--outline-width) var(--secondary-focus);\n }\n }\n\n // Contrast\n :is(button, input[type=\"submit\"], input[type=\"button\"], [role=\"button\"]).contrast {\n --background-color: var(--contrast);\n --border-color: var(--contrast);\n --color: var(--contrast-inverse);\n\n &:is([aria-current], :hover, :active, :focus) {\n --background-color: var(--contrast-hover);\n --border-color: var(--contrast-hover);\n --color: var(--contrast-inverse);\n }\n\n &:focus {\n --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),\n 0 0 0 var(--outline-width) var(--contrast-focus);\n }\n }\n\n // Outline (primary)\n :is(button, input[type=\"submit\"], input[type=\"button\"], [role=\"button\"]).outline,\n input[type=\"reset\"].outline {\n --background-color: transparent;\n --color: var(--primary);\n\n &:is([aria-current], :hover, :active, :focus) {\n --background-color: transparent;\n --color: var(--primary-hover);\n }\n }\n\n // Outline (secondary)\n :is(button, input[type=\"submit\"], input[type=\"button\"], [role=\"button\"]).outline.secondary,\n input[type=\"reset\"].outline {\n --color: var(--secondary);\n\n &:is([aria-current], :hover, :active, :focus) {\n --color: var(--secondary-hover);\n }\n }\n\n // Outline (contrast)\n :is(button, input[type=\"submit\"], input[type=\"button\"], [role=\"button\"]).outline.contrast {\n --color: var(--contrast);\n\n &:is([aria-current], :hover, :active, :focus) {\n --color: var(--contrast-hover);\n }\n }\n} @else {\n // Secondary button without .class\n input[type=\"reset\"] {\n --background-color: var(--secondary);\n --border-color: var(--secondary);\n --color: var(--secondary-inverse);\n cursor: pointer;\n\n &:is([aria-current], :hover, :active, :focus) {\n --background-color: var(--secondary-hover);\n --border-color: var(--secondary-hover);\n }\n\n &:focus {\n --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)),\n 0 0 0 var(--outline-width) var(--secondary-focus);\n }\n }\n}\n\n// Button [disabled]\n// Links without href are disabled by default\n:where(button, [type=\"submit\"], [type=\"button\"], [type=\"reset\"], [role=\"button\"])[disabled],\n:where(fieldset[disabled])\n :is(button, [type=\"submit\"], [type=\"button\"], [type=\"reset\"], [role=\"button\"]),\na[role=\"button\"]:not([href]) {\n opacity: 0.5;\n pointer-events: none;\n}\n","/**\n * Table\n */\n\n// Reboot based on :\n// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css\n// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css\n// ––––––––––––––––––––\n\n// 1. Collapse border spacing in all browsers (opinionated)\n// 2. Remove text indentation from table contents in Chrome, Edge, and Safari\n:where(table) {\n width: 100%;\n border-collapse: collapse; // 1\n border-spacing: 0;\n text-indent: 0; // 2\n}\n\n// Pico\n// ––––––––––––––––––––\n\n// Cells\nth,\ntd {\n padding: calc(var(--spacing) / 2) var(--spacing);\n border-bottom: var(--border-width) solid var(--table-border-color);\n color: var(--color);\n font-weight: var(--font-weight);\n font-size: var(--font-size);\n text-align: left;\n text-align: start;\n}\n\n// Footer\ntfoot {\n th,\n td {\n border-top: var(--border-width) solid var(--table-border-color);\n border-bottom: 0;\n }\n}\n\n// Striped\ntable {\n &[role=\"grid\"] {\n tbody tr:nth-child(odd) {\n background-color: var(--table-row-stripped-background-color);\n }\n }\n}\n","/**\n * Code\n */\n\n// Reboot based on :\n// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css\n// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css\n// ––––––––––––––––––––\n\n// 1. Correct the inheritance and scaling of font size in all browsers\n// 2. Correct the odd `em` font sizing in all browsers\npre,\ncode,\nkbd,\nsamp {\n font-size: 0.875em; // 2\n font-family: var(--font-family); // 1\n}\n\n// Prevent overflow of the container in all browsers (opinionated)\npre {\n -ms-overflow-style: scrollbar;\n overflow: auto;\n}\n\n// Pico\n// ––––––––––––––––––––\n\npre,\ncode,\nkbd {\n border-radius: var(--border-radius);\n background: var(--code-background-color);\n color: var(--code-color);\n font-weight: var(--font-weight);\n line-height: initial;\n}\n\ncode,\nkbd {\n display: inline-block;\n padding: 0.375rem 0.5rem;\n}\n\npre {\n display: block;\n margin-bottom: var(--spacing);\n overflow-x: auto;\n\n > code {\n display: block;\n padding: var(--spacing);\n background: none;\n font-size: 14px;\n line-height: var(--line-height);\n }\n}\n\n// Code Syntax\ncode {\n // Tags\n b {\n color: var(--code-tag-color);\n font-weight: var(--font-weight);\n }\n\n // Properties\n i {\n color: var(--code-property-color);\n font-style: normal;\n }\n\n // Values\n u {\n color: var(--code-value-color);\n text-decoration: none;\n }\n\n // Comments\n em {\n color: var(--code-comment-color);\n font-style: normal;\n }\n}\n\n// kbd\nkbd {\n background-color: var(--code-kbd-background-color);\n color: var(--code-kbd-color);\n vertical-align: baseline;\n}\n","@use \"../settings\";\n\n/**\n * Miscs\n */\n\n// Reboot based on :\n// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css\n// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css\n// ––––––––––––––––––––\n\n// 1. Correct the inheritance of border color in Firefox\n// 2. Add the correct box sizing in Firefox\nhr {\n height: 0; // 2\n border: 0;\n border-top: 1px solid var(--muted-border-color);\n color: inherit; // 1\n}\n\n// Add the correct display in IE 10+\n[hidden],\ntemplate {\n @if settings.$enable-important {\n display: none !important;\n } @else {\n display: none;\n }\n}\n\n// Add the correct display in IE 9-\ncanvas {\n display: inline-block;\n}\n","@use \"../settings\";\n\n/**\n * Basics form elements\n */\n\n// Reboot based on :\n// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css\n// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css\n// ––––––––––––––––––––\n\n// 1. Change the font styles in all browsers\n// 2. Remove the margin in Firefox and Safari\ninput,\noptgroup,\nselect,\ntextarea {\n margin: 0; // 2\n font-size: 1rem; // 1\n line-height: var(--line-height); // 1\n font-family: inherit; // 1\n letter-spacing: inherit; // 2\n}\n\n// Show the overflow in IE.\ninput {\n overflow: visible;\n}\n\n// Remove the inheritance of text transform in Edge, Firefox, and IE\nselect {\n text-transform: none;\n}\n\n// 1. Correct the text wrapping in Edge and IE\n// 2. Correct the color inheritance from `fieldset` elements in IE\n// 3. Remove the padding so developers are not caught out when they zero out\n// `fieldset` elements in all browsers\nlegend {\n max-width: 100%; // 1\n padding: 0; // 3\n color: inherit; // 2\n white-space: normal; // 1\n}\n\n// 1. Remove the default vertical scrollbar in IE\ntextarea {\n overflow: auto; // 1\n}\n\n// Remove the padding in IE 10\n[type=\"checkbox\"],\n[type=\"radio\"] {\n padding: 0;\n}\n\n// Correct the cursor style of increment and decrement buttons in Safari\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n height: auto;\n}\n\n// 1. Correct the odd appearance in Chrome and Safari\n// 2. Correct the outline style in Safari\n[type=\"search\"] {\n -webkit-appearance: textfield; // 1\n outline-offset: -2px; // 2\n}\n\n// Remove the inner padding in Chrome and Safari on macOS\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n// 1. Correct the inability to style clickable types in iOS and Safari\n// 2. Change font properties to `inherit` in Safari\n::-webkit-file-upload-button {\n -webkit-appearance: button; // 1\n font: inherit; // 2\n}\n\n// Remove the inner border and padding of focus outlines in Firefox\n::-moz-focus-inner {\n padding: 0;\n border-style: none;\n}\n\n// Remove the focus outline in Firefox\n:-moz-focusring {\n outline: none;\n}\n\n// Remove the additional :invalid styles in Firefox\n:-moz-ui-invalid {\n box-shadow: none;\n}\n\n// Change the inconsistent appearance in IE (opinionated)\n::-ms-expand {\n display: none;\n}\n\n// Remove the border and padding in all browsers (opinionated)\n[type=\"file\"],\n[type=\"range\"] {\n padding: 0;\n border-width: 0;\n}\n\n// Pico\n// ––––––––––––––––––––\n\n// Force height for alternatives input types\ninput:not([type=\"checkbox\"], [type=\"radio\"], [type=\"range\"]) {\n height: calc(\n (1rem * var(--line-height)) + (var(--form-element-spacing-vertical) * 2) +\n (var(--border-width) * 2)\n );\n}\n\n// Fieldset\nfieldset {\n margin: 0;\n margin-bottom: var(--spacing);\n padding: 0;\n border: 0;\n}\n\n// Label & legend\nlabel,\nfieldset legend {\n display: block;\n margin-bottom: calc(var(--spacing) * 0.25);\n font-weight: var(--form-label-font-weight, var(--font-weight));\n}\n\n// Blocks, 100%\ninput:not([type=\"checkbox\"], [type=\"radio\"]),\nselect,\ntextarea {\n width: 100%;\n}\n\n// Reset appearance (Not Checkboxes, Radios, Range and File)\ninput:not([type=\"checkbox\"], [type=\"radio\"], [type=\"range\"], [type=\"file\"]),\nselect,\ntextarea {\n appearance: none;\n padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);\n}\n\n// Commons styles\ninput,\nselect,\ntextarea {\n --background-color: var(--form-element-background-color);\n --border-color: var(--form-element-border-color);\n --color: var(--form-element-color);\n --box-shadow: none;\n border: var(--border-width) solid var(--border-color);\n border-radius: var(--border-radius);\n outline: none;\n background-color: var(--background-color);\n box-shadow: var(--box-shadow);\n color: var(--color);\n font-weight: var(--font-weight);\n\n @if settings.$enable-transitions {\n transition: background-color var(--transition), border-color var(--transition),\n color var(--transition), box-shadow var(--transition);\n }\n}\n\n// Active & Focus\ninput:not([type=\"submit\"], [type=\"button\"], [type=\"reset\"], [type=\"checkbox\"], [type=\"radio\"], [readonly]),\n:where(select, textarea) {\n &:is(:active, :focus) {\n --background-color: var(--form-element-active-background-color);\n }\n}\n\n// Active & Focus\ninput:not([type=\"submit\"], [type=\"button\"], [type=\"reset\"], [role=\"switch\"], [readonly]),\n:where(select, textarea) {\n &:is(:active, :focus) {\n --border-color: var(--form-element-active-border-color);\n }\n}\n\n// Focus\ninput:not([type=\"submit\"], [type=\"button\"], [type=\"reset\"], [type=\"range\"], [type=\"file\"], [readonly]),\nselect,\ntextarea {\n &:focus {\n --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);\n }\n}\n\n// Disabled\ninput:not([type=\"submit\"], [type=\"button\"], [type=\"reset\"])[disabled],\nselect[disabled],\ntextarea[disabled],\n:where(fieldset[disabled])\n :is(input:not([type=\"submit\"], [type=\"button\"], [type=\"reset\"]), select, textarea) {\n --background-color: var(--form-element-disabled-background-color);\n --border-color: var(--form-element-disabled-border-color);\n opacity: var(--form-element-disabled-opacity);\n pointer-events: none;\n}\n\n// Aria-invalid\n:where(input, select, textarea) {\n &:not([type=\"checkbox\"], [type=\"radio\"], [type=\"date\"], [type=\"datetime-local\"], [type=\"month\"], [type=\"time\"], [type=\"week\"]) {\n &[aria-invalid] {\n @if settings.$enable-important {\n padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;\n padding-left: var(--form-element-spacing-horizontal);\n padding-inline-start: var(--form-element-spacing-horizontal) !important;\n padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem) !important;\n } @else {\n padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);\n padding-left: var(--form-element-spacing-horizontal);\n padding-inline-start: var(--form-element-spacing-horizontal);\n padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);\n }\n background-position: center right 0.75rem;\n background-size: 1rem auto;\n background-repeat: no-repeat;\n }\n\n &[aria-invalid=\"false\"] {\n background-image: var(--icon-valid);\n }\n\n &[aria-invalid=\"true\"] {\n background-image: var(--icon-invalid);\n }\n }\n\n &[aria-invalid=\"false\"] {\n --border-color: var(--form-element-valid-border-color);\n\n &:is(:active, :focus) {\n @if settings.$enable-important {\n --border-color: var(--form-element-valid-active-border-color) !important;\n --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important;\n } @else {\n --border-color: var(--form-element-valid-active-border-color);\n --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color);\n }\n }\n }\n\n &[aria-invalid=\"true\"] {\n --border-color: var(--form-element-invalid-border-color);\n\n &:is(:active, :focus) {\n @if settings.$enable-important {\n --border-color: var(--form-element-invalid-active-border-color) !important;\n --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color) !important;\n } @else {\n --border-color: var(--form-element-invalid-active-border-color);\n --box-shadow: 0 0 0 var(--outline-width) var(--form-element-invalid-focus-color);\n }\n }\n }\n}\n\n[dir=\"rtl\"] {\n :where(input, select, textarea) {\n &:not([type=\"checkbox\"], [type=\"radio\"]) {\n &:is([aria-invalid], [aria-invalid=\"true\"], [aria-invalid=\"false\"]) {\n background-position: center left 0.75rem;\n }\n }\n }\n}\n\n// Placeholder\ninput::placeholder,\ninput::-webkit-input-placeholder,\ntextarea::placeholder,\ntextarea::-webkit-input-placeholder,\nselect:invalid {\n color: var(--form-element-placeholder-color);\n opacity: 1;\n}\n\n// Margin bottom (Not Checkboxes and Radios)\ninput:not([type=\"checkbox\"], [type=\"radio\"]),\nselect,\ntextarea {\n margin-bottom: var(--spacing);\n}\n\n// Select\nselect {\n // Unstyle the caret on `\n summary {\n margin-bottom: 0;\n\n &:not([role]) {\n height: calc(\n 1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) *\n 2\n );\n padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);\n border: var(--border-width) solid var(--form-element-border-color);\n border-radius: var(--border-radius);\n background-color: var(--form-element-background-color);\n color: var(--form-element-placeholder-color);\n line-height: inherit;\n cursor: pointer;\n\n @if settings.$enable-transitions {\n transition: background-color var(--transition), border-color var(--transition),\n color var(--transition), box-shadow var(--transition);\n }\n\n &:active,\n &:focus {\n border-color: var(--form-element-active-border-color);\n background-color: var(--form-element-active-background-color);\n }\n\n &:focus {\n box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color);\n }\n }\n }\n\n // Close for details[role=\"list\"]\n &[open] summary {\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n\n &::before {\n display: block;\n z-index: 1;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background: none;\n content: \"\";\n cursor: default;\n }\n }\n}\n\n// All Dropdowns inside