/* Globals */
/*
 * MOD: We have to modify this fairly heavily.
 * To update, just make sure that we have all the new variables.
 * See @frequency-chain/style-guide for the style variables
 */

:root {
  /* Extra Variables */
  --sidebar-width-mobile: calc(100vw - 50px);
  --header-height: 5px;

  /* Original Variables */
  --sidebar-width: 360px;
  --sidebar-resize-indicator-width: 4px;
  --sidebar-resize-indicator-space: 2px;
  --page-padding: 15px;
  --content-max-width: 1080px;
  --menu-bar-height: 50px;
  --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo,
    "DejaVu Sans Mono", monospace, monospace;
  --code-font-size: 12px;
}

/* Themes */

.coal {
  --bg: var(--color-black);
  --fg: var(--white);
  --headers: var(--white);

  --sidebar-bg: var(--white);
  --sidebar-fg: var(--color-darkPurple);
  --sidebar-non-existant: var(--sidebar-fg);
  --sidebar-active: var(--color-primary);
  --sidebar-spacer: var(--color-purple75);

  --scrollbar: var(--sidebar-fg);

  --icons: var(--color-white);
  --icons-hover: var(--color-purple50);

  --links: var(--color-purple75);
  --links-hover: var(--color-purple75);

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

  --theme-popup-fg: var(--sidebar-fg);
  --theme-popup-bg: var(--sidebar-bg);
  --theme-popup-border: var(--color-purple75);
  --theme-hover: var(--color-purple75);

  --quote-bg: hsl(234, 21%, 18%);
  --quote-border: hsl(234, 21%, 23%);

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

  --table-border-color: var(--color-gray1);
  --table-header-bg: var(--color-gray1);
  --table-header-fg: var(--color-white);
  --table-alternate-bg: var(--color-gray1);
  --table-alternate-fg: var(--color-white);

  --searchbar-border-color: #aaa;
  --searchbar-bg: var(--white);
  --searchbar-fg: var(--color-black);
  --searchbar-shadow-color: #aaa;
  --searchresults-header-fg: var(--headers);
  --searchresults-border-color: var(--headers);
  --searchresults-li-bg: var(--color-gray1);
  --search-mark-bg: var(--color-gray1);

  --color-scheme: dark;

  --page-nav-fg: var(--headers);
  --page-nav-bg: var(--sidebar-bg);

  /* Nav button variant */
  --button-nav-bg: var(--color-white);
  --button-nav-fg: var(--color-black);
  --button-nav-hover-fg: var(--white);
  --button-nav-hover-bg: var(--color-purple50);
  /* Outlined button variant */
  --button-outlined-bg: none;
  --button-outlined-text: var(--color-white);
  --button-outlined-border: var(--color-white);
  --button-outlined-hover-text: var(--color-purple50);
  --button-outlined-hover-border: var(--color-purple50);

  /* Same as `--icons` */
  --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg)
    brightness(87%) contrast(82%);
  /* Same as `--sidebar-active` */
  --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%)
    hue-rotate(167deg) brightness(98%) contrast(89%);

  --footnote-highlight: var(--links);

  --overlay-bg: rgba(33, 40, 48, 0.4);
}

