/*
   Elevator Template custom css
 - HTML: default color theme 
 - HTML-darkmode: dark mode theme
 - GitHub: svg icon on top right corner
 - Next-Section: next section button to allow easier navigation
*/
html {
    --utep-orange: #FF8200;
    --utep-blue: #041E42;

    --github-icon: var(--utep-orange);

    /* primary theme color. This will affect the entire websites color scheme: links, arrows, labels, ... */
    --primary-color:  #1982d2;
    --primary-dark-color: #335c80;
    --primary-light-color: #70b1e9;

    /* page base colors */
    --page-background-color: white;
    --page-foreground-color: #2f4153;
    --page-secondary-foreground-color: #637485;

    /* color for all separators on the website: hr, borders, ... */
    --separator-color: #dedede;

    /* border radius for all rounded components. Will affect many components, like dropdowns, memitems, codeblocks, ... */
    --border-radius-large: 8px;
    --border-radius-small: 4px;
    --border-radius-medium: 6px;

    /* default spacings. Most compontest reference these values for spacing, to provide uniform spacing on the page. */
    --spacing-small: 5px;
    --spacing-medium: 10px;
    --spacing-large: 16px;

    /* default box shadow used for raising an element above the normal content. Used in dropdowns, Searchresult, ... */
    --box-shadow: 0 2px 8px 0 rgba(0,0,0,.075);

    --odd-color: rgba(0,0,0,.028);

    /* font-families. will affect all text on the website
     * font-family: the normal font for text, headlines, menus
     * font-family-monospace: used for preformatted text in memtitle, code, fragments
     */
    --font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
    --font-family-monospace: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;

    /* font sizes */
    --page-font-size: 15.6px;
    --navigation-font-size: 14.4px;
    --code-font-size: 14px; /* affects code, fragment */
    --title-font-size: 22px;

    /* content text properties. These only affect the page content, not the navigation or any other ui elements */
    --content-line-height: 27px;
    /* The content is centered and constraint in it's width. To make the content fill the whole page, set the variable to auto.*/
    --content-maxwidth: 1000px;

    /* colors for various content boxes: @warning, @note, @deprecated @bug */
    --warning-color: #f8d1cc;
    --warning-color-dark: #b61825;
    --warning-color-darker: #75070f;
    --note-color: #faf3d8;
    --note-color-dark: #f3a600;
    --note-color-darker: #5f4204;
    --todo-color: #e4f3ff;
    --todo-color-dark: #1879C4;
    --todo-color-darker: #274a5c;
    --deprecated-color: #ecf0f3;
    --deprecated-color-dark: #5b6269;
    --deprecated-color-darker: #43454a;
    --bug-color: #e4dafd;
    --bug-color-dark: #5b2bdd;
    --bug-color-darker: #2a0d72;
    --invariant-color: #d8f1e3;
    --invariant-color-dark: #44b86f;
    --invariant-color-darker: #265532;

    /* blockquote colors */
    --blockquote-background: #f8f9fa;
    --blockquote-foreground: #636568;

    /* table colors */
    --tablehead-background: #f1f1f1;
    --tablehead-foreground: var(--page-foreground-color);

    /* menu-display: block | none
     * Visibility of the top navigation on screens >= 768px. On smaller screen the menu is always visible.
     * `GENERATE_TREEVIEW` MUST be enabled!
     */
    --menu-display: block;

    --menu-focus-foreground: var(--page-background-color);
    --menu-focus-background: var(--utep-orange); /*var(--primary-color); */
    --menu-selected-background: rgba(0,0,0,.05);

    --header-background: var(--utep-blue);
    --header-foreground: white;

    /* searchbar colors */
    --searchbar-background: var(--side-nav-background);
    --searchbar-foreground: var(--page-foreground-color);

    /* searchbar size
     * (`searchbar-width` is only applied on screens >= 768px.
     * on smaller screens the searchbar will always fill the entire screen width) */
    --searchbar-height: 33px;
    --searchbar-width: 210px;
    --searchbar-border-radius: var(--searchbar-height);

    /* code block colors */
    --code-background: #f5f5f5;
    --code-foreground: var(--page-foreground-color);

    /* fragment colors */
    --fragment-background: #F8F9FA;
    --fragment-foreground: #37474F;
    --fragment-keyword: #bb6bb2;
    --fragment-keywordtype: #8258b3;
    --fragment-keywordflow: #d67c3b;
    --fragment-token: #438a59;
    --fragment-comment: #969696;
    --fragment-link: #5383d6;
    --fragment-preprocessor: #46aaa5;
    --fragment-linenumber-color: #797979;
    --fragment-linenumber-background: #f4f4f5;
    --fragment-linenumber-border: #e3e5e7;
    --fragment-lineheight: 20px;

    /* sidebar navigation (treeview) colors */
    --side-nav-background:  var(--utep-blue);
    --side-nav-foreground: white;
    --side-nav-arrow-opacity: 0;
    --side-nav-arrow-hover-opacity: 0.9;

    --toc-background: white;
    --toc-foreground: white;

    /* height of an item in any tree / collapsable table */
    --tree-item-height: 30px;

    --memname-font-size: var(--code-font-size);
    --memtitle-font-size: 18px;

    --webkit-scrollbar-size: 7px;
    --webkit-scrollbar-padding: 4px;
    --webkit-scrollbar-color: var(--separator-color);

}

