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

.kbq-markdown {
    display: block;

    .kbq-markdown__input {
        display: none;
    }

    .kbq-markdown__output {
        flex: 1;

        & > :first-child {
            margin-top: 0;
        }

        & > :last-child {
            margin-bottom: 0;
        }
    }

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

            @for $i from 1 through 6 {
                & + .kbq-markdown__h#{$i} {
                    margin-top: 0;
                }
            }
        }
    }

    .kbq-markdown__p {
        margin-top: var(--kbq-markdown-p-size-margin-top);
        margin-bottom: var(--kbq-markdown-p-size-margin-bottom);
    }

    .kbq-markdown__ul,
    .kbq-markdown__ol {
        margin-top: var(--kbq-markdown-list-size-margin-top);
        margin-bottom: var(--kbq-markdown-list-size-margin-bottom);

        > li {
            margin-bottom: var(--kbq-markdown-list-size-item-margin-bottom);
        }
    }

    .kbq-markdown__ul {
        position: relative;
        list-style: none;
        padding: var(--kbq-markdown-list-size-ul-padding);
    }

    .kbq-markdown__ul > li:before {
        content: '—';
        display: block;
        position: absolute;
        width: 24px;
        text-align: left;
        left: 0;
    }

    .kbq-markdown__ol {
        list-style: none;
        padding: 0;
        counter-reset: li;

        > li {
            &:before {
                content: counter(li) '.';
                counter-increment: li;
                padding-right: var(--kbq-markdown-list-size-ol-number-padding-right);
            }

            > * {
                display: inline-block;
            }
        }
    }

    .kbq-markdown__p + .kbq-markdown__ul,
    .kbq-markdown__p + .kbq-markdown__ol {
        margin-top: var(--kbq-markdown-list-size-margin-top-after-paragraph);
    }

    .kbq-markdown__blockquote {
        margin-top: var(--kbq-markdown-blockquote-size-margin-top);
        margin-left: 0;
        margin-bottom: var(--kbq-markdown-blockquote-size-margin-bottom);
        margin-right: 0;

        border-left-width: var(--kbq-markdown-blockquote-size-line-width);

        border-left-style: solid;

        padding: var(--kbq-markdown-blockquote-size-padding);
    }

    .kbq-markdown__blockquote > .kbq-markdown__p {
        margin-top: 0;
        margin-bottom: 0;
    }

    .kbq-markdown__pre {
        position: relative;
        overflow-x: auto;

        margin-top: var(--kbq-markdown-code-size-multiline-margin-top);
        margin-bottom: var(--kbq-markdown-code-size-multiline-margin-bottom);

        padding: var(--kbq-markdown-code-size-multiline-padding);
    }

    .kbq-markdown__pre,
    .kbq-markdown__code {
        border-radius: var(--kbq-markdown-code-size-border-radius);
    }

    .kbq-markdown__code:not(.kbq-markdown__pre > .kbq-markdown__code) {
        white-space: nowrap;
        padding: var(--kbq-markdown-code-size-inline-padding);
    }

    .kbq-markdown__img {
        max-width: 100%;
        margin-top: var(--kbq-markdown-image-size-margin-top);
        margin-bottom: var(--kbq-markdown-image-size-margin-bottom);

        + em {
            display: block;
            margin-top: var(--kbq-markdown-image-size-caption-margin-top);
            margin-bottom: var(--kbq-markdown-image-size-caption-margin-bottom);
        }
    }

    .kbq-markdown__hr {
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom-style: solid;
        border-bottom-width: var(--kbq-markdown-hr-size-width);
        margin: var(--kbq-markdown-hr-size-margin-vertical) 0;
    }

    .kbq-markdown__table {
        max-width: 100%;
        overflow-x: auto;
        display: table;
        border-collapse: collapse;
        margin-bottom: var(--kbq-markdown-table-size-margin-bottom);

        td {
            vertical-align: top;
        }

        th,
        td {
            padding: var(--kbq-markdown-table-size-padding);
            font-weight: 400;
        }
    }

    .kbq-markdown__table > .kbq-markdown__thead {
        border-bottom-style: solid;
        border-bottom-width: var(--kbq-markdown-table-size-border-width);

        text-align: left;

        th:first-child {
            padding-left: 0;
        }

        th:last-child {
            padding-right: 0;
        }
    }

    .kbq-markdown__table > .kbq-markdown__tbody {
        td:first-child {
            padding-left: 0;
        }

        td:last-child {
            padding-right: 0;
        }
    }
}