@import "tailwindcss";

@utility prose {
    --tw-prose-body: var(--color-zinc-700);
    --tw-prose-headings: var(--color-zinc-900);
    --tw-prose-links: var(--color-brand-500);
    --tw-prose-links-hover: var(--color-brand-600);
    --tw-prose-links-underline: color-mix(
        in oklab,
        var(--color-brand-500) 30%,
        transparent
    );
    --tw-prose-bold: var(--color-zinc-900);
    --tw-prose-counters: var(--color-zinc-500);
    --tw-prose-bullets: var(--color-zinc-300);
    --tw-prose-hr: var(--color-zinc-900) / 0.05;
    --tw-prose-quotes: var(--color-zinc-900);
    --tw-prose-quote-borders: var(--color-zinc-200);
    --tw-prose-captions: var(--color-zinc-500);
    --tw-prose-code: var(--color-zinc-900);
    --tw-prose-code-bg: var(--color-zinc-100);
    --tw-prose-code-ring: var(--color-zinc-300);
    --tw-prose-th-borders: var(--color-zinc-300);
    --tw-prose-td-borders: var(--color-zinc-200);

    --tw-prose-invert-body: var(--color-zinc-400);
    --tw-prose-invert-headings: var(--color-white);
    --tw-prose-invert-links: var(--color-brand-400);
    --tw-prose-invert-links-hover: var(--color-brand-500);
    --tw-prose-invert-links-underline: color-mix(
        in oklab,
        var(--color-brand-500) 30%,
        transparent
    );
    --tw-prose-invert-bold: var(--color-white);
    --tw-prose-invert-counters: var(--color-zinc-400);
    --tw-prose-invert-bullets: var(--color-zinc-600);
    --tw-prose-invert-hr: var(--color-white) / 0.05;
    --tw-prose-invert-quotes: var(--color-zinc-100);
    --tw-prose-invert-quote-borders: var(--color-zinc-700);
    --tw-prose-invert-captions: var(--color-zinc-400);
    --tw-prose-invert-code: var(--color-white);
    --tw-prose-invert-code-bg: color-mix(
        in oklab,
        var(--color-zinc-700) 15%,
        transparent
    );
    --tw-prose-invert-code-ring: color-mix(
        in oklab,
        var(--color-white) 10%,
        transparent
    );
    --tw-prose-invert-th-borders: var(--color-zinc-600);
    --tw-prose-invert-td-borders: var(--color-zinc-700);

    font-size: var(--text-base);
    line-height: --spacing(8);
    color: var(--tw-prose-body);

    :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        &:where(p) {
            margin-top: --spacing(8);
            margin-bottom: --spacing(8);
        }

        &:where([class~="lead"]) {
            font-size: var(--text-base);
            line-height: var(--text-base--line-height);
        }

        &:where(ol) {
            list-style-type: decimal;
            margin-top: --spacing(5);
            margin-bottom: --spacing(5);
            padding-left: 1.625rem;
        }

        &:where(ol[type="A"]) {
            list-style-type: upper-alpha;
        }
        &:where(ol[type="a"]) {
            list-style-type: lower-alpha;
        }
        &:where(ol[type="A" s]) {
            list-style-type: upper-alpha;
        }
        &:where(ol[type="a" s]) {
            list-style-type: lower-alpha;
        }
        &:where(ol[type="I"]) {
            list-style-type: upper-roman;
        }
        &:where(ol[type="i"]) {
            list-style-type: lower-roman;
        }
        &:where(ol[type="I" s]) {
            list-style-type: upper-roman;
        }
        &:where(ol[type="i" s]) {
            list-style-type: lower-roman;
        }
        &:where(ol[type="1"]) {
            list-style-type: decimal;
        }

        &:where(ul) {
            list-style-type: disc;
            margin-top: --spacing(5);
            margin-bottom: --spacing(5);
            padding-left: 1.625rem;
        }

        &:where(li) {
            margin-top: --spacing(2);
            margin-bottom: --spacing(2);
        }

        &:where(:is(ol, ul) > li) {
            padding-left: --spacing(1.5);
        }

        &:where(ol > li)::marker {
            font-weight: 400;
            color: var(--tw-prose-counters);
        }

        &:where(ul > li)::marker {
            color: var(--tw-prose-bullets);
        }

        &:where(ul > li p) {
            margin-top: --spacing(3);
            margin-bottom: --spacing(3);
        }

        &:where(ul > li > *:first-child) {
            margin-top: --spacing(5);
        }

        &:where(ul > li > *:last-child) {
            margin-bottom: --spacing(5);
        }

        &:where(ol > li > *:first-child) {
            margin-top: --spacing(5);
        }

        &:where(ol > li > *:last-child) {
            margin-bottom: --spacing(5);
        }

        &:where(ul ul, ul ol, ol ul, ol ol) {
            margin-top: --spacing(3);
            margin-bottom: --spacing(3);
        }

        &:where(hr) {
            border-color: var(--tw-prose-hr);
            border-top-width: 1px;
            margin-top: --spacing(16);
            margin-bottom: --spacing(16);
            max-width: none;
            margin-left: --spacing(-4);
            margin-right: --spacing(-4);

            @media (width < var(--breakpoint-sm)) {
                margin-left: --spacing(-6);
                margin-right: --spacing(-6);
            }
            @media (width < var(--breakpoint-lg)) {
                margin-left: --spacing(-8);
                margin-right: --spacing(-8);
            }
        }

        &:where(blockquote) {
            font-weight: 500;
            font-style: italic;
            color: var(--tw-prose-quotes);
            border-left-width: 0.25rem;
            border-left-color: var(--tw-prose-quote-borders);
            quotes: '"\\201C""\\201D""\\2018""\\2019"';
            margin-top: --spacing(8);
            margin-bottom: --spacing(8);
            padding-left: --spacing(5);

            &:where(p:first-of-type::before) {
                content: open-quote;
            }
            &:where(p:last-of-type::after) {
                content: close-quote;
            }
        }

        &:where(h1) {
            color: var(--tw-prose-headings);
            font-weight: 700;
            font-size: var(--text-4xl);
            line-height: var(--text-4xl--line-height);
            margin-bottom: --spacing(6);
        }

        &:where(h2) {
            color: var(--tw-prose-headings);
            font-weight: 600;
            font-size: var(--text-2xl);
            line-height: var(--text-2xl--line-height);
            margin-top: --spacing(16);
            margin-bottom: --spacing(8);
        }

        &:where(h3) {
            color: var(--tw-prose-headings);
            font-size: var(--text-lg);
            line-height: var(--text-lg--line-height);
            font-weight: 600;
            margin-top: --spacing(10);
            margin-bottom: --spacing(2);
        }

        &:where(img, video, figure) {
            margin-top: --spacing(8);
            margin-bottom: --spacing(8);
        }

        &:where(figure > *) {
            margin-top: 0;
            margin-bottom: 0;
        }

        &:where(figcaption) {
            color: var(--tw-prose-captions);
            font-size: var(--text-sm);
            line-height: var(--text-sm--line-height);
            margin-top: --spacing(2);
        }

        &:where(table) {
            width: 100%;
            table-layout: auto;
            text-align: left;
            margin-top: --spacing(8);
            margin-bottom: --spacing(8);
            line-height: var(--text-base--line-height);
        }

        &:where(thead) {
            border-bottom-width: 1px;
            border-bottom-color: var(--tw-prose-th-borders);
        }

        &:where(thead th) {
            color: var(--tw-prose-headings);
            font-weight: 600;
            vertical-align: bottom;
            padding-right: --spacing(2);
            padding-bottom: --spacing(2);
            padding-left: --spacing(2);
        }

        &:where(thead th:first-child) {
            padding-left: 0;
        }

        &:where(thead th:last-child) {
            padding-right: 0;
        }

        &:where(tbody tr) {
            border-bottom-width: 1px;
            border-bottom-color: var(--tw-prose-td-borders);
        }

        &:where(tbody tr:last-child) {
            border-bottom-width: 0;
        }

        &:where(tbody td) {
            vertical-align: baseline;
        }

        &:where(tfoot) {
            border-top-width: 1px;
            border-top-color: var(--tw-prose-th-borders);
        }

        &:where(tfoot td) {
            vertical-align: top;
        }

        &:where(:is(tbody, tfoot) td) {
            padding-top: --spacing(2);
            padding-right: --spacing(2);
            padding-bottom: --spacing(2);
            padding-left: --spacing(2);
        }

        &:where(:is(tbody, tfoot) td:first-child) {
            padding-left: 0;
        }

        &:where(:is(tbody, tfoot) td:last-child) {
            padding-right: 0;
        }

        &:where(a) {
            color: var(--tw-prose-links);
            text-decoration: underline transparent;
            font-weight: 500;
            transition-property: color, text-decoration-color;
            transition-duration: 0.15s;
            transition-timing-function: var(--ease-in-out);

            &:hover {
                color: var(--tw-prose-links-hover);
                text-decoration-color: var(--tw-prose-links-underline);
            }
        }

        &:where(:is(h1, h2, h3) a) {
            font-weight: inherit;
        }

        &:where(strong) {
            color: var(--tw-prose-bold);
            font-weight: 600;
        }

        &:where(:is(a, blockquote, thead th) strong) {
            color: inherit;
        }

        &:where(code) {
            color: var(--tw-prose-code);
            border-radius: var(--radius-lg);
            padding-top: --spacing(1.5);
            padding-right: --spacing(1.5);
            padding-bottom: --spacing(1);
            padding-left: --spacing(1.5);
            box-shadow: inset 0 0 0 1px var(--tw-prose-code-ring);
            background-color: var(--tw-prose-code-bg);
            white-space: pre-wrap;
            word-break: break-all;
            font-size: var(--text-xs);
        }

        &:where(:is(a, h1, h2, h3, blockquote, thead th) code) {
            color: inherit;
        }

        &:where(h2 code) {
            font-size: var(--text-base);
            font-weight: inherit;
        }

        &:where(h3 code) {
            font-size: var(--text-sm);
            font-weight: inherit;
        }

        &:where(:is(h1, h2, h3) + *) {
            margin-top: 0;
        }

        &:where(:first-child) {
            margin-top: 0 !important;
        }

        &:where(:last-child) {
            margin-bottom: 0 !important;
        }
    }
}

@utility prose-invert {
    --tw-prose-body: var(--tw-prose-invert-body);
    --tw-prose-headings: var(--tw-prose-invert-headings);
    --tw-prose-links: var(--tw-prose-invert-links);
    --tw-prose-links-hover: var(--tw-prose-invert-links-hover);
    --tw-prose-links-underline: var(--tw-prose-invert-links-underline);
    --tw-prose-bold: var(--tw-prose-invert-bold);
    --tw-prose-counters: var(--tw-prose-invert-counters);
    --tw-prose-bullets: var(--tw-prose-invert-bullets);
    --tw-prose-hr: var(--tw-prose-invert-hr);
    --tw-prose-quotes: var(--tw-prose-invert-quotes);
    --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
    --tw-prose-captions: var(--tw-prose-invert-captions);
    --tw-prose-code: var(--tw-prose-invert-code);
    --tw-prose-code-bg: var(--tw-prose-invert-code-bg);
    --tw-prose-code-ring: var(--tw-prose-invert-code-ring);
    --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
    --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
}