/*Dark Mode HTML setting*/
html.dark-mode {
    color-scheme: dark;

    --utep-orange: #FF8200;
    --utep-blue: #041E42;

    --github-icon: var(--utep-orange);

    --primary-color: var(--utep-orange);/* #1982d2; */
    --primary-dark-color: #86a9c4;
    --primary-light-color: #4779ac;

    --box-shadow: 0 2px 8px 0 rgba(0,0,0,.30);

    --odd-color: rgba(100,100,100,.06);

    --menu-selected-background: rgba(0,0,0,.4);

    --page-background-color: #1C1D1F;
    --page-foreground-color: #d2dbde;
    --page-secondary-foreground-color: #859399;
    --separator-color: #38393b;

    --header-background: var(--utep-blue);
    --header-foreground: white;

    /* sidebar navigation (treeview) colors */
    --side-nav-background:  var(--utep-blue);
    --side-nav-foreground: white;
    --side-nav-arrow-opacity: 0;
    --side-nav-arrow-hover-opacity: 0.9;

    --code-background: #2a2c2f;

    --tablehead-background: #2a2c2f;

    --blockquote-background: #222325;
    --blockquote-foreground: #7e8c92;

    --warning-color: #2e1917;
    --warning-color-dark: #ad2617;
    --warning-color-darker: #f5b1aa;
    --note-color: #3b2e04;
    --note-color-dark: #f1b602;
    --note-color-darker: #ceb670;
    --todo-color: #163750;
    --todo-color-dark: #1982D2;
    --todo-color-darker: #dcf0fa;
    --deprecated-color: #2e323b;
    --deprecated-color-dark: #738396;
    --deprecated-color-darker: #abb0bd;
    --bug-color: #2a2536;
    --bug-color-dark: #7661b3;
    --bug-color-darker: #ae9ed6;
    --invariant-color: #303a35;
    --invariant-color-dark: #76ce96;
    --invariant-color-darker: #cceed5;

    --fragment-background: #282c34;
    --fragment-foreground: #dbe4eb;
    --fragment-keyword: #cc99cd;
    --fragment-keywordtype: #ab99cd;
    --fragment-keywordflow: #e08000;
    --fragment-token: #7ec699;
    --fragment-comment: #999999;
    --fragment-link: #98c0e3;
    --fragment-preprocessor: #65cabe;
    --fragment-linenumber-color: #cccccc;
    --fragment-linenumber-background: #35393c;
    --fragment-linenumber-border: #1f1f1f;
}

/*Allow utep-orange on navigation tree */
#nav-tree .selected::after {
    content: "";
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 0;
    width: 4px;
    border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
    background: var(--utep-orange);
}

/*Allow utep-orange in navigation tree text*/
#nav-tree .selected a {
    color: var(--utep-orange) !important;
    font-weight: bolder;
    font-weight: 600;
}

.github-corner svg {
    fill: var(--github-icon);
    color: var(--page-background-color);
    width: 72px;
    height: 72px;
}

/*Next Section Button Settings*/
.next_section_button {
    display: block;
    padding: var(--spacing-large) 0 var(--spacing-small) 0;
    color: var(--page-background-color);
    user-select: none;
}

.next_section_button::after {
    /* clearfix */
    content: "";
    clear: both;
    display: table;
}

.next_section_button a {
    overflow: hidden;
    float: right;
    border: 1px solid var(--separator-color);
    padding: var(--spacing-medium) calc(var(--spacing-large) / 2) var(--spacing-medium) var(--spacing-large);
    border-radius: var(--border-radius-medium);
    color: var(--primary-color) !important; /*utep-blue*/
    text-decoration: none;
    background-color: var(--page-background-color); /*utep-orange*/
    transition: color .08s ease-in-out, background-color .1s ease-in-out;
}

.next_section_button a:hover {
    color: var(--utep-blue) !important;
    background-color: var(--utep-orange);
}

.next_section_button a::after {
    content: '〉';
    color: var(--primary-color) !important;
    padding-left: var(--spacing-large);
    display: inline-block;
    transition: color .08s ease-in-out, transform .09s ease-in-out;
}

.next_section_button a:hover::after {
    color: var(--utep-blue) !important;
    transform: translateX(3px);
}