/* Global customization */

:root {
  --code-max-height: 60rem;

  .gdoc-header {
    box-shadow: 0px 2px 4px 0px var(--header-shadow-color);
    z-index: 0;
  }

  .container {
    column-gap: 2rem;
  }

  main.container {
    padding: 0 0;
  }

  .gdoc-page {
    padding: 1rem 1rem;
  }

  .gdoc-page__header {
    font-size: 14px;
    background-color: transparent;
  }

  .gdoc-search__list {
    background: var(--accent-color-lite);
  }

  .gdoc-nav--main>ul>li>ul>li {
    font-size: 13px;
    padding-left: .5rem;
    /* border-bottom: 1px solid var(--code-accent-color-lite); */
  }

  .gdoc-nav {
    background-color: var(--nav-background);
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .gdoc-nav nav {
    width: 16rem;
    padding: 1rem 0 1rem 0;
  }
  
  .gdoc-nav--main>ul>li>span,
  .gdoc-nav--main>ul>li>span>a,
  .gdoc-nav--main>ul>li>label,
  .gdoc-nav--main>ul>li>label>a {
    font-weight: normal;
    line-height: 1.5rem;
    font-size: 14px;
    border-bottom: 1px solid var(--code-accent-color-lite);
    padding: 4px 4px 4px 8px;
  }

  .gdoc-nav--main>ul>li>span:hover,
  .gdoc-nav--main>ul>li>span>a:hover,
  .gdoc-nav--main>ul>li>label:hover,
  .gdoc-nav--main>ul>li>label>a:hover { 
    background-color: var(--nav-highlight);
  }

  .gdoc-nav__entry:hover,
  .gdoc-nav__entry.is-active,
  .gdoc-language__entry:hover,
  .gdoc-language__entry.is-active {
    text-decoration: underline;
    text-decoration-style: solid !important
  }

  .gdoc-page__header a,
  .gdoc-page__header a:visited,
  .gdoc-page__footer a,
  .gdoc-page__footer a:visited {
    color: var(--header-link-color);
  }
}

/* Light mode theming */
:root,
:root[color-theme="light"] {
  --header-background: #ffffff;
  --header-font-color: #1a2733;
  --header-link-color: #1b90ff;
  --header-link-color-visited: #89d1ff;
  --header-shadow-color: rgba(0, 0, 0, 0.1);

  --body-background: #f5f6f7;
  --body-font-color: #343a40;

  --nav-background: #f8f9fa;
  --nav-highlight: #eaecee;
  --mark-color: #ffab00;

  --button-background: #0a6ed1;
  --button-border-color: transparent;

  --link-color: #0070f2;
  --link-color-visited: #7858ff;

  --code-background: #f1f6fb;
  --code-accent-color: #eaecee;
  --code-accent-color-lite: #eaecee;
  --code-font-color: #343a40;

  --code-copy-background: #f3f8ff;
  --code-copy-font-color: #343a40;
  --code-copy-border-color: transparent;
  --code-copy-success-color: #36a41d;

  --accent-color: #eaecee;
  --accent-color-lite: #eaecee;

  --control-icons: #7993ac;

  --footer-background: #f5f6f7;
  --footer-font-color: #7993ac;
  --footer-link-color: #1b90ff;
  --footer-link-color-visited: #89d1ff;
}

@media (prefers-color-scheme: light) {
  :root {
    --header-background: #ffffff;
    --header-font-color: #1a2733;
    --header-link-color: #1b90ff;
    --header-link-color-visited: #89d1ff;
    --header-shadow-color: rgba(0, 0, 0, 0.1);

    --body-background: #f5f6f7;
    --body-font-color: #343a40;

    --nav-background: #f8f9fa;
    --nav-highlight: #eaecee;
    --mark-color: #ffab00;

    --button-background: #0a6ed1;
    --button-border-color: transparent;

    --link-color: #0070f2;
    --link-color-visited: #7858ff;

    --code-background: #f1f6fb;
    --code-accent-color: #eaecee;
    --code-accent-color-lite: #eaecee;
    --code-font-color: #343a40;

    --code-copy-background: #f3f8ff;
    --code-copy-font-color: #343a40;
    --code-copy-border-color: transparent;
    --code-copy-success-color: #36a41d;

    --accent-color: #eaecee;
    --accent-color-lite: #eaecee;

    --control-icons: #7993ac;

    --footer-background: #f5f6f7;
    --footer-font-color: #7993ac;
    --footer-link-color: #1b90ff;
    --footer-link-color-visited: #89d1ff;
  }
}
/* Dark mode theming */
:root[color-theme="dark"] {
  --header-background: #232a31;
  --header-font-color: #e5e5e5;
  --header-link-color: #6ca8e3;
  --header-link-color-visited: #6367de;
  --header-shadow-color: rgba(128, 128, 128, 0.1);

  --body-background: #29313a;
  --body-font-color: #f7f7f7;

  --nav-background: #2a343c;
  --nav-highlight: #3e4247;
  --mark-color: #ffab00;

  --button-background: #62cb97;
  --button-border-color: #4ec58a;

  --link-color: #6ca8e3;
  --link-color-visited: #6367de;

  --code-background: #2f353a;
  --code-accent-color: #2b3035;
  --code-accent-color-lite: #3e4247;
  --code-font-color: #b9b9b9;

  --code-copy-background: #343a40;
  --code-copy-font-color: #6b7784;
  --code-copy-border-color: #6b7784;
  --code-copy-success-color: #37905c;

  --accent-color: #2b3035;
  --accent-color-lite: #3e4247;

  --control-icons: #b2bac1;

  --footer-background: #232a31;
  --footer-font-color: #e5e5e5;
  --footer-link-color: #ffcc5c;
  --footer-link-color-visited: #ffcc5c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --header-background: #232a31;
    --header-font-color: #e5e5e5;
    --header-link-color: #6ca8e3;
    --header-link-color-visited: #6367de;
    --header-shadow-color: rgba(128, 128, 128, 0.1);

    --body-background: #29313a;
    --body-font-color: #f7f7f7;

    --nav-background: #2a343c;
    --nav-highlight: #3e4247;
    --mark-color: #ffab00;

    --button-background: #62cb97;
    --button-border-color: #4ec58a;

    --link-color: #6ca8e3;
    --link-color-visited: #6367de;

    --code-background: #3e4247;
    --code-accent-color: #2b3035;
    --code-accent-color-lite: #3e4247;
    --code-font-color: #b9b9b9;

    --code-copy-background: #3e4247;
    --code-copy-font-color: #6b7784;
    --code-copy-border-color: #6b7784;
    --code-copy-success-color: #37905c;

    --accent-color: #2b3035;
    --accent-color-lite: #3e4247;

    --control-icons: #b2bac1;

    --footer-background: #232a31;
    --footer-font-color: #e5e5e5;
    --footer-link-color: #6ca8e3;
    --footer-link-color-visited: #6367de;
  }
}