/* Theme configuration */
html {
  /* primary theme color. This will affect the entire websites color scheme: links, arrows, labels, ... */
  --primary-color: var(--color-b500);
  --primary-dark-color: var(--color-b800);
  --primary-light-color: var(--color-b200);

  /* page base colors */
  --page-background-color: var(--color-w75);
  --page-foreground-color: var(--color-g400);
  --page-secondary-foreground-color: var(--color-g200);

  /* color for all separators on the website: hr, borders, ... */
  --separator-color: var(--color-border-1);

  /* border radius for all rounded components. Will affect many components, like dropdowns, memitems, codeblocks, ... */
  --border-radius-small: var(--border-radius-xs);
  --border-radius-medium: var(--border-radius-s);
  --border-radius-large: var(--border-radius-m);

  /* default spacings. Most components reference these values for spacing, to provide uniform spacing on the page. */
  --spacing-small: var(--spacing-01);
  --spacing-medium: var(--spacing-03);
  --spacing-large: var(--spacing-05);

  /* default box shadow used for raising an element above the normal content. Used in dropdowns, search result, ... */
  --box-shadow: none;

  /* 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: var(--base-font-family);
  --font-family-monospace: "Roboto Mono", ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;

  /* font sizes */
  --page-font-size: var(--font-size-base);
  --navigation-font-size: var(--font-size-s);
  --toc-font-size: var(--font-size-s);
  --code-font-size: var(--font-size-s); /* affects code, fragment */
  --title-font-size: var(--font-size-h4);

  /* content text properties. These only affect the page content, not the navigation or any other ui elements */
  --content-line-height: 1.4rem;

  /* 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: auto;
  --table-line-height: 30px;
  --toc-sticky-top: var(--spacing-medium);

  /* colors for various content boxes: @warning, @note, @deprecated @bug */
  --warning-color: var(--color-wg50);
  --warning-color-dark: var(--color-wg300);
  --warning-color-darker: --color-wg400;
  --note-color: var(--color-b100);
  --note-color-dark: var(--color-b400);
  --note-color-darker: var(--color-b800);
  --todo-color: #e4dafd;
  --todo-color-dark: #5b2bdd;
  --todo-color-darker: #2a0d72;
  --deprecated-color: var(--color-g50);
  --deprecated-color-dark: var(--color-g300);
  --deprecated-color-darker: var(--color-g500);
  --bug-color: var(--color-d50);
  --bug-color-dark: var(--color-d300);
  --bug-color-darker: var(--color-d400);
  --invariant-color: var(--color-s50);
  --invariant-color-dark: var(--color-s300);
  --invariant-color-darker: var(--color-s400);

  /* blockquote colors */
  --blockquote-background: var(--color-g50);
  --blockquote-foreground: var(--color-g200);

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

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

  /* fragment colors */
  --fragment-background: var(--color-w50);
  --fragment-foreground: #37474F;
  --fragment-keyword: #b433a5;
  --fragment-keywordtype: #8258b3;
  --fragment-keywordflow: #d67129;
  --fragment-token: var(--color-s300);
  --fragment-comment: #969696;
  --fragment-link: var(--color-primary);
  --fragment-preprocessor: #46aaa5;
  --fragment-linenumber-color: var(--color-g200);
  --fragment-linenumber-background: var(--color-w300);
  --fragment-linenumber-border: var(--color-border-1);
  --fragment-lineheight: var(--line-height-base);

  /* sidebar navigation (treeview) colors */
  --side-nav-background: var(--color-w200);
  --side-nav-foreground: var(--page-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: 1rem;

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

  --animation-duration: .12s
}

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

      --primary-color: var(--color-b400);
      --primary-dark-color: var(--color-b200);
      --primary-light-color: var(--color-b600);

      --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: #1C1D1F;
      --page-foreground-color: #d2dbde;
      --page-secondary-foreground-color: #859399;
      --separator-color: #38393b;
      --side-nav-background: #252628;

      --code-background: #2a2c2f;

      --tablehead-background: #2a2c2f;
  
      --blockquote-background: #222325;
      --blockquote-foreground: #7e8c92;

      --warning-color: var(--color-wg900);
      --warning-color-dark: var(--color-wg300);
      --warning-color-darker: var(--color-wg50);
      --note-color: var(--color-b900);
      --note-color-dark: var(--color-b400);
      --note-color-darker: var(--color-b50);
      --todo-color: #2a2536;
      --todo-color-dark: #7661b3;
      --todo-color-darker: #ae9ed6;
      --deprecated-color: var(--color-g300);
      --deprecated-color-dark: var(--color-g100);
      --deprecated-color-darker: var(--color-g50);
      --bug-color: #2e1917;
      --bug-color-dark: #ad2617;
      --bug-color-darker: #f5b1aa;
      --invariant-color: var(--color-s500);
      --invariant-color-dark: var(--color-s300);
      --invariant-color-darker: var(--color-s50);

      --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;
  }
}

/* Base elements */
body, table, div, p, dl {
	font-weight: 300;
}

/* General layout */
#projectlogo {
  img {
    width: 100px;
    height: auto;
  }
}
#projectname {
  a {
    color: var(--page-foreground-color)!important;
    &:hover {
      text-decoration: none;
    }
  }
}

#titlearea {
  padding: var(--spacing-medium) var(--spacing-medium);
}

/* Hiararchy */
div.ingroups {
  font-size: var(--font-size-xxs);
  line-height: var(--line-height-xxs);
}

/* Tables*/
h2.memtitle {
  box-shadow: none;
}
div.memdoc {
  background-color: transparent;
}

.params {
  td {
    line-height: var(--table-line-height);
  }
}

/* Title */
div.header .title {
  margin: 0;
}

/* Contents */
.contents li {
  margin: 0.2em 0;
}

/* icons */
.icondoc,
.iconfopen,
.iconfclosed {
  background-repeat: no-repeat;
}

/* Search */
iframe#MSearchResults .SRPage .SREntry {
  font-size: var(--font-size-base)!important;
  padding: var(--spacing-01) var(--spacing-03);
}

/* Scrollbars */
#nav-tree,
div.fragment,
pre.fragment,
div.memproto,
.contents center,
.contents .center,
.contents table:not(.memberdecls):not(.mlabels):not(.fieldtable):not(.memname) tbody,
div.contents .toc,
.contents .dotgraph,
.contents .tabs-overview-container {
    scrollbar-width: inherit;
}