$markdown-table-border-color: $color-layer-4;
$markdown-table-header-background: $color-layer-4;
$markdown-table-cell-padding: 8px 12px;

$markdown-code-inline-background: $color-layer-4;
$markdown-code-inline-color: $text-color-default;
$markdown-pre-background: $color-layer-4;
$markdown-pre-color: $text-color-default;
$markdown-pre-border-color: $color-layer-5;
$markdown-code-font-size: 0.875em;
$markdown-pre-padding: 12px;
$markdown-code-inline-padding: 0.15em 0.4em;
$markdown-blockquote-border-color: $color-layer-5;

@mixin markdown-content {
    word-break: break-word;
    overflow-x: auto;

    p {
        font-size: $font-size-base;
        font-weight: normal;
        line-height: 1.5;

        &:last-of-type {
            margin-bottom: 0;
        }
    }

    h1, h2, h3, h4, h5, h6 {
        line-height: 1.3;
        margin-top: 1em;
        margin-bottom: 0.5em;

        &:first-child {
            margin-top: 0;
        }
    }

    ol,
    ul {
        li {
            font-size: $font-size-base;
            font-weight: normal;
            line-height: 1.5;
        }
    }

    a {
        word-break: break-word;
    }

    blockquote {
        margin: 0.75em 0;
        padding-left: 1em;
        border-left: 3px solid $markdown-blockquote-border-color;
    }

    hr {
        margin: 1em 0;
    }

    table {
        width: max-content;
        min-width: 100%;
        border-collapse: collapse;
        margin: 0.75em 0;
        font-size: $font-size-base;
        line-height: 1.5;
        table-layout: auto;
    }

    th,
    td {
        border: 1px solid $markdown-table-border-color;
        padding: $markdown-table-cell-padding;
        text-align: left;
        vertical-align: top;
        word-break: break-word;
    }

    th {
        font-weight: 600;
        background: $markdown-table-header-background;
    }

    tbody tr:last-child td {
        border-bottom: 1px solid $markdown-table-border-color;
    }

    code {
        font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: $markdown-code-font-size;
        background: $markdown-code-inline-background;
        padding: $markdown-code-inline-padding;
        border-radius: 4px;
        word-break: break-word;
    }

    pre {
        margin: 0.75em 0;
        padding: $markdown-pre-padding;
        overflow-x: auto;
        background: $markdown-pre-background;
        color: $markdown-pre-color;
        border: 1px solid $markdown-pre-border-color;
        border-radius: $border-radius-default;
        font-size: $markdown-code-font-size;
        line-height: 1.5;

        code {
            background: transparent;
            padding: 0;
            color: inherit;
            border-radius: 0;
        }
    }
}