.light,
html:not(.js) {
  --bg: #fff;
  --fg: #000;
  --headers: var(--color-darkPurple);

  --sidebar-bg: var(--color-black);
  --sidebar-fg: var(--white);
  --sidebar-non-existant: var(--sidebar-fg);
  --sidebar-active: var(--color-purple75);
  --sidebar-spacer: var(--color-gray1);

  --scrollbar: var(--sidebar-fg);

  --icons: var(--color-darkPurple);
  --icons-hover: var(--color-primary);

  --links: var(--color-primary);
  --links-hover: var(--sidebar-active);

  --inline-code-color: #301900;

  --theme-popup-fg: var(--sidebar-fg);
  --theme-popup-bg: var(--sidebar-bg);
  --theme-popup-border: var(--links);
  --theme-hover: var(--color-primary);

  --quote-bg: hsl(197, 37%, 96%);
  --quote-border: hsl(197, 37%, 91%);

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

  --table-border-color: var(--sidebar-bg);
  --table-header-fg: var(--color-black);
  --table-header-bg: var(--color-gray2);
  --table-alternate-fg: var(--color-black);
  --table-alternate-bg: var(--color-gray3);

  --searchbar-border-color: #aaa;
  --searchbar-bg: var(--white);
  --searchbar-fg: var(--color-black);
  --searchbar-shadow-color: #aaa;
  --searchresults-header-fg: var(--headers);
  --searchresults-border-color: var(--headers);
  --searchresults-li-bg: var(--color-gray3);
  --search-mark-bg: var(--color-gray3);

  --color-scheme: light;

  --page-nav-fg: var(--headers);
  --page-nav-bg: var(--sidebar-bg);

  /* Nav button variant */
  --button-nav-bg: var(--color-black);
  --button-nav-fg: var(--color-white);
  --button-nav-hover-fg: var(--color-white);
  --button-nav-hover-bg: var(--color-primary);
  /* Outlined button variant */
  --button-outlined-bg: none;
  --button-outlined-text: var(--color-black);
  --button-outlined-border: var(--color-black);
  --button-outlined-hover-text: var(--color-primary);
  --button-outlined-hover-border: var(--color-primary);

  /* Same as `--icons` */
  --copy-button-filter: invert(45.49%);
  /* Same as `--sidebar-active` */
  --copy-button-filter-hover: invert(14%) sepia(93%) saturate(4250%)
    hue-rotate(243deg) brightness(99%) contrast(130%);

  --footnote-highlight: var(--links);

  --overlay-bg: rgba(200, 200, 205, 0.4);
}

@media (prefers-color-scheme: dark) {
  html:not(.js) {
    --bg: var(--color-black);
    --fg: var(--white);
    --headers: var(--white);

    --sidebar-bg: var(--color-darkPurple);
    --sidebar-fg: var(--white);
    --sidebar-non-existant: var(--sidebar-fg);
    --sidebar-active: var(--color-purple75);
    --sidebar-spacer: var(-color-gray1);

    --scrollbar: var(--sidebar-fg);

    --icons: var(--color-white);
    --icons-hover: var(--color-purple50);

    --links: var(--color-purple75);
    --links-hover: var(--color-purple75);

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

    --theme-popup-fg: var(--sidebar-fg);
    --theme-popup-bg: var(--sidebar-bg);
    --theme-popup-border: var(--color-purple75);
    --theme-hover: var(--color-purple75);

    --quote-bg: hsl(234, 21%, 18%);
    --quote-border: hsl(234, 21%, 23%);

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

    --table-border-color: var(--color-gray1);
    --table-header-bg: var(--color-gray1);
    --table-header-fg: var(--color-white);
    --table-alternate-bg: var(--color-gray1);
    --table-alternate-fg: var(--color-white);

    --searchbar-border-color: #aaa;
    --searchbar-bg: var(--white);
    --searchbar-fg: var(--color-black);
    --searchbar-shadow-color: #aaa;
    --searchresults-header-fg: var(--headers);
    --searchresults-border-color: var(--headers);
    --searchresults-li-bg: var(--color-gray1);
    --search-mark-bg: var(--color-gray1);

    --color-scheme: dark;

    --page-nav-fg: var(--headers);
    --page-nav-bg: var(--sidebar-bg);

    /* Nav button variant */
    --button-nav-bg: var(--color-white);
    --button-nav-fg: var(--color-black);
    --button-nav-hover-fg: var(--white);
    --button-nav-hover-bg: var(--color-purple50);
    /* Outlined button variant */
    --button-outlined-bg: none;
    --button-outlined-text: var(--color-white);
    --button-outlined-border: var(--color-white);
    --button-outlined-hover-text: var(--color-purple50);
    --button-outlined-hover-border: var(--color-purple50);

    /* Same as `--icons` */
    --copy-button-filter: invert(26%) sepia(8%) saturate(575%)
      hue-rotate(169deg) brightness(87%) contrast(82%);
    /* Same as `--sidebar-active` */
    --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%)
      hue-rotate(167deg) brightness(98%) contrast(89%);

    --footnote-highlight: var(--links);

    --overlay-bg: rgba(33, 40, 48, 0.4);
  }
}