/* -------------------------------------------------------------------------- */
/* Gruvbox palette                                                           */
/* -------------------------------------------------------------------------- */

:root {
  /* Gruvbox dark */
  --gruvbox-bg0: #282828;
  --gruvbox-bg0-hard: #1d2021;
  --gruvbox-bg0-soft: #32302f;
  --gruvbox-bg1: #3c3836;
  --gruvbox-bg2: #504945;
  --gruvbox-bg3: #665c54;
  --gruvbox-bg4: #7c6f64;

  --gruvbox-fg0: #fbf1c7;
  --gruvbox-fg1: #ebdbb2;
  --gruvbox-fg2: #d5c4a1;
  --gruvbox-fg3: #bdae93;
  --gruvbox-fg4: #a89984;

  --gruvbox-red: #cc241d;
  --gruvbox-red-light: #fb4934;
  --gruvbox-green: #98971a;
  --gruvbox-green-light: #b8bb26;
  --gruvbox-yellow: #d79921;
  --gruvbox-yellow-light: #fabd2f;
  --gruvbox-blue: #458588;
  --gruvbox-blue-light: #83a598;
  --gruvbox-purple: #b16286;
  --gruvbox-purple-light: #d3869b;
  --gruvbox-aqua: #689d6a;
  --gruvbox-aqua-light: #8ec07c;
  --gruvbox-orange: #d65d0e;
  --gruvbox-orange-light: #fe8019;
}


/* -------------------------------------------------------------------------- */
/* Material color scheme                                                      */
/* -------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--gruvbox-bg0);
  --md-default-bg-color--light: var(--gruvbox-bg1);
  --md-default-bg-color--lighter: var(--gruvbox-bg2);
  --md-default-bg-color--lightest: var(--gruvbox-bg3);

  --md-default-fg-color: var(--gruvbox-fg1);
  --md-default-fg-color--light: var(--gruvbox-fg2);
  --md-default-fg-color--lighter: var(--gruvbox-fg3);
  --md-default-fg-color--lightest: var(--gruvbox-fg4);

  --md-primary-fg-color: var(--gruvbox-bg0-hard);
  --md-primary-fg-color--light: var(--gruvbox-bg1);
  --md-primary-fg-color--dark: var(--gruvbox-bg0-hard);

  --md-accent-fg-color: var(--gruvbox-orange-light);
  --md-accent-fg-color--transparent: rgba(254, 128, 25, 0.15);

  --md-code-bg-color: var(--gruvbox-bg0-hard);
  --md-code-fg-color: var(--gruvbox-fg1);

  --md-typeset-a-color: var(--gruvbox-blue-light);
}


/* -------------------------------------------------------------------------- */
/* Header and navigation                                                      */
/* -------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] .md-header {
  background-color: var(--gruvbox-bg0-hard);
}

[data-md-color-scheme="slate"] .md-tabs {
  background-color: var(--gruvbox-bg0-hard);
}

[data-md-color-scheme="slate"] .md-tabs__link--active,
[data-md-color-scheme="slate"] .md-tabs__link:hover {
  color: var(--gruvbox-yellow-light);
}


/* -------------------------------------------------------------------------- */
/* Links                                                                      */
/* -------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] .md-typeset a {
  color: var(--gruvbox-blue-light);
}

[data-md-color-scheme="slate"] .md-typeset a:hover {
  color: var(--gruvbox-aqua-light);
}


/* -------------------------------------------------------------------------- */
/* Navigation                                                                 */
/* -------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] .md-nav__link--active {
  color: var(--gruvbox-orange-light);
}

[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: var(--gruvbox-yellow-light);
}


/* -------------------------------------------------------------------------- */
/* Code                                                                       */
/* -------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] .highlight pre,
[data-md-color-scheme="slate"] .md-typeset pre {
  background-color: var(--gruvbox-bg0-hard);
  border: 1px solid var(--gruvbox-bg2);
}

[data-md-color-scheme="slate"] .md-typeset code {
  background-color: var(--gruvbox-bg1);
  color: var(--gruvbox-orange-light);
}

[data-md-color-scheme="slate"] .md-typeset pre code {
  background-color: transparent;
  color: var(--gruvbox-fg1);
}


/* -------------------------------------------------------------------------- */
/* Admonitions                                                                */
/* -------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  background-color: var(--gruvbox-bg0-soft);
  border-color: var(--gruvbox-bg3);
}

[data-md-color-scheme="slate"] .md-typeset .admonition-title,
[data-md-color-scheme="slate"] .md-typeset summary {
  background-color: var(--gruvbox-bg1);
}


/* -------------------------------------------------------------------------- */
/* Tables                                                                     */
/* -------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  border: 1px solid var(--gruvbox-bg2);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: var(--gruvbox-bg1);
  color: var(--gruvbox-yellow-light);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
  border-top-color: var(--gruvbox-bg2);
}


/* -------------------------------------------------------------------------- */
/* Search                                                                     */
/* -------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] .md-search__form {
  background-color: var(--gruvbox-bg1);
}

[data-md-color-scheme="slate"] .md-search__input {
  color: var(--gruvbox-fg1);
}

[data-md-color-scheme="slate"] .md-search-result__meta {
  background-color: var(--gruvbox-bg1);
}


/* -------------------------------------------------------------------------- */
/* Footer                                                                     */
/* -------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] .md-footer {
  background-color: var(--gruvbox-bg0-hard);
}

[data-md-color-scheme="slate"] .md-footer-meta {
  background-color: var(--gruvbox-bg0-hard);
}


/* -------------------------------------------------------------------------- */
/* Scrollbar                                                                  */
/* -------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] {
  scrollbar-color: var(--gruvbox-bg3) var(--gruvbox-bg0-hard);
}

[data-md-color-scheme="slate"] ::selection {
  background-color: var(--gruvbox-yellow);
  color: var(--gruvbox-bg0-hard);
}