/*  Manifest Code CSS
/*  By Andrew Matlock under MIT license
/*  https://manifestx.dev/styles/code
*/

@layer base, components, utilities, syntax;


:root {

    /* Copy code button icons */
    --icon-code-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/g%3E%3C/svg%3E");
    --icon-code-copied: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNvcHktY2hlY2staWNvbiBsdWNpZGUtY29weS1jaGVjayI+PHBhdGggZD0ibTEyIDE1IDIgMiA0LTQiLz48cmVjdCB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHg9IjgiIHk9IjgiIHJ4PSIyIiByeT0iMiIvPjxwYXRoIGQ9Ik00IDE2Yy0xLjEgMC0yLS45LTItMlY0YzAtMS4xLjktMiAyLTJoMTBjMS4xIDAgMiAuOSAyIDIiLz48L3N2Zz4=");
    --icon-code-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");

    /* Syntax highlight colors */
    --color-code-keyword: #b8860b;
    --color-code-string: #8b4513;
    --color-code-comment: #808080;
    --color-code-function: #cd853f;
    --color-code-number: #a0522d;
    --color-code-operator: #2f4f4f;
    --color-code-class-name: #daa520;
    --color-code-tag: #4682b4;
    --color-code-attr-name: #ff8c00;
    --color-code-attr-value: #8b4513;
    --color-code-property: #a0522d;
    --color-code-selector: #4682b4;
    --color-code-punctuation: #2f4f4f;
    --color-code-builtin: #b8860b;
    --color-code-constant: #a0522d;
    --color-code-boolean: #a0522d;
    --color-code-regex: #8b4513;
    --color-code-symbol: #daa520;
    --color-code-entity: #daa520;
    --color-code-url: #a0522d;
    --color-code-atrule: #b8860b;
    --color-code-rule: #4682b4;
    --color-code-doctype: #808080;
    --color-code-cdata: #808080;
    --color-code-prolog: #808080;
    --color-code-namespace: #808080;
    --color-code-important: #b8860b;
    --color-code-inserted: #228b22;
    --color-code-deleted: #dc143c;
    --color-code-char: #8b4513;
}

.dark {
    --color-code-keyword: #f4a460;
    --color-code-string: #deb887;
    --color-code-comment: #8b8b8b;
    --color-code-function: #daa520;
    --color-code-number: #d2b48c;
    --color-code-operator: #f5deb3;
    --color-code-class-name: #cd853f;
    --color-code-tag: #87ceeb;
    --color-code-attr-name: #ffd700;
    --color-code-attr-value: #deb887;
    --color-code-property: #d2b48c;
    --color-code-selector: #87ceeb;
    --color-code-punctuation: #f5deb3;
    --color-code-builtin: #f4a460;
    --color-code-constant: #d2b48c;
    --color-code-boolean: #d2b48c;
    --color-code-regex: #deb887;
    --color-code-symbol: #cd853f;
    --color-code-entity: #cd853f;
    --color-code-url: #d2b48c;
    --color-code-atrule: #f4a460;
    --color-code-rule: #98fb98;
    --color-code-doctype: #8b8b8b;
    --color-code-cdata: #8b8b8b;
    --color-code-prolog: #8b8b8b;
    --color-code-namespace: #8b8b8b;
    --color-code-important: #f4a460;
    --color-code-inserted: #98fb98;
    --color-code-deleted: #f08080;
    --color-code-char: #deb887;
}

/* Code syntax styles for highlight.js. Own layer, ordered after utilities, so
   token colors outrank the block chrome without !important. */
@layer syntax {
    .hljs-comment {
        color: var(--color-code-comment)
    }

    .hljs-keyword {
        color: var(--color-code-keyword)
    }

    .hljs-string {
        color: var(--color-code-string)
    }

    .hljs-number {
        color: var(--color-code-number)
    }

    .hljs-literal {
        color: var(--color-code-constant)
    }

    .hljs-type {
        color: var(--color-code-class-name)
    }

    .hljs-variable {
        color: var(--color-code-property)
    }

    .hljs-variable.language_ {
        color: var(--color-code-keyword)
    }

    .hljs-variable.constant_ {
        color: var(--color-code-constant)
    }

    .hljs-title {
        color: var(--color-code-function)
    }

    .hljs-title.class_.inherited__ {
        color: var(--color-code-class-name)
    }

    .hljs-title.function_.invoke__ {
        color: var(--color-code-function)
    }

    .hljs-params {
        color: var(--color-code-property)
    }

    .hljs-doctag {
        color: var(--color-code-keyword);
        font-weight: 600
    }

    .hljs-meta {
        color: var(--color-code-comment)
    }

    .hljs-meta.prompt_ {
        color: var(--color-code-keyword)
    }

    .hljs-meta.keyword_ {
        color: var(--color-code-keyword)
    }

    .hljs-meta.string_ {
        color: var(--color-code-string)
    }

    .hljs-section {
        color: var(--color-code-keyword);
        font-weight: 600
    }

    .hljs-name {
        color: var(--color-code-tag)
    }

    .hljs-attribute {
        color: var(--color-code-attr-name)
    }

    .hljs-bullet {
        color: var(--color-code-punctuation)
    }

    .hljs-code {
        color: var(--color-code-property)
    }

    .hljs-formula {
        color: var(--color-code-number)
    }

    .hljs-quote {
        color: var(--color-code-string)
    }

    .hljs-selector-id {
        color: var(--color-code-selector)
    }

    .hljs-selector-class {
        color: var(--color-code-selector)
    }

    .hljs-selector-attr {
        color: var(--color-code-selector)
    }

    .hljs-selector-pseudo {
        color: var(--color-code-selector)
    }

    .hljs-template-tag {
        color: var(--color-code-tag)
    }

    .hljs-template-variable {
        color: var(--color-code-property)
    }

    .hljs-subst {
        color: var(--color-code-string)
    }
}

