/*
Dusk theme for roundabout web interface
Copyright (C) 2024 Roundabout developer

This stylesheet is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This stylesheet is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this stylesheet. If not, see <https://www.gnu.org/licenses/>
*/

:root, ::backdrop {
    /* FONTS */
    --body-font: /* body text */
        normal /* style */
        normal /* variant */
        400 /* weight */
        normal /* stretch */
        16px/20px /* size / line height */
        "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
        ;
    --table-font:
        normal /* style */
        normal /* variant */
        400 /* weight */
        normal /* stretch */
        15.4px/20px /* size / line height */
        "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
        ;
    --table-header-font:
        normal /* style */
        normal /* variant */
        500 /* weight */
        normal /* stretch */
        15.4px/20px /* size / line height */
        "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
        ;
    --mono-font: /* code */
        normal /* style */
        normal /* variant */
        400 /* weight */
        normal /* stretch */
        14.5px/20px /* size / line height */
        "Roboto Mono", "Noto Sans Mono", "Noto Mono", "Source Code Pro", "Source Code", "source-pro-code", Cousine, Consolas, monospace /* family */
        ;
    --keyboard-font: /* keyboard */
        normal /* style */
        normal /* variant */
        600 /* weight */
        normal /* stretch */
        12px/12px /* size / line height */
        "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
        ;
    --button-font: /* buttons */
        normal /* style */
        normal /* variant */
        600 /* weight */
        normal /* stretch */
        15px/20px /* size / line height */
        "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
        ;
    --badge-font: /* badges */
        normal /* style */
        normal /* variant */
        700 /* weight */
        normal /* stretch */
        13.2px/16px /* size / line height */
        "Roboto Mono", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
        ;
    --gui-font: /* everything not covered by something else */
        var(--body-font);
    --input-font: /* all inputs which show text */
        var(--gui-font);
    --textarea-font: /* textareas */
        var(--mono-font);
    --h6-font: /* h6 */
        normal /* style */
        normal /* variant */
        700 /* weight */
        normal /* stretch */
        16px/20px /* size / line height */
        "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
        ;
    --h5-font: /* h5 */
        normal /* style */
        normal /* variant */
        900 /* weight */
        normal /* stretch */
        18px/20px /* size / line height */
        "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
        ;
    --h4-font: /* h4 */
        normal /* style */
        normal /* variant */
        700 /* weight */
        normal /* stretch */
        19.5px/24px /* size / line height */
        "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
        ;
    --h3-font: /* h3 */
        normal /* style */
        normal /* variant */
        400 /* weight */
        normal /* stretch */
        22.5px/28px /* size / line height */
        "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
        ;
    --h2-font: /* h2 */
        normal /* style */
        normal /* variant */
        300 /* weight */
        normal /* stretch */
        28px/32px /* size / line height */
        "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
        ;
    --h1-font: /* h1 */
        normal /* style */
        normal /* variant */
        300 /* weight */
        normal /* stretch */
        36px/44px /* size / line height */
        "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
        ;
    --headline-font: /* h1 as a headline */
        normal /* style */
        normal /* variant */
        100 /* weight */
        normal /* stretch */
        52px/60px /* size / line height */
        "Roboto", "Noto Sans", system-ui, apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Arial", sans-serif /* family */
        ;

    /* GENERAL COLOURS */
    /* background */                                  /* foreground */
    --color-primary: #4DB6AC;                       --color-primary-text: #ffffff;
    --color-primary-1: #009688;                     --color-primary-1-text: #ffffff;
    --color-primary-2: #00796B;                     --color-primary-2-text: #ffffff;
    --color-primary-3: #80CBC4;                     --color-primary-3-text: #000000;
    --color-primary-4: #B2DFDB;                     --color-primary-4-text: #000000;

    --color-accent: #FFAB40;                        --color-accent-text: #000000;
    --color-accent-1: #FF9100;                      --color-accent-1-text: #ffffff;
    --color-accent-2: #FF6D00;                      --color-accent-2-text: #ffffff;
    --color-accent-3: #FFD180;                      --color-accent-3-text: #000000;
    --color-accent-4: #FFF3E0;                      --color-accent-4-text: #000000;

    --color-background: #455A64;                    --color-background-text: #FFFFFFf4;
                                                      --color-caption-text: #FFFFFFb9;
                                                      --color-label-text: #FFFFFFdf;

    --color-error: #FF1744;                         --color-error-text: #FFFFFF;
    --color-alert: #FFC400;                         --color-alert-text: #000000;
    --color-info: #40C4FF;                          --color-info-text: #000000;
    --color-success: #00E676;                       --color-success-text: #000000;

    --color-not-accent: transparent;                  --color-not-accent-text: var(--color-background-text);

    --color-scheme: dark;

    /* CODE BLOCKS */
    --color-code: #263238;                          --color-code-text: #FFFFFFea;
    --color-quote: #546E7A;                         --color-quote-text: #FFFFFFea;
    --color-short-code: #37474F;                    --color-short-code-text: #FFFFFFea;
    --color-keyboard: #607D8B;                      --color-keyboard-text: #FFFFFF;

    --color-scheme-code: dark;

    --size-keyboard: 1.5em;
    --padding-keyboard: 0.375em;
    --padding-code: 12px;

    --radius-code: 0;
    --radius-short-code: 0.125em;
    --border-code: none;
    --border-short-code: none;

    --shadow-keyboard: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);

    /* BUTTONS */
    --color-button: var(--color-primary);             --color-button-text: var(--color-primary-text);
    --color-button-hover: var(--color-primary);       --color-button-hover-text: var(--color-primary-text);
    --color-button-active: var(--color-primary);      --color-button-active-text: var(--color-primary-text);
    --color-flat-button: transparent;                 --color-flat-button-text: var(--color-primary);
    --color-flat-button-hover: #FFFFFF20;           --color-flat-button-hover-text: var(--color-primary-2);
    --color-flat-button-active: #FFFFFF30;          --color-flat-button-active-text: var(--color-primary-3);

    --shadow-button: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);
    --shadow-button-hover: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
    --shadow-flat-button: none;
    --shadow-flat-button-hover: none;

    --border-button: none;
    --border-button-hover: none;
    --border-flat-button: none;
    --border-flat-button-hover: none;

    --radius-button: 2px;
    --radius-round-button: 100vmin;
    --radius-flat-button: 2px;

    --height-button: 36px;
    --size-round-button: 48px;
    --margin-round-button: 8px;
    --padding-button: 4px 8px;
    --padding-round-button: 8px;
    --gap-button: 4px;
    --min-width-button: 64px;

    /* LINKS */
    --color-link-text: var(--color-primary-3);
    --color-link-hover-text: var(--color-primary-4);
    --color-link-active-text: var(--color-primary-2);
    --color-link-visited-text: var(--color-link-text);
    --color-link-visited-hover-text: var(--color-link-hover-text);

    /* TOASTS */
    --color-callout: #546e7a;                       --color-callout-text: #ffffff;
    --color-callout-1: #37474f;                     --color-callout-1-text: #ffffff;
    --color-callout-2: #78909c;                     --color-callout-2-text: #ffffff;
                                                      --color-callout-button-text: var(--color-accent-4);

    --border-toast: none;
    --radius-toast: 2px;
    --gap-toast: 8px;
    --min-width-toast: 192px;
    --max-width-toast: 50%;
    --height-toast: 40px;
    --padding-toast: 0 0 0 8px;
    --toast-align-horizontal: end;
    --toast-align-vertical: end;
    --toast-stack: column-reverse wrap;
    --margin-toast: 12px;

    --shadow-toast: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);

    /* CHECKBOXES */
    --color-checkbox: var(--color-not-accent);        --color-checkbox-text: var(--color-accent);
    --color-checkbox-hover: var(--color-not-accent);  --color-checkbox-hover-text: var(--color-accent);
    --color-checkbox-active: var(--color-accent);     --color-checkbox-active-text: var(--color-accent-text);
    --color-checkbox-indeterminate: var(--color-accent);--color-checkbox-indeterminate-text: var(--color-accent-text);
    --color-checkbox-indeterminate-hover: var(--color-accent);--color-checkbox-indeterminate-hover-text: var(--color-accent-text);
    --color-checkbox-active-hover: var(--color-accent);--color-checkbox-active-hover-text: var(--color-accent-text);
    --color-radio: var(--color-not-accent);           --color-radio-text: var(--color-accent);
    --color-radio-active: var(--color-not-accent);    --color-radio-active-text: var(--color-accent);
    --color-radio-hover: var(--color-not-accent);     --color-radio-hover-text: var(--color-accent);
    --color-radio-active-hover: var(--color-not-accent);--color-radio-active-hover-text: var(--color-accent);

    --border-checkbox: 0.125em solid currentColor;
    --border-checkbox-checked: 0.125em solid var(--color-checkbox-active);
    --border-checkbox-indeterminate: 0.125em solid var(--color-checkbox-indeterminate);
    --border-checkbox-hover: 0.125em solid currentColor;
    --border-checkbox-checked-hover: 0.125em solid var(--color-checkbox-active);
    --border-checkbox-indeterminate-hover: 0.125em solid var(--color-checkbox-indeterminate);
    --border-radio: 0.125em solid currentColor;
    --border-radio-checked: 0.125em solid currentColor;
    --border-radio-hover: 0.125em solid currentColor;
    --border-radio-checked-hover: 0.125em solid currentColor;

    --color-switch: #607D8B;                        --color-switch-thumb: #90A4AE;
    --color-switch-on: var(--color-accent-2);         --color-switch-thumb-on: var(--color-accent);
    --color-switch-hover: #607D8B;                  --color-switch-thumb-hover: #90A4AE;
    --color-switch-on-hover: var(--color-accent-2);   --color-switch-thumb-on-hover: var(--color-accent);

    --border-switch: none;
    --border-switch-hover: none;
    --radius-switch: 1em;
    --height-switch: 0.75em;
    --width-switch: 2em;
    --border-switch-thumb: none;
    --border-switch-thumb-hover: none;
    --radius-switch-thumb: 1em;
    --width-switch-thumb: 1em;
    --height-switch-thumb: 1em;
    --padding-switch-thumb: 0em;  /* for some reason, you must set the unit */
    --width-switch-thumb-hover: 1em;
    --height-switch-thumb-hover: 1em;

    --shadow-switch: 0 0 0 0 transparent;  /* none */
    --shadow-switch-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40);
    --shadow-switch-hover: 0 0 0 0 transparent;  /* none */
    --shadow-switch-thumb-hover: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.40);

    --border-switch-on: none;
    --border-switch-on-hover: none;
    --border-switch-thumb-on: none;
    --border-switch-thumb-on-hover: none;
    --radius-switch-thumb-on: 1em;
    --width-switch-thumb-on: 1em;
    --height-switch-thumb-on: 1em;
    --padding-switch-thumb-on: 0em;  /* for some reason, you must set the unit */
    --width-switch-thumb-on-hover: 1em;
    --height-switch-thumb-on-hover: 1em;

    --shadow-switch-on: 0 0 0 0 transparent;  /* none */
    --shadow-switch-thumb-on: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40);
    --shadow-switch-on-hover: 0 0 0 0 transparent;  /* none */
    --shadow-switch-thumb-on-hover: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.40);

    --radius-checkbox: 0.125em;
    --radius-radio: 1em;
    --size-checkbox: 1em;

    --shadow-form: 0 0 0 0 transparent;  /* none */
    --shadow-form-checked: 0 0 0 0 transparent;  /* none */
    --shadow-form-indeterminate: 0 0 0 0 transparent;  /* none */
    --shadow-form-hover: 0 0 0 0 transparent;  /* none */
    --shadow-form-checked-hover: 0 0 0 0 transparent;  /* none */
    --shadow-form-indeterminate-hover: 0 0 0 0 transparent;  /* none */

    /* RANGES */
    --color-range: var(--color-accent-2);            --color-range-text: var(--color-accent);
    --color-range-hover: var(--color-accent-2);      --color-range-hover-text: var(--color-accent);

    --border-range: none;
    --border-range-hover: none;
    --radius-range: 1em;
    --height-range: 0.75em;
    --border-range-thumb: none;
    --border-range-thumb-hover: none;
    --position-range-thumb: -12.5%;
    --position-range-thumb-hover: -12.5%;
    --radius-range-thumb: 1em;
    --width-range-thumb: 1em;
    --height-range-thumb: 1em;
    --width-range-thumb-hover: 1em;
    --height-range-thumb-hover: 1em;
    --shadow-range: 0 0 0 0 transparent;  /* none */
    --shadow-range-thumb: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 0 3px 0 rgba(0, 0, 0, 0.40);
    --shadow-range-hover: 0 0 0 0 transparent;  /* none */
    --shadow-range-thumb-hover: 0 0 2px 0 rgba(0, 0, 0, 0.28), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 4px 0 rgba(0, 0, 0, 0.40);

    /* CARDS */
    --color-card: #546E7A;                          --color-card-text: var(--color-background-text);
    --color-figcaption-text: #000000df;

    --radius-card: 0;
    --outline-outlined-card: 1px solid #FFFFFF80;
    --radius-outlined-card: 4px;
    --border-card: none;
    --shadow-card: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);

    --padding-card: 0 12px 12px 12px;
    --padding-card-top: 12px;
    --padding-card-figcaption: 0 12px 12px 12px;
    --figure-max-size-horizontal-card: clamp(200px, 50%, 768px);

    /* LAYOUT */
    --gap-buttonbox: 4px;
    --gap-label-checkbox: 4px;
    --gap-box: 16px;

    /* NAVBAR */
    --color-navbar: #546E7A;            --color-navbar-text: var(--color-background-text);
    --color-navbar-link: var(--color-background-text);

    --height-navbar: 48px;
    --width-navbar-button: 56px;
    --padding-navbar: 12px;
    --gap-navbar: 0;
    --shadow-navbar: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
    --border-navbar: none;
    --radius-navbar: 0;

    /* NAVRAIL */
    --color-navrail: #546E7A;           --color-navrail-text: var(--color-primary-text);
    --color-navrail-link: var(--color-primary-text);
    --color-navrail-link-hover: var(--color-primary-3);
    --color-navrail-link-selected: var(--color-primary-3);

    --width-navrail: 72px;
    --height-navrail-button: 56px;
    --padding-navrail: 0;
    --gap-navrail: 0;
    --shadow-navrail: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
    --border-navrail: none;
    --radius-navrail: 0;

    /* SIDENAV */
    --color-sidenav: transparent;       --color-sidenav-text: var(--color-caption-text);
    --gap-sidenav-item: 1ch;
    --padding-sidenav: 8px;

    /* BREADCRUMBS */
    --color-breadcrumbs: var(--color-navbar);     --color-breadcrumbs-text: var(--color-navbar-text);
    --color-breadcrumbs-link: var(--color-navbar-text);
    --color-breadcrumbs-separator: var(--color-navbar-text);

    --height-breadcrumbs: 48px;
    --padding-breadcrumbs: 16px;
    --shadow-breadcrumbs: var(--shadow-navbar);
    --border-breadcrumbs: none;
    --radius-breadcrumbs: 0;
    --separator-breadcrumbs: "  >  ";

    /* TABS */
    --color-tab: var(--color-navbar);                --color-tab-text: var(--color-navbar-text);
    --color-tab-selected: var(--color-navbar);       --color-tab-selected-text: var(--color-navbar-text);
    --color-tab-hover: var(--color-navbar);          --color-tab-hover-text: var(--color-navbar-text);
    --color-tab-hover-selected: var(--color-navbar); --color-tab-hover-selected-text: var(--color-navbar-text);

    --justify-tab-row: space-around;
    --height-tab: 36px;
    --width-tab: 80px;
    --align-tab: center;
    --border-tab: none;
    --border-tab-selected: none;
    --radius-tab: 0;

    /* DIVIDERS */
    --line-divider: 1px solid #FFFFFF80;

    /* LISTS */
    --style-unordered-list: disc;
    --color-unordered-list-marker: currentColor;
    --font-unordered-list-marker: var(--body-font);
    --indent-unordered-list: 1em;

    --style-ordered-list: decimal;
    --color-ordered-list-marker: currentColor;
    --font-ordered-list-marker: var(--body-font);
    --indent-ordered-list: 1em;

    /* TABLES */
    --padding-cell: 1ch;
    --border-cell-horizontal: 1px solid #FFFFFF20;
    --border-cell-vertical: 1px solid #FFFFFF40;
    --color-table: #546E7A;                        --color-table-text: var(--color-background-text);
    --color-row-odd: #FFFFFF10;                    --color-row-odd-text: var(--color-background-text);
    --color-row-even: transparent;                   --color-row-even-text: var(--color-background-text);
    --color-row-header: var(--color-primary-1);      --color-row-header-text: var(--color-primary-1-text);

    /* BADGES */
    --border-badge: none;
    --shadow-badge: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);
    --x-badge: 100%;
    --y-badge: 25%;
    --width-badge: 2.25ch;
    --height-badge: 2.25ch;
    --radius-badge: 3ch;
    --padding-badge: 0.25ch;
    --color-badge: var(--color-accent);              --color-badge-text: var(--color-accent-text);

    /* AVATARS */
    --radius-avatar: 0;

    /* BUBBLES */
    --border-bubble: none;
    --shadow-bubble: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);
    --radius-bubble: 1em;
    --padding-bubble: 1ch;
    --color-bubble: var(--color-accent-3);           --color-bubble-text: var(--color-accent-3-text);
    --color-bubble-alt: var(--color-accent-2);       --color-bubble-alt-text: var(--color-accent-2-text);

    /* INPUTS */
    --color-input: #607D8B;                        --color-input-text: #FFFFFFbb;
    --color-input-hover: #607D8B;                  --color-input-hover-text: #FFFFFFbb;
    --color-input-active: #607D8B;                 --color-input-active-text: #FFFFFFdf;
    --color-flat-input: transparent;                 --color-flat-input-text: #FFFFFFbb;
    --color-flat-input-hover: transparent;           --color-flat-input-hover-text: #FFFFFFbb;
    --color-flat-input-active: transparent;          --color-flat-input-active-text: #FFFFFFdf;

    --shadow-input: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);
    --shadow-input-hover: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
    --shadow-input-active: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
    --shadow-flat-input: none;
    --shadow-flat-input-hover: none;
    --shadow-flat-input-active: none;

    --border-input: none;
    --border-input-hover: none;
    --border-input-active: none;
    --border-flat-input: none;
    --border-flat-input-hover: none;
    --border-flat-input-active: none;

    --radius-input: 2px;
    --radius-flat-input: 2px;

    --height-input: 36px;
    --padding-input: 4px 8px;
    --min-width-input: 64px;

    --size-input-icon: 16px;

    /* TEXTAREAS */
    --color-textarea: #607D8B;                        --color-textarea-text: #FFFFFFbb;
    --color-textarea-hover: #607D8B;                  --color-textarea-hover-text: #FFFFFFbb;
    --color-textarea-active: #607D8B;                 --color-textarea-active-text: #FFFFFFdf;
    --color-flat-textarea: transparent;                 --color-flat-textarea-text: #FFFFFFbb;
    --color-flat-textarea-hover: transparent;           --color-flat-textarea-hover-text: #FFFFFFbb;
    --color-flat-textarea-active: transparent;          --color-flat-textarea-active-text: #FFFFFFdf;

    --shadow-textarea: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);
    --shadow-textarea-hover: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
    --shadow-textarea-active: 0 7px 25px -10px rgba(0, 0, 0, 0.12), 0 7px 25px 0 rgba(0, 0, 0, 0.24), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
    --shadow-flat-textarea: none;
    --shadow-flat-textarea-hover: none;
    --shadow-flat-textarea-active: none;

    --border-textarea: none;
    --border-textarea-hover: none;
    --border-textarea-active: none;
    --border-flat-textarea: 1px solid #FFFFFF40;
    --border-flat-textarea-hover: 1px solid #FFFFFF40;
    --border-flat-textarea-active: 1px solid #FFFFFF40;

    --radius-textarea: 2px;
    --radius-flat-textarea: 8px;

    --padding-textarea: 8px;

    /* MENUS */
    --color-toolbar: #546E7A;                         --color-toolbar-text: #FFFFFFde;
    --color-menu: #607D8B;                            --color-menu-text: #FFFFFFde;
    --color-menu-item: transparent;                     --color-menu-item-text: #FFFFFFde;
    --color-menu-item-hover: #FFFFFF10;               --color-menu-item-hover-text: #FFFFFFde;

    --gap-toolbar: 4px;
    --gap-menu: 0;
    --border-toolbar: none;
    --border-menu: none;
    --border-menu-item: none;
    --shadow-toolbar: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);
    --shadow-menu: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 3px 6px 0 rgba(0, 0, 0, 0.24), 0 1px 4px 0 rgba(0, 0, 0, 0.12);
    --height-toolbar: 48px;
    --height-menu-item: 24px;
    --width-toolbar: fit-content;
    --radius-toolbar: 0;
    --radius-menu: 0;
    --padding-toolbar: 4px;
    --padding-menu: 2px 0;
    --padding-menu-item: 2px 8px;

    /* DIALOGS */
    --color-modal-backdrop: radial-gradient(circle, #00000040 12.5%, #000000cc 100%);
}

