/* *** START DARK AND LIGHT MODE *** */
/* Set dark mode colors */
[data-md-color-scheme="slate"] {
    --border: 1px solid hsla(300, 3.7%, 18%, 1);
    --link-hover: hsla(0, 0%, 70%, 1);
    --md-default-bg-color: hsla(0, 0%, 5%, 1);
    --md-default-fg-color: hsla(0, 0%, 90%, 1);
    --md-typeset-a-color: #ff6700;
    --md-footer-bg-color: var(--md-default-bg-color); /* Footer background */
}

/* Apply dark mode colors */
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-header nav,
[data-md-color-scheme="slate"] .md-footer-meta {
    background-color: var(--md-default-bg-color);
}

/* Hyperlink color on hover and focus  */
[data-md-color-scheme="slate"] .md-content .md-typeset a:hover,
[data-md-color-scheme="slate"] .md-content .md-typeset a:active,
[data-md-color-scheme="slate"] .md-content .md-typeset a:focus {
    color: var(--link-hover);
}

/* Apply dark mode borders */
[data-md-color-scheme="slate"] .md-header {
    border-bottom: var(--border);
    box-shadow: none;
}
[data-md-color-scheme="slate"] nav.md-tabs,
[data-md-color-scheme="slate"] .md-footer,
[data-md-color-scheme="slate"] .md-footer-meta {
    border-top: var(--border);
}
[data-md-color-scheme="slate"] .md-grid,
[data-md-color-scheme="slate"] .md-content {
    border-left: var(--border);
    border-right: var(--border);
    margin-top: 0;
}

/* Light mode styles */
[data-md-color-scheme="default"] {
    --border: 1px solid rgba(228, 231, 228, 0.98);
    --link-hover: hsla(0, 0%, 45%, 1);
    --md-default-bg-color: hsla(0, 0%, 98%, 1);
    --md-default-fg-color: hsla(0, 0%, 5%, 1);
    --md-typeset-a-color: #ff6700;
    --md-footer-bg-color: var(--md-default-bg-color);
    --md-footer-fg-color: var(--md-default-fg-color);
    --md-footer-fg-color--lighter: var(--md-default-fg-color);
    --md-primary-bg-color: var(--md-default-fg-color);
}

/* Apply light mode colors */
[data-md-color-scheme="default"] .md-header,
[data-md-color-scheme="default"] .md-header nav,
[data-md-color-scheme="default"] .md-footer-meta {
    background-color: var(--md-default-bg-color);
}

/* Hyperlink color on hover and focus */
[data-md-color-scheme="default"] .md-content .md-typeset a:hover,
[data-md-color-scheme="default"] .md-content .md-typeset a:active,
[data-md-color-scheme="default"] .md-content .md-typeset a:focus {
    color: var(--link-hover);
}

/* Apply light mode borders */
[data-md-color-scheme="default"] .md-header {
    border-bottom: var(--border);
    box-shadow: none;
}
[data-md-color-scheme="default"] nav.md-tabs,
[data-md-color-scheme="default"] .md-footer,
[data-md-color-scheme="default"] .md-footer-meta {
    border-top: var(--border);
}
[data-md-color-scheme="default"] .md-grid,
[data-md-color-scheme="default"] .md-content {
    border-left: var(--border);
    border-right: var(--border);
    margin-top: 0;
}

/* *** END START DARK AND LIGHT MODE *** */

/* *** START NAVIGATION *** */

/* Remove left margin from before site title */
[dir="ltr"] .md-header__title {
    margin-left: 0;
}
/* *** END NAVIGATION *** */

/* *** START SEARCH BAR *** */
/* Remove default grey background from behind "Type to start searching" */
nav .md-search-result__meta {
    background: inherit;
}

/* Make sure the search bar color matches the default color */
.md-search__form {
    background-color: inherit;
}

/* Make sure Search placeholder matches the default color */
.md-search__input::placeholder {
    color: inherit;
}

/* Make sure the search bar has a uniform background color */
.md-search__form nav.md-search__options {
    background-color: transparent;
}

/* Mobile: Change border around search bar */
@media screen and (max-width: 60em) {
    [data-md-color-scheme="default"]
        [data-md-toggle="search"]:checked
        ~ .md-header
        .md-search__form {
        border-bottom: 1px solid var(--border);
        box-shadow: none;
    }

    [data-md-color-scheme="slate"]
        [data-md-toggle="search"]:checked
        ~ .md-header
        .md-search__form {
        border-bottom: var(--border);
        box-shadow: none;
    }
}
/* *** END SEARCH BAR *** */

/* *** START FOOTER *** */
html .md-footer-meta.md-typeset .md-copyright > a {
    color: var(--md-default-fg-color);
}
/* *** END FOOTER *** */

/* First unset all rules that break Chrome styling */
.md-typeset pre > code,
.md-search__scrollwrap,
.md-sidebar__scrollwrap {
    scrollbar-color: unset;
    scrollbar-width: unset;
}
.md-typeset pre > code:hover,
.md-search__scrollwrap:hover,
.md-sidebar__scrollwrap:focus-within,
.md-sidebar__scrollwrap:hover {
    scrollbar-color: unset;
}
.md-tooltip2__inner {
    scrollbar-width: unset;
}

/*  */
.md-nav--primary .md-nav__title[for="__drawer"] {
    background-color: inherit;
}