@layer components {

    /* Copyable inline code */
    :where(code[role="button"]) {
        height: fit-content;
    }

    :where(.code-copied-icon) {
        display: inline-block;
        vertical-align: middle;
        width: 1em;
        height: 1em;
        background-color: currentColor;
        mask-image: var(--icon-code-copied);
        mask-size: 1em;
        mask-repeat: no-repeat;
        mask-position: center;

        /* Fill the line box so the mask centers optically */
        @supports (height: 1lh) {
            height: 1lh;
            vertical-align: top
        }
    }

    /* Pre code blocks (individual or tab grouped) */
    :where([x-code], [x-code-group]):not(.unstyle) {
        position: relative;

        /* Header */
        :where(header):not(:where(:is(aside.frame) header)) {

            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            min-height: var(--spacing-field-height, 2.25rem);
            padding-inline-start: calc(var(--spacing, 0.25rem) * 4);
            padding-inline-end: var(--spacing-field-height);
            font-family: var(--font-sans, sans-serif);
            font-size: inherit;
            color: var(--color-content-neutral, oklch(43.9% 0 0));
            background-color: color-mix(in oklch, var(--color-content-stark, oklch(43.9% 0 0)) 8%, transparent);

            &:has(button[role="tab"]) {
                padding-inline-start: calc(var(--spacing, 0.25rem) * 2)
            }

            /* Tabs wrapper */
            & [role="tablist"] {
                display: flex;
                flex-direction: row;
                overflow-x: auto;
                scrollbar-width: none;
                -ms-overflow-style: none;

                &::-webkit-scrollbar {
                    display: none
                }

                /* Tab buttons */
                & button[role="tab"] {
                    justify-content: start;
                    height: fit-content;
                    flex-shrink: 0;
                    font-family: inherit;
                    font-size: inherit;
                    color: inherit;
                    background: transparent;
                    border: 0 none;

                    &:hover {
                        color: var(--color-content-stark, oklch(43.9% 0 0));
                        background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
                    }

                    &[aria-selected="true"] {
                        position: relative;
                        color: var(--color-brand-content, oklch(68.1% 0.162 75.834));
                        pointer-events: none
                    }
                }
            }
        }

        /* Copy code button */
        & button.copy {
            position: absolute;
            top: 0;
            inset-inline-end: 0;
            font-size: 75%;
            background-color: transparent;

            &:hover {
                background-color: transparent;

                &::after {
                    background-color: var(--color-field-inverse, oklch(43.9% 0 0))
                }
            }

            &::after {
                content: '';
                display: block;
                width: 0.8125rem;
                height: 0.8125rem;
                background-color: var(--color-content-neutral, oklch(43.9% 0 0));
                mask-image: var(--icon-code-copy);
                mask-size: contain;
                mask-repeat: no-repeat
            }

            &.copied::after {
                mask-image: var(--icon-code-copied)
            }
        }

        :where(header)::-webkit-scrollbar {
            display: none
        }

        /* Line numbers overlay */
        & .lines {
            position: absolute;
            inset-inline-start: 0;
            display: inline-flex;
            flex-direction: column;
            padding: calc(var(--spacing, .25rem) * 4);
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
            text-align: end;
            color: var(--color-content-subtle, oklch(55.6% 0 0));
            background-color: var(--color-page, oklch(98.5% 0 0));
            pointer-events: none;
            user-select: none
        }

        /* Indent code when line numbers present */
        &:has(.lines) code {
            padding-inline-start: calc(calc(var(--spacing, 0.25rem) * 8) + 2ch)
        }

        /* Code */
        :where(code) {
            flex: 1 1 100%;
            min-width: 0;
            white-space: pre;
            white-space-collapse: preserve
        }

        /* Expand / collapse toggle */
        & button.expand {
            order: 99;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: var(--spacing-field-height, 2.25rem);
            padding: 0 calc(var(--spacing, 0.25rem) * 2);
            font-family: var(--font-sans, sans-serif);
            font-size: inherit;
            color: var(--color-content-subtle, oklch(55.6% 0 0));
            background: transparent;
            border: 0 none;
            border-radius: 0;
            cursor: pointer;
            transition: var(--transition, all .05s ease-in-out);

            &:hover {
                color: var(--color-content-neutral, oklch(43.9% 0 0));
                background: color-mix(in oklch, var(--color-content-stark, oklch(43.9% 0 0)) 8%, transparent);
            }
        }

        &[data-collapsed] code,
        &[data-collapsed] .lines {
            max-height: calc(var(--collapse-lines, 20) * 1.7em + calc(var(--spacing, 0.25rem) * 8));
            overflow: hidden;
            mask-image: linear-gradient(to bottom,
                    black 0%,
                    black calc(100% - 3em),
                    transparent calc(100% - 0.75em),
                    transparent 100%);
        }

        /* Preview frames */
        :where(aside.frame) {
            font-size: unset;
            line-height: unset;
            font-family: unset;
            font-weight: unset;
            color: unset;
            background: unset;
            box-shadow: unset;
            border: 0 none;
            white-space: normal;
            white-space-collapse: collapse
        }
    }

    :where([x-code-group]) {
        flex-flow: column;

        :where([x-code]) {
            border: 0 none;
            border-radius: 0;
            background: transparent
        }
    }

    :where([x-code]):has(>header) {
        & .lines {
            top: var(--spacing-field-height, 2.25rem)
        }
    }
}