:root {
    /* Same as @sas/product-tokens variables */
    --font-family: "AnovaUI", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    --light-color-action-background-emphasis-normal: hsl(205, 97%, 35%);
    --light-color-action-border-standard-normal: hsl(216, 13%, 53%);
    --light-color-action-background-subtle-normal: hsla(0, 100%, 100%, 0);
    --light-color-action-background-standard-selected: hsla(216, 13%, 53%, 0.24);
    --light-color-action-background-on-off-normal: hsl(0, 100%, 100%);
    --light-color-action-text-on-off-normal: hsl(0, 0%, 0%);

    --dark-color-action-background-emphasis-normal: hsla(205, 97%, 63%, 0.08);
    --dark-color-action-border-standard-normal: hsl(205, 25%, 70%);
    --dark-color-action-background-subtle-normal: hsla(0, 100%, 100%, 0);
    --dark-color-action-background-standard-selected: hsla(205, 25%, 70%, 0.24);
    --dark-color-action-background-on-off-normal: hsl(205, 90%, 8%);
    --dark-color-action-text-on-off-normal: hsl(0, 100%, 100%);
}

@media (prefers-color-scheme: light) {
    :root {
        --color-action-background-emphasis-normal: var(--light-color-action-background-emphasis-normal);
        --color-action-border-standard-normal: var(--light-color-action-border-standard-normal);
        --color-action-background-subtle-normal: var(--light-color-action-background-subtle-normal);
        --color-action-background-standard-selected: var(--light-color-action-background-standard-selected);
        --color-action-background-on-off-normal: var(--light-color-action-background-on-off-normal);
        --color-action-text-on-off-normal: var(--light-color-action-text-on-off-normal);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-action-background-emphasis-normal: var(--dark-color-action-background-emphasis-normal);
        --color-action-border-standard-normal: var(--dark-color-action-border-standard-normal);
        --color-action-background-subtle-normal: var(--dark-color-action-background-subtle-normal);
        --color-action-background-standard-selected: var(--dark-color-action-background-standard-selected);
        --color-action-background-on-off-normal: var(--dark-color-action-background-on-off-normal);
        --color-action-text-on-off-normal: var(--dark-color-action-text-on-off-normal);
    }
}

:root[data-theme="light"] {
    --color-action-background-emphasis-normal: var(--light-color-action-background-emphasis-normal);
    --color-action-border-standard-normal: var(--light-color-action-border-standard-normal);
    --color-action-background-subtle-normal: var(--light-color-action-background-subtle-normal);
    --color-action-background-standard-selected: var(--light-color-action-background-standard-selected);
    --color-action-background-on-off-normal: var(--light-color-action-background-on-off-normal);
    --color-action-text-on-off-normal: var(--light-color-action-text-on-off-normal);
}

:root[data-theme="dark"] {
    --color-action-background-emphasis-normal: var(--dark-color-action-background-emphasis-normal);
    --color-action-border-standard-normal: var(--dark-color-action-border-standard-normal);
    --color-action-background-subtle-normal: var(--dark-color-action-background-subtle-normal);
    --color-action-background-standard-selected: var(--dark-color-action-background-standard-selected);
    --color-action-background-on-off-normal: var(--dark-color-action-background-on-off-normal);
    --color-action-text-on-off-normal: var(--dark-color-action-text-on-off-normal);
}

body {
    /* @sas/product-tokens variable */
    font-family: var(--font-family);
    background: var(--color-action-background-subtle-normal);
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    word-wrap: break-word;
}

h1,
h2,
h3 {
    font-weight: 600;
}

h4,
h5,
h6 {
    font-weight: 500;
}

footer {
    border-top: none;
    font-size: 12px;
}

#tsd-search.has-focus {
    background-color: #fff !important;

    input {
        color: #000 !important;
    }
}

.tsd-page-navigation ul {
    padding-left: 1rem;
}

.tsd-page-toolbar {
    font-size: 14px;

    input {
        font-size: 16px !important;
    }

    a.title {
        font-weight: 500;
        display: inline-flex !important;
        align-items: center !important;

        img {
            padding-right: 10px;
            margin-right: 10px;
            margin-left: -10px;
            border-right: 1px solid var(--color-accent);
            height: 24px;
        }
    }
}

.tsd-accordion.tsd-page-navigation,
.tsd-navigation.settings {
    border-radius: 10px;
    padding: 20px;
    border: 1px solid var(--color-accent);
    background-color: var(--code-background);
}

html[data-theme="light"] {
    #tsd-search:not(.has-focus) {
        svg {
            filter: invert(100%);
        }
    }

    footer a {
        color: #000;
    }
}

html[data-theme="dark"] {
    #tsd-search.has-focus {
        svg {
            filter: invert(100%);
        }
    }

    footer a {
        color: hsl(0, 100%, 100%);
    }
}

@media (prefers-color-scheme: dark) {
    html[data-theme="os"] {
        #tsd-search.has-focus {
            svg {
                filter: invert(100%);
            }
        }

        footer a {
            color: hsl(0, 100%, 100%);
        }
    }
}

@media (prefers-color-scheme: light) {
    html[data-theme="os"] {
        #tsd-search:not(.has-focus) {
            svg {
                filter: invert(100%);
            }
        }

        footer a {
            color: #000;
        }
    }
}

.tsd-page-toolbar {
    /* @sas/product-tokens variable */
    background: var(--color-action-background-emphasis-normal);
}

#tsd-toolbar-links a,
#tsd-search > a {
    color: #fff;
}

pre {
    border: 1px solid var(--color-action-border-standard-normal);
}

pre,
code {
    background: var(--color-action-background-subtle-normal);
}

.tsd-navigation a.current,
.tsd-navigation.settings,
.tsd-accordion.tsd-page-navigation {
    background: var(--color-action-background-standard-selected);
}

.tsd-checkbox-background {
    fill: var(--color-action-background-on-off-normal);
}

input[type="checkbox"]:checked ~ svg .tsd-checkbox-checkmark {
    stroke: var(--color-action-text-on-off-normal);
}