pre {
    display: block;
    overflow-x: auto;
    background-color: var(--bg-1);
    border: 0.1rem solid var(--bg-2);
    padding: 0.4rem 0.6rem;
}

code {
    font-family: "Fantasque Sans Mono", monospace;
    background-color: var(--bg-1);
}

pre:has(code) {
    &::before {
        display: block;
        font-size: 0.6rem;
        line-height: 0.6rem;
        padding-block: 0.4rem;
        font-family: "Fantasque Sans Mono";
        text-transform: uppercase;
    }

    &:has(code.lang-css) {
        &::before {
            content: "CSS";
        }
    }

    &:has(code.lang-html) {
        &::before {
            content: "HTML";
        }
    }

    &:has(code.lang-origami) {
        &::before {
            content: "Origami";
        }
    }

    &:has(code.lang-python) {
        &::before {
            content: "Python";
        }
    }

    &:has(code.lang-rust) {
        &::before {
            content: "Rust";
        }
    }
}

code:not(pre code) {
    padding: 0.1rem 0.5ch;
    border: 0.1rem solid var(--bg-2);
    text-wrap-mode: nowrap;
}

.hljs {
    .hljs-built_in,
    .hljs-selector-pseudo {
        color: var(--magenta-fg);
    }

    .hljs-comment {
        font-style: italic;
        color: var(--text-2);
    }

    .hljs-keyword,
    .hljs-name {
        color: light-dark(var(--green-600), var(--green-400));
    }

    .hljs-number {
        color: light-dark(var(--purple-600), var(--purple-400));
    }

    .hljs-string {
        color: light-dark(var(--cyan-600), var(--cyan-400));
    }

    .hljs-selector-tag,
    .hljs-selector-class {
        color: var(--yellow-fg);
    }

    .hljs-tag {
        color: var(--text-2);
    }

    .hljs-title {
        color: light-dark(var(--yellow-600), var(--yellow-400));
    }

    .hljs-variable,
    .hljs-attr,
    .hljs-attribute {
        color: light-dark(var(--blue-600), var(--blue-400));
    }
}

hr {
    border: none;
    border-top: 0.2rem dashed var(--bg-2);
    margin-block-end: 2rem;
}

blockquote {
    border: 0.1rem solid var(--bg-2);
    border-left: 0.2rem solid var(--accent);
    padding: 0.4rem 0.6rem;
}

.alert,
blockquote,
ul,
ol {
    > :first-child,
    > :first-child * {
        margin-block-start: 0;
    }
}

ul > li,
ol > li {
    margin-left: 2ch;
}

table {
    border-collapse: collapse;
    tr {
        border-bottom: 0.1rem solid var(--bg-2);
    }

    th {
        color: var(--accent);
    }

    td,
    th {
        padding-inline: 0.5ch;
    }
}

a[data-footnote-ref] {
    border-bottom: none;
    color: var(--text-2);
    font-size: 0.8rem;
}

.alert {
    padding-inline: 1ch;

    svg {
        transform: translateY(2px);
        margin-inline-end: 0.5ch;
    }

    > p:not(:first-child) {
        margin-block-start: 0;
    }
}

.alert.alert-note {
    border-left: 0.2rem solid var(--blue-fg);

    > .alert-title {
        fill: light-dark(var(--blue-600), var(--blue-400));
        color: light-dark(var(--blue-600), var(--blue-400));
    }
}

.alert.alert-tip {
    border-left: 0.2rem solid var(--cyan-fg);

    > .alert-title {
        fill: light-dark(var(--cyan-600), var(--cyan-400));
        color: light-dark(var(--cyan-600), var(--cyan-400));
    }
}

.alert.alert-important {
    border-left: 0.2rem solid var(--yellow-fg);

    > .alert-title {
        fill: light-dark(var(--yellow-600), var(--yellow-400));
        color: light-dark(var(--yellow-600), var(--yellow-400));
    }
}

.alert.alert-caution {
    border-left: 0.2rem solid var(--orange-fg);

    > .alert-title {
        fill: var(--orange-fg);
        color: var(--orange-fg);
    }
}

.alert.alert-warning {
    border-left: 0.2rem solid var(--red-fg);

    > .alert-title {
        fill: var(--red-fg);
        color: var(--red-fg);
    }
}