@use "config";

* {
    scrollbar-width: thin;
    scrollbar-color: var(--bg);
}

html {

    &,
    &[data-theme=dark] {
        color-scheme: dark;
    }

    &[data-theme=light] {
        color-scheme: light;
    }
}

body {
    color: var(--fg);
    font-family: var(--text);
}

a {
    color: var(--fg);
    text-decoration: underline;

    &:hover {
        text-decoration: underline;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;

    .header-anchor {
        opacity: 0%;
        position: absolute;
        left: -1em;
        width: 1em;
        text-decoration: none;
        text-align: center;
        user-select: none;
        color: var(--fg);
    }

    &:hover>.header-anchor {
        opacity: 50%;
    }
}

h1,
h2,
h3 {
    color: var(--hfg);
}

h1 {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

h2 {
    padding-top: 3rem;
    margin-bottom: 1.5rem;
    border-bottom: 0.125rem solid var(--accent);
    font-size: 1.75rem;
}

h3 {
    padding-top: 3rem;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

h4 {
    padding-top: 3rem;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

blockquote {
    font-style: italic;
    padding-left: 1rem;
    border-left: 0.125rem solid var(--accent);
}

p {
    margin-top: 1em;
    margin-bottom: 1em;
}

.admonition {
    border: 1px solid var(--fg);
    padding: 1rem 1rem 1rem 4rem;
    position: relative;
    margin-top: 1em;
    margin-bottom: 1em;

    &>*:first-child {
        margin-top: 0;
    }

    &>*:last-child {
        margin-bottom: 0;
    }

    &::before {
        width: 4rem;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        font-size: 4rem;
        mask-size: 2rem;
        mask-position: 50% 50%;
        height: 100%;
        mask-repeat: no-repeat;
        content: ' ';

        // NB: 'info' or 'note' is the default
        background-color: var(--fg);
        mask-image: url("/img/vsc/info.svg");
    }

    &.warning::before,
    &.danger::before {
        background-color: darkred;
        mask-image: url("/img/vsc/warning.svg");
    }

    &.tip::before {
        mask-image: url("/img/vsc/lightbulb.svg");
    }

    &.important::before {
        mask-image: url("/img/vsc/star-empty.svg");
    }
}


table {
    width: 100%;
    border-collapse: collapse;

    thead {
        border-bottom: 1px solid var(--fg);
    }

    td,
    th {
        padding: 0.125rem 0.5rem;

        &:not(:first-child) {
            border-left: 1px solid var(--fg);
        }
    }
}

code,
pre,
.monospace {
    font-family: var(--monospace);
}

code {
    background-color: black;
    border-width: 0.125rem 0.25rem;
    border-style: solid;
    border-color: black;
    border-radius: 0.25rem;
}

pre {
    overflow-x: auto;
    padding: 0.5rem;
    background-color: black;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;

    code {
        background-color: transparent;
        border: none;
    }
}

pre.shiki {
    padding: 0.5rem;
    font-size: 0.9rem;
}

button,
a[role=button] {
    background-color: var(--accent);
    color: var(--accent-fg);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1px solid var(--accent-disabled);

    &:hover {
        background-color: var(--accent-hover);
    }
}

.asciiart {
    display: inline-block;
    line-height: 1;
}

.no-list {
    list-style: none;
}

.no-decoration {
    text-decoration: none;
}
