html {
  background-color: transparent;
}

[data-md-component="announce"] .twemoji {
  color: var(--md-primary-fg-color);
}

/* Dark mode changes */
[data-md-color-scheme="dracula"] {

  --md-text-color: var(--md-default-fg-color);
  background-color: var(--md-default-bg-color);

  // Footer color shades
  --md-footer-bg-color:                transparent;
  --md-footer-bg-color--dark:          var(--md-default-bg-color--darkest);

  // Header colors
  --md-header-fg-color: var(--md-text-color);
  --md-header-bg-color: var(--md-default-bg-color--darkest);

  // Header
  .md-header {
    color: var(--md-text-color);
    background-color: var(--md-header-bg-color);
    border-bottom: px2rem(1px) solid var(--md-primary-fg-color);

    &[data-md-state=shadow] {
        box-shadow: 0 0 px2rem(4px) rgba(0,0,0,.15),
                    0 0 px2rem(4px) px2rem(8px) rgba(0,0,0,.2);
    }
  }

  .md-top {
    background-color: var(--md-default-bg-color--dark);

    &:hover {
      background-color: var(--md-primary-fg-color);
    }
  }

  // Tabs
  .md-tabs {
    color: var(--md-text-color);
    background-color: var(--md-primary-fg-color--transparent);

    &__link--active {
        color: var(--md-primary-fg-color);
    }

    &__link:hover {
        color: var(--md-accent-fg-color);
    }
  }

  // Hero
  .md-hero {
    color: var(--md-text-color);
    background-color: var(--md-primary-fg-color--transparent);
  }

  // Navigation
  .md-nav__source {
    color: var(--md-text-color);
  }

  .md-nav__link[data-md-state=blur] {
    color: var(--md-default-fg-color--light);
  }

  .md-nav__item .md-nav__link--active {
    color: var(--md-primary-fg-color);
  }

  .md-nav__link {
    &:focus,
    &:hover {
      color: var(--md-accent-fg-color);
    }
  }

  @include break-to-device(tablet) {

    .md-nav--primary .md-nav__item--active > .md-nav__link:not(:hover) {
      color: var(--md-primary-fg-color);
    }

    // Site title in main navigation
    .md-nav--primary .md-nav__title {
      color: var(--md-text-color);
      background-color: var(--md-header-bg-color);
      border-bottom: px2rem(1px) solid var(--md-primary-fg-color);
    }
  }

  @include break-to-device(tablet portrait) {

    // Repository containing source
    .md-nav__source {
      color: var(--md-text-color);
      background-color: var(--md-primary-fg-color--transparent);
    }

    .md-nav .md-nav__title {
      color: var(--md-text-color);
      background-color: var(--md-header-bg-color);
      border-bottom: px2rem(1px) solid var(--md-primary-fg-color);
    }
  }

  // Search
  .md-search__input {
    color: var(--md-text-color);
    background-color: var(--md-accent-bg-color--light);

    &:hover {
      background-color: var(--md-default-bg-color);
    }

    ~ .md-search__icon {
      color: var(--md-text-color);
    }
    &::placeholder {
      color: var(--md-default-fg-color--light);
    }
  }

  .md-search__overlay, .md-overlay {
    background-color: var(--md-default-bg-color--light);
  }

  // Footer
  .md-footer {
    &-nav__direction {
      color: var(--md-primary-fg-color);
    }

    &-meta {
      border-top: px2rem(1px) solid var(--md-primary-fg-color);
    }
  }

  // Announcements
  [data-md-component="announce"] {
    background-color: var(--md-default-bg-color--ultra-dark);
  }
}

/* Don't force capitalization of `H5` elements. */
.md-typeset {
  h5 {
    color: var(--md-text-color);
    text-transform: none;
  }
}

.md-typeset__scrollwrap,
.md-sidebar__scrollwrap,
.md-search__scrollwrap,
.md-typeset pre > code,
.md-typeset div.mermaid,
.md-typeset mermaid-div,
.md-typeset pre.arithmatex,
.md-typeset div.arithmatex {
  // Override native scrollbar styles
  &::-webkit-scrollbar {
    width: px2rem(4px);
    height: px2rem(4px);
  }

  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }

  // Scrollbar thumb
  &::-webkit-scrollbar-thumb {
    background-color: var(--md-default-fg-color--lighter);

    // Hovered scrollbar thumb
    &:hover {
      background-color: var(--md-accent-fg-color);
    }
  }

  // Firefox scrollbar and thumb
  scrollbar-color: var(--md-default-fg-color--lighter) transparent;
  scrollbar-width: thin;

  // Firefox hovered scrollbar and thumb
  &:hover {
    scrollbar-color: var(--md-accent-fg-color) transparent;
  }
}