/* Extra styles */

h6 {
    /* Make it look nicer */
    text-transform: uppercase;
    color: var(--color-accent);
}

:any-link, .link-button {
    /* Make them nicer, not possible with the font property */
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: .05em;
    text-underline-offset: .1em;
}

button, .button, input[type=button], input[type=submit], input[type=reset], input[type="file"]::file-selector-button {
    /* Make it look nicer */
    text-transform: uppercase;
}

.toast-container li {
    /* Toast appear */
    animation: toastSlide 750ms cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: bottom;
}

.toast-container li.removing {
    /* Toast disappear */
    animation: toastCompress 500ms cubic-bezier(0.55, 0, 1, 0.45);
}

.toast-container li.removing ~ li {
    /* TODO */
}

@keyframes toastSlide {
	0% {
		opacity: 0;
		transform: translateY(100vh);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes toastCompress {
	0% {
		transform: rotateX(0);
        opacity: 1;
	}

	100% {
		transform: rotateX(180deg);
        opacity: 0;
	}
}

input[type="checkbox"]:not(.switch):checked::after, input[type="checkbox"]:not(.switch):indeterminate::after, input[type="radio"]:checked::after {
    /* Checked */
    animation: check 250ms cubic-bezier(0.61, 1, 0.88, 1);
}

input[type="checkbox"]:not(.switch), input[type="radio"] {
    /* Transition background */
    transition: box-shadow 250ms cubic-bezier(0.61, 1, 0.88, 1);
}

input[type="checkbox"].switch::after {
    /* Transition switch thumb */
    transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1);
}

input[type="range"]::-webkit-slider-thumb {
    transition: box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1);
}

