@import url("../fonts/akzidenz-grotesk.css");

html {
    /* primary theme color. This will affect the entire websites color scheme: links, arrows, labels, ... */
    --primary-color: #d95e00;
    --primary-dark-color: #ffae00;
    --primary-light-color: #fffb00;
    --on-primary-color: var(--primary-color);
    max-width: 100vw;
    overflow-x: hidden;

    /* page base colors */
    --page-background-color: #ffffff;
    --page-foreground-color: #111111;
    --page-secondary-foreground-color: #161616;

    /* 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 components 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, search result, ... */
    --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: Akzidenz-Grotesk Pro,-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;
    --toc-font-size: 13.4px;
    --code-font-size: 14px; /* affects code, fragment */
    --title-font-size: 28px;

    /* 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: 1050px;
    --table-line-height: 24px;
    --toc-sticky-top: var(--spacing-medium);
    --toc-width: 200px;
    --toc-max-height: calc(100vh - 2 * var(--spacing-medium) - 85px);

    /* colors for various content boxes: @warning, @note, @deprecated @bug */
    --warning-color: #faf3d8;
    --warning-color-dark: #f3a600;
    --warning-color-darker: #5f4204;
    --note-color: #e4f3ff;
    --note-color-dark: #1879C4;
    --note-color-darker: #274a5c;
    --todo-color: #e4dafd;
    --todo-color-dark: #5b2bdd;
    --todo-color-darker: #2a0d72;
    --deprecated-color: #ecf0f3;
    --deprecated-color-dark: #5b6269;
    --deprecated-color-darker: #43454a;
    --bug-color: #f8d1cc;
    --bug-color-dark: #b61825;
    --bug-color-darker: #75070f;
    --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 | inline
     * Visibility of la navegación principal: inline (horizontal) en desktop, block (vertical) en móvil.
     * Se ajusta con media queries más abajo.
     */
    --menu-display: inline-block;

    --menu-focus-foreground: var(--on-primary-color);
    --menu-focus-background: transparent;
    --menu-selected-background: rgba(0,0,0,.05);

    --header-background: #000000;
    --header-foreground: #ffffff;

    /* searchbar colors */
    --searchbar-background: transparent;
    --searchbar-foreground: var(--header-foreground);

    /* 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: #f3f5f8;
    --side-nav-foreground: var(--page-secondary-foreground-color);
    --side-nav-arrow-opacity: 0;
    --side-nav-arrow-hover-opacity: 0.9;

    --toc-background: var(--side-nav-background);
    --toc-foreground: var(--side-nav-foreground);

    /* height of an item in any tree / collapsible 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);

    --animation-duration: .12s
}


@media (prefers-color-scheme: dark) {
    html:not(.light-mode) {
        color-scheme: dark;

        --primary-color: #d95e00;
        --primary-dark-color: #ffae00;
        --primary-light-color: #fffb00;

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

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

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

        --page-background-color: #161616;
        --page-foreground-color: #ffffff;
        --page-secondary-foreground-color: #cdcdcd;
        --separator-color: #38393b;
        --side-nav-background: #0A0A0A;

        --code-background: #111111;

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

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

        --header-background: #000000;
        --fragment-background: #111111;
        --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;
    }
}

/* dark mode variables are defined twice, to support both the dark-mode without and with doxygen-awesome-darkmode-toggle.js */
html.dark-mode {
    color-scheme: dark;

    --primary-color: #d95e00;
    --primary-dark-color: #ffae00;
    --primary-light-color: #fffb00;

    --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: #161616;
    --page-foreground-color: #ffffff;
    --page-secondary-foreground-color: #cdcdcd;
    --separator-color: #38393b;
    --side-nav-background: #0A0A0A;

    --code-background: #111111;

    --tablehead-background: #111111;

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

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

    --header-background: #000000;
    --fragment-background: #111111;
    --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;
}

/*
 Title and top navigation
 */

#projectname {
    display:none
}

#top {
    background: var(--header-background);
    border: none;
}

.tabs, .tabs2, .tabs3 {
    border: none;
    margin-bottom: -1px;
}

.sm-dox a, .sm-dox a:hover, .sm-dox a:focus, .sm-dox a:active, .sm-dox a:visited,
.sm-dox ul a:hover, .sm-dox ul a:focus, .sm-dox ul a:active {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.7em !important;
    font-weight: 500;
    font-style: normal;
}

/*
 Search box
 */

#MSearchBox {
    height: var(--searchbar-height);
    background: var(--searchbar-background);
    border-radius: var(--searchbar-border-radius);
    border: 1px solid #38393b;
    overflow: hidden;
    width: var(--searchbar-width);
    position: relative;
    box-shadow: none;
    display: block;
    margin-top: 0;
}

#MSearchBox.MSearchBoxActive {
    border-color: var(--page-foreground-color);
    box-shadow: inset 0 0 0 1px var(--header-foreground);
}

#main-menu > li:last-child {
    margin-right: 50px;
}

@media screen and (max-width: 972px) {
    #main-menu > li:last-child {
        margin-right: 0px;
        margin-left: 50px;
    }
}

/*
 Tree view
 */

#side-nav {
    padding: 0 !important;
    border: none;
    background: var(--side-nav-background);
    min-width: 8px;
    max-width: 50vw;
}
   
#nav-tree {
    color: var(--side-nav-foreground);
    background: transparent;
    border: none;
    margin-right: 1px;
}

#nav-tree .selected .arrow{
    color: var(--primary-color);
}

.ui-resizable .ui-resizable-handle {
    border: none;
    box-shadow: none;
}


div.header {
    border: none;
    background-color: var(--page-background-color);
    background-image: none;
}

div.header .title {
    font-weight: bold;
    font-style: normal;
}

span.mlabel {
    background: var(--primary-color);
    color: var(--page-foreground-color);
    border: none;
    padding: 4px 9px;
    border-radius: 12px;
    margin-right: var(--spacing-medium);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    font-style: normal;
}
/*
  Footer and nav-path
 */

#nav-path ul {
    background-image: none;
    background: var(--header-background);
    border: none;
    border-bottom: none;
    border-bottom: 0;
    box-shadow: 0 0.75px 0 var(--separator-color);
    font-size: var(--navigation-font-size);
}

.navpath li.footer {
    color: var(--header-foreground);
}

#nav-path li.navelem:after {
    content: '';
    border: 5px solid var(--header-background);
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-top-color: transparent;
    transform: translateY(-1px) scaleY(4.2);
    z-index: 10;
    margin-left: 6px;
}

.github-corner {
    position: fixed;
    right: 0;
    top: 0;
    z-index: 10000;
}

.github-corner svg {
    fill: var(--header-foreground);
    color: var(--header-background);
    width: 64px;
    height: 64px;
}

.title_screenshot {
    border-radius: var(--border-radius-medium);
    display: flex;
    overflow: hidden;
    filter: drop-shadow(0px 3px 10px rgba(0,0,0,0.22));
    margin: var(--spacing-large) 0;
}

.title_screenshot .caption {
    display: none;
}

#nav-sync img {
    filter: grayscale() contrast(3) brightness(1);
}