/*  Indux Code CSS
/*  By Andrew Matlock under MIT license
/*  https://indux.build/styles/code
*/

@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Lexend+Exa&display=swap');

:root {

    /* Copy code button icons */
    --icon-copy-code: 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-copied-code: 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='M20 6L9 17l-5-5'/%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 */
@layer utilities {

    /* Additional highlight.js specific classes */
    .hljs-comment {
        color: var(--color-code-comment) !important
    }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@layer components {

    :where(pre) {
        display: flex;
        flex: 1;
        -ms-overflow-style: scrollbar;
        overflow-x: auto;
        width: auto;
        padding: calc(var(--spacing, 0.25rem) * 4);
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.8125rem;
        line-height: 1.5;
        text-indent: 0;
        color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
        background-color: var(--color-page, oklch(100% 0 0));
        border: 1px solid var(--color-field-surface, oklch(91.79% 0.0029 264.26));
        border-radius: 1rem;
        tab-size: 4;
        white-space: pre;
        white-space-collapse: preserve
    }

    :where(pre code) {
        display: block;
        width: 100%;
        padding: 0;
        font-size: inherit;
        font-family: inherit;
        font-weight: inherit;
        line-height: inherit;
        color: inherit;
        background-color: transparent;

        & span {
            vertical-align: initial
        }
    }

    /* Code block(s) wrapper */
    :where(x-code-group, x-code, [x-code]) {
        position: relative;
        display: flex;
        flex-flow: row wrap;
        font-family: "IBM Plex Mono", monospace;
        font-size: 0.8125rem;
        line-height: 1.5;
        background: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 45%, transparent);
        border: 1px solid var(--color-field-surface, oklch(91.79% 0.0029 264.26));
        border-radius: 1rem;
        overflow: hidden;

        &:has(> header) {
            padding: 0.125rem
        }

        /* Title bar */
        & > header {
            display: flex;
            align-items: center;
            gap: calc(var(--spacing, 0.25rem) * 2);
            width: 100%;
            padding: 0.5rem 1rem;
            font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--color-content-subtle, oklch(67.4% 0.0318 251.27));
            border-bottom: none;
            border-radius: 0.8125rem 0.8125rem 0 0;

            /* Tab titles */
            & button[role="tab"] {
                height: fit-content;
                padding: var(--spacing, 0.25rem) calc(var(--spacing, 0.25rem) * 2);
                border-radius: var(--radius, 0.5rem);
                background: transparent;
                color: inherit;
                font-family: inherit;
                font-size: inherit;
                cursor: pointer;
                transition: var(--transition, all .05s ease-in-out);
            
                &:hover {
                    color: var(--color-content-neutral, oklch(48.26% 0.0365 255.09));
                    background-color: var(--color-surface-3, oklch(91.79% 0.0029 264.26))
                }
            
                /* Selected tab */
                &.selected {
                    position: relative;
                    color: var(--color-brand-content, #de6618);
                    background: transparent;

                    &:hover {
                        background-color: var(--color-surface-3, oklch(91.79% 0.0029 264.26))
                    }
            
                    /* Selected tab underline */
                    &::after {
                        content: '';
                        position: absolute;
                        bottom: -0.5rem;
                        left: 50%;
                        transform: translateX(-50%);
                        width: calc(100% - var(--spacing, 0.25rem) * 4);
                        height: 2px;
                        background: color-mix(in oklch, var(--color-brand-content, #de6618) 50%, transparent);
                        border-radius: 0.5rem
                    }
                }
            }
        }

        /* Line numbers */
        & .lines {
            display: flex;
            flex-direction: column;
            width: fit-content;
            min-width: 2.5rem;
            padding: calc(var(--spacing, 0.25rem) * 4) 0.5rem calc(var(--spacing, 0.25rem) * 4) 0.5rem;
            font-family: inherit;
            font-size: inherit;
            line-height: inherit;
            text-align: right;
            color: var(--color-content-subtle, oklch(67.4% 0.0318 251.27));
            background: var(--color-page, oklch(100% 0 0));
            pointer-events: none;
            user-select: none;
        }

        &:has(> header) .lines {
            border-start-start-radius: 0.875rem;
            border-end-start-radius: 0.875rem
        }

        & pre {
            margin-top: 0;
            border: 0 none
        }

        &:has(> header) pre {
            border-radius: 0.875rem
        }

        &[numbers] pre {
            border-start-start-radius: 0;
            border-end-start-radius: 0
        }

        /* Copy button */
        & .copy {
            position: absolute;
            top: 0.3rem;
            right: 0.5rem;
            width: 1.75rem;
            min-width: 0;
            height: 1.75rem;
            padding: 0;

            &::after {
                content: '';
                display: block;
                width: 0.8125rem;
                height: 0.8125rem;
                background-color: var(--color-field-inverse, oklch(16.6% 0.026 267));
                mask-image: var(--icon-copy-code);
                mask-size: 1rem;
                mask-size: contain;
                mask-repeat: no-repeat;
            }

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

            &.copied {
                --color-field-surface: var(--color-positive-surface);
                --color-field-surface-hover: var(--color-positive-surface-hover);
                --color-field-inverse: var(--color-positive-inverse);
            }
        }

        :where(x-code) {
            width: 100%;
            margin-top: 0;
            border: 0 none;
            overflow: visible;

            & .copy {
                top: -2.25rem
            }
        }
    }

    /* RTL support */
    [dir="rtl"] :where(x-code-group, x-code, [x-code]) .copy {
        right: auto;
        left: 0.5rem
    }
}

/* Frames to visualize code examples */
@layer utilities {

    .prose aside.frame {
        display: flex;
        gap: calc(var(--spacing, 0.25rem) * 4);
        background: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 35%, transparent);
        border: 1px solid var(--color-field-surface, oklch(91.79% 0.0029 264.26));
        border-radius: calc(var(--radius, 0.5rem) * 2)
    }

    /* Followed directly by code block */
    .prose aside.frame:has(+ x-code-group, + x-code) {
        border-bottom: 0 none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0
    }

    .prose aside.frame + x-code-group, .prose aside.frame + x-code {
        margin-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0
    }

    .prose aside.frame + x-code pre {
        border-top-left-radius: 0;
        border-top-right-radius: 0
    }
}