/* Globals */

:root {
  --sidebar-width: 300px;
  --sidebar-resize-indicator-width: 8px;
  --sidebar-resize-indicator-space: 2px;
  --page-padding: 15px;
  --content-max-width: 750px;
  --menu-bar-height: 50px;
  --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo,
    "DejaVu Sans Mono", monospace, monospace;
  --code-font-size: 0.875em
    /* please adjust the ace font size accordingly in editor.js */;
}

/* Themes */
/*
Themes originate from [Selenized](https://github.com/jan-warchol/selenized/tree/master#readme),
but I have renamed them: Light (White), Warm (Light), Cool (Dark), Dark (Black).
To simplify editing, each theme defines a subset of its terminal colors.
The theme also defines `--inline-code-color` due to code block inversions in dark mode.
Light themes use `var(--brightred)` and dark themes use `var(--blue)`.
The `html` block that follows these themes uses those terminal colors to define the mdBook colors.
*/

:root[class^="light"] {
  --bg: #ffffff;
  --fg: #474747;
  --color-scheme: light;

  --inline-code-color: var(--brightred);
  --brightred: #bf0000;

  --black: #ebebeb;
  --brightblack: #cdcdcd;
  --white: #878787;
  --brightwhite: #282828;

  --yellow: #c49700;
  --blue: #0064e4;
  --cyan: #00ad9c;
}

:root[class^="warm"] {
  --bg: #fbf3db;
  --fg: #53676d;
  --color-scheme: light;

  --inline-code-color: var(--brightred);
  --brightred: #cc1729;

  --black: #e9e4d0;
  --brightblack: #cfcebe;
  --white: #909995;
  --brightwhite: #3a4d53;

  --yellow: #ad8900;
  --blue: #0072d4;
  --cyan: #009c8f;
}

.cool {
  --bg: #103c48;
  --fg: #adbcbc;
  --color-scheme: dark;

  --inline-code-color: var(--blue);

  --black: #174956;
  --brightblack: #325b66;
  --white: #72898f;
  --brightwhite: #cad8d9;

  --yellow: #dbb32d;
  --blue: #4695f7;
  --cyan: #41c7b9;
}

.dark {
  --bg: #181818;
  --fg: #b9b9b9;
  --color-scheme: dark;

  --inline-code-color: var(--blue);

  --black: #252525;
  --brightblack: #3b3b3b;
  --white: #777777;
  --brightwhite: #dedede;

  --yellow: #dbb32d;
  --blue: #368aeb;
  --cyan: #3fc5b7;
}

/* Invert code blocks for custom dark themes */
.dark .hljs,
.cool .hljs {
  filter: invert(100%);
}

/* System (prefers-color-scheme) combinations. TODO: PostCSS step for sharing. */
@media (prefers-color-scheme: dark) {
  :root[class$="-cool"] {
    --bg: #103c48;
    --fg: #adbcbc;
    --color-scheme: dark;

    --inline-code-color: var(--blue);

    --black: #174956;
    --brightblack: #325b66;
    --white: #72898f;
    --brightwhite: #cad8d9;

    --yellow: #dbb32d;
    --blue: #4695f7;
    --cyan: #41c7b9;
  }

  :root[class$="-dark"] {
    --bg: #181818;
    --fg: #b9b9b9;
    --color-scheme: dark;

    --inline-code-color: var(--blue);

    --black: #252525;
    --brightblack: #3b3b3b;
    --white: #777777;
    --brightwhite: #dedede;

    --yellow: #dbb32d;
    --blue: #368aeb;
    --cyan: #3fc5b7;
  }

  /* Invert code blocks for custom dark themes */
  :root[class$="-cool"] .hljs,
  :root[class$="-dark"] .hljs {
    filter: invert(100%);
  }
}

/* Use the dark theme in no-js case. */
@media (prefers-color-scheme: dark) {
  /* Default light */
  .light.no-js {
    /* Copies default dark */
    --bg: #181818;
    --fg: #b9b9b9;
    --color-scheme: dark;

    --inline-code-color: var(--blue);

    --black: #252525;
    --brightblack: #3b3b3b;
    --white: #777777;
    --brightwhite: #dedede;

    --yellow: #dbb32d;
    --blue: #368aeb;
    --cyan: #3fc5b7;
  }

  /* And invert code block */
  .light.no-js .hljs {
    filter: invert(100%);
  }
}

html {
  --sidebar-bg: var(--black);
  --sidebar-fg: var(--brightwhite);
  --sidebar-non-existant: var(--white);
  --sidebar-active: var(--blue);
  --sidebar-spacer: var(--white);

  --scrollbar: var(--fg);

  --icons: var(--white);
  --icons-hover: var(--fg);

  --links: var(--blue);

  --theme-popup-bg: var(--black);
  --theme-popup-border: var(--white);
  --theme-hover: var(--brightblack);

  --quote-bg: var(--black);
  --quote-border: var(--brightblack);

  --warning-border: var(--yellow);

  --table-border-color: var(--white);
  --table-header-bg: var(--brightblack);
  --table-alternate-bg: var(--black);

  --searchbar-border-color: var(--black);
  --searchbar-bg: var(--fg);
  --searchbar-fg: var(--bg);
  --searchbar-shadow-color: var(--brightblack);
  --searchresults-header-fg: var(--white);
  --searchresults-border-color: var(--white);
  --searchresults-li-bg: var(--brightwhite);
  --search-mark-bg: var(--cyan);
}