input[type="range"]::-moz-range-thumb {
    transition: box-shadow 375ms cubic-bezier(0.61, 1, 0.88, 1);
}

button, .button, input[type="file"]::file-selector-button, input, select, textarea {
    transition: box-shadow 375ms cubic-bezier(0.5, 1, 0.89, 1), background 375ms cubic-bezier(0.5, 1, 0.89, 1), color 375ms cubic-bezier(0.5, 1, 0.89, 1);
}

@keyframes check {
	0% {
		transform: scale(0);
	}

	100% {
		transform: scale(1);
	}
}

.navbar {
    position: sticky;
}

:is(.navbar, .breadcrumbs) a:not(:hover) {
    text-decoration: none;
}

x-notebook > label:has(input[type="radio"]:checked) {
    border-bottom: 4px solid var(--color-accent);
    transition: border 125ms ease;
}

x-notebook > label {
    text-transform: uppercase;
    font-weight: 600;
    flex: 1 0 auto;
}

th, ol.table > li.list-header {
    border: none;
}

th, td {
    text-align: start;
}

.chat-bubble::before {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border: 0.75em solid;
    border-color: transparent var(--color-bubble) transparent transparent;
    left: -1.5em;
    top: 1em;
}

.bubble-alt::before {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border: 0.75em solid;
    border-color: transparent transparent transparent var(--color-bubble-alt);
    transform: translateX(100%);
    width: 100%;
    left: 0;
    top: 1em;
}

