@use '../core/styles/common/tokens' as *;
@use './markdown-tokens';

@mixin kbq-markdown-theme() {
    .kbq-markdown {
        color: var(--kbq-foreground-contrast);
        background: var(--kbq-markdown-bg);

        // h1, h2, h3, h4, h5, h6
        @for $i from 1 through 6 {
            .kbq-markdown__h#{$i} {
                color: var(--kbq-markdown-h#{$i}-color);
            }
        }

        .kbq-markdown__p {
            color: var(--kbq-markdown-p-color);
        }

        .kbq-markdown__ul,
        .kbq-markdown__ol {
            color: var(--kbq-markdown-list-color);
        }

        .kbq-markdown__blockquote {
            color: var(--kbq-markdown-blockquote-text);
            background: var(--kbq-markdown-blockquote-background);
            border-color: var(--kbq-markdown-blockquote-border);
            border-left-color: var(--kbq-markdown-blockquote-line);
        }

        .kbq-markdown__pre,
        .kbq-markdown__code:not(.kbq-markdown__pre > .kbq-markdown__code, .kbq-markdown__a .kbq-markdown__code) {
            color: var(--kbq-markdown-code-text);
            background-color: var(--kbq-markdown-code-background);
        }

        .kbq-markdown__a .kbq-markdown__code {
            background-color: var(--kbq-markdown-code-background);
        }

        .kbq-markdown__a:has(.kbq-markdown__code) {
            text-decoration-line: none;
        }

        .kbq-markdown__img + em {
            color: var(--kbq-markdown-image-caption-text);
        }

        .kbq-markdown__hr {
            border-bottom-color: var(--kbq-markdown-hr-color);
        }

        .kbq-markdown__table > .kbq-markdown__thead {
            color: var(--kbq-markdown-table-header);
            border-bottom-color: var(--kbq-markdown-table-border);
        }

        .kbq-markdown__table > .kbq-markdown__tbody {
            color: var(--kbq-markdown-table-body);
        }
    }
}

@mixin kbq-markdown-typography() {
    .kbq-markdown {
        // h1, h2, h3, h4, h5, h6
        @for $i from 1 through 6 {
            .kbq-markdown__h#{$i} {
                @include kbq-typography-level-to-styles-css-variables(md-typography, md-h#{$i});
            }
        }

        .kbq-markdown__p {
            @include kbq-typography-level-to-styles-css-variables(md-typography, md-body);
        }

        .kbq-markdown__ul,
        .kbq-markdown__ol {
            @include kbq-typography-level-to-styles-css-variables(md-typography, md-body);
        }

        .kbq-markdown__blockquote > .kbq-markdown__p {
            @include kbq-typography-level-to-styles-css-variables(md-typography, md-body);
        }

        .kbq-markdown__code {
            @include kbq-typography-level-to-styles-css-variables(md-typography, md-inline-code);
        }

        .kbq-markdown__a {
            @include kbq-typography-level-to-styles-css-variables(md-typography, md-body);
        }

        .kbq-markdown__a > .kbq-markdown__code {
            @include kbq-typography-level-to-styles-css-variables(md-typography, md-inline-code-as-link);
        }

        .kbq-markdown__img + em {
            @include kbq-typography-level-to-styles-css-variables(md-typography, md-caption);
        }

        .kbq-markdown__table > .kbq-markdown__thead {
            @include kbq-typography-level-to-styles-css-variables(md-typography, md-table-header);
        }

        .kbq-markdown__table > .kbq-markdown__tbody {
            @include kbq-typography-level-to-styles-css-variables(md-typography, md-table-cell);
        }
    }
}