::placeholder {
    opacity: 0.5;
}

:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range], [type=color]), select).input-flat {
    border-bottom: 2px solid var(--color-primary) !important;
}

:disabled {
    opacity: 0.5;
}

input[type="color"] {
    padding: 0;
    border: 0;
    overflow: hidden;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

:is(input:not([type=button], [type=checkbox], [type=radio], [type=submit], [type=reset], [type=file], [type=range]), select, textarea):focus {
    outline: none;  /* there is a blinking cursor, better not to have an outline */
}

textarea {
    font: var(--mono-font);
}

button:has(iconify-icon) {
    min-width: var(--height-button);
}

details.dropdown[open] > summary ~ * {
    animation: menu 375ms cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: top;
}

@keyframes menu {
    0% {
        transform: rotateX(-90deg);
        opacity: 0;
    }

    100% {
        transform: rotateX(0);
        opacity: 1;
    }
}

details.slidein[open] > summary ~ * {
    animation: menu2 375ms cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: left;
}

@keyframes menu2 {
    0% {
        transform: rotateY(-90deg);
        opacity: 0;
    }

    100% {
        transform: rotateY(0);
        opacity: 1;
    }
}

dialog:modal {
    animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
    transform-origin: center;
}

dialog {
    transition: opacity 250ms cubic-bezier(0.33, 1, 0.68, 1);
}

dialog.sheet-left:modal {
    animation: entranceX 500ms cubic-bezier(0.33, 1, 0.68, 1);
    transform-origin: left;
}

dialog.sheet-right:modal {
    animation: entranceX 500ms cubic-bezier(0.33, 1, 0.68, 1);
    transform-origin: right;
}

dialog.sheet-top:modal {
    animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
    transform-origin: top;
}

dialog.sheet-bottom:modal {
    animation: entranceY 500ms cubic-bezier(0.33, 1, 0.68, 1);
    transform-origin: bottom;
}

dialog::backdrop {
    backdrop-filter: saturate(0.5) contrast(0.5) brightness(1.25) blur(2px);
}

@keyframes entranceX {
    0% {
        transform: rotateY(-90deg);
    }
    100% {
        transform: rotateY(0);
    }
}

@keyframes entranceY {
    0% {
        transform: rotateX(-90deg);
    }
    100% {
        transform: rotateX(0);
    }
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

:where(.navrail, .navbar, .sidenav) > iconify-icon {
    font-size: 1.5rem;
}

.navbar > *, .navbar > ul > li > * {
    height: var(--height-navbar);
    display: flex;
    align-items: center;
    justify-content: center;
}

header:has(.navbar) .breadcrumbs {
    z-index: 2 !important;
    position: relative;
    box-shadow: none;
}

.navbar a {
    font-weight: 500;
}

x-notebook > label:has(input[type="radio"]:checked) {
    background: var(--color-tab-selected);
    color: var(--color-tab-selected-text);
    border: none;
    box-shadow: inset 0 -4px 0 var(--color-accent);
    transition: box-shadow 125ms ease;
}

x-notebook > label:has(input[type="radio"]) {
    transition: box-shadow 125ms ease;
}

.file-link, .button, #forum-banner a, .nolink, ins, .code-view > ins, del, .code-view > del, #pagination > a {
    text-decoration: none;
}