/* stylelint-disable declaration-no-important */

@use 'private';
@use 'brand';
@use 'lists';

@mixin removeMarginForEdgeChildren {
    & > *:first-child {
        margin-top: 0;
    }

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

.yfm {
    @include private.private-brand();
    @include brand.brand();

    font-family: var(--yfm-font-family-sans);
    font-size: var(--yfm-font-size, 15px);
    line-height: var(--yfm-font-line-height, 20px);
    word-wrap: break-word;
    color: var(--yfm-color-text);
    tab-size: var(--yfm-tab-size, inherit);

    --yfm-font-family-monospace: 'Menlo', 'Monaco', 'Consolas', 'Ubuntu Mono', 'Liberation Mono',
        'DejaVu Sans Mono', 'Courier New', 'Courier', monospace;
    --yfm-font-family-sans: 'Segoe UI', arial, helvetica, sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol';

    * {
        box-sizing: border-box;
    }

    & > *:not(h2):not(h3):not(h4):not(h5):not(h6):first-child {
        margin-top: 0 !important;
    }

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

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-bottom: 15px;
        font-weight: 500;
    }

    h1 {
        font-size: var(--yfm-font-size-h1, 32px);
        line-height: var(--yfm-font-line-height-h1, 40px);
    }

    h2 {
        font-size: var(--yfm-font-size-h2, 24px);
        line-height: var(--yfm-font-line-height-h2, 28px);
    }

    h3 {
        font-size: var(--yfm-font-size-h3, 20px);
        line-height: var(--yfm-font-line-height-h3, 24px);
    }

    h4 {
        font-size: var(--yfm-font-size-h4, 17px);
        line-height: var(--yfm-font-line-height-h4, 24px);
    }

    h5 {
        font-size: var(--yfm-font-size-h5, 15px);
        line-height: var(--yfm-font-line-height-h5, 20px);
    }

    h6 {
        font-size: var(--yfm-font-size-h6, 13px);
        line-height: var(--yfm-font-line-height-h6, 18px);
    }

    a {
        background-color: transparent;
        color: var(--yfm-color-link);
        text-decoration: none;

        &:hover,
        &:active {
            color: var(--yfm-color-link-hover);
        }

        &:not([href]) {
            color: inherit;
        }
    }

    strong {
        font-weight: 700;
    }

    img,
    svg {
        box-sizing: content-box;
        max-width: 100%;
        max-height: fit-content;
        border: none;
        vertical-align: middle;

        &[align='right'] {
            padding-left: 20px;
        }

        &[align='left'] {
            padding-right: 20px;
        }
    }

    .mermaid svg[id*='mermaid'] {
        max-height: none;
    }

    img {
        object-fit: contain;
        background-color: var(--yfm-color-base);
    }

    svg {
        height: auto;
    }

    img + small {
        display: block;
    }

    p,
    blockquote,
    ul,
    ol,
    dl,
    table,
    pre {
        margin-block: var(--yfm-text-block-margin-block, 0 15px);
        margin-inline: var(--yfm-text-block-margin-inline, 0);
    }

    ul,
    ol,
    dl {
        & pre {
            margin-top: 15px;
        }
    }

    code,
    kbd,
    pre {
        font-family: var(--yfm-font-family-monospace);
        font-size: 1em;
        font-feature-settings: normal;
    }

    input {
        margin: 0;
        overflow: visible;

        font-family: inherit;
        font-size: inherit;
        line-height: inherit;

        &[type='checkbox'] {
            position: relative;
            top: 1px;

            box-sizing: border-box;
            padding: 0;
        }
    }

    table {
        color: var(--yfm-color-table);

        display: inline-block;
        max-width: 100%;
        width: auto;
        overflow: auto;
        position: relative;
        z-index: 1;

        box-sizing: border-box;
        border: 1px solid var(--yfm-color-table-border);
        border-radius: 8px;
        border-collapse: collapse;
        border-spacing: 0;
        background: var(--yfm-color-table-background);

        thead {
            background-color: var(--yfm-color-table-head-background);
        }

        tr:first-child {
            td,
            th {
                border-top: none;
            }
        }

        tr:last-child {
            td,
            th {
                border-bottom: none;
            }
        }

        th,
        td {
            padding: 10px 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            border: 1px solid var(--yfm-color-table-border);

            @include removeMarginForEdgeChildren();
        }

        td {
            vertical-align: top;
            white-space: normal;
        }

        th {
            font-weight: 500;
            text-align: left;
        }

        tr td:first-child,
        tr th:first-child {
            border-left: none;
        }
        tr td:last-child,
        tr th:last-child {
            border-right: none;
        }
    }

    &:not(.yfm_no-stripe-table) table tr:nth-child(2n) {
        background-color: var(--yfm-color-table-stripe-row-background);
    }

    hr {
        box-sizing: content-box;
        height: 0.25em;
        padding: 0;
        margin: 1.5em 0;
        overflow: hidden;

        background-color: var(--yfm-color-border);
        border: none;

        &::before {
            content: '';
            display: table;
        }

        &::after {
            content: '';
            display: table;
            clear: both;
        }
    }

    blockquote {
        position: relative;
        padding-left: 12px;
        border-left: 3px solid var(--yfm-color-accent);

        @include removeMarginForEdgeChildren();
    }

    dl {
        padding: 0;

        @include removeMarginForEdgeChildren();

        dt {
            margin-bottom: 5px;
            font-size: 1em;
            font-weight: bold;
        }

        dd {
            margin-bottom: 15px;
            padding: 0 15px;
        }
    }

    dd {
        margin-left: 0;
    }

    ul,
    ol {
        padding-left: 2.2em;
    }

    ul ul:last-child,
    ul ol:last-child,
    ol ol:last-child,
    ol ul:last-child {
        margin-top: 0;
        margin-bottom: 0;
    }

    li {
        word-wrap: break-word;
    }

    li:first-child,
    li + li {
        margin-block: var(--yfm-list-item-margin-block, 0.33em 0);
    }

    li {
        p,
        blockquote {
            margin-block: var(--yfm-list-text-margin-block, 0 15px);
        }

        > p:only-of-type,
        > blockquote:only-of-type,
        > p:first-child:has(+ ul),
        > p:first-child:has(+ ol) {
            margin-block: var(--yfm-list-text-only-margin-block, 0);
        }

        > p:last-child {
            margin-block: var(--yfm-list-text-last-margin-block, 0);
        }
    }

    code {
        padding: 0.1em 0.4em 0.15em;
        background-color: var(--yfm-color-inline-code-background);
        border-radius: 4px;
        font-size: 0.875em;
        white-space: pre-wrap;
        color: var(--yfm-color-inline-code);
        tab-size: var(--yfm-tab-size-code, inherit);
    }

    a code {
        color: inherit;
    }

    pre {
        word-wrap: normal;
    }

    table code {
        white-space: nowrap;
    }

    pre * code {
        display: inline;
        padding: 0;
        margin: 0;
        overflow: visible;
        word-wrap: normal;
        background-color: transparent;
        border: 0;
        color: var(--yfm-color-text);
    }

    pre > code {
        display: block;
        padding: 16px;
        overflow: auto;

        background-color: var(--yfm-color-code-background);
        color: var(--yfm-color-text);

        white-space: pre;

        .yfm-line-number {
            display: inline-block;
            padding-right: 1em;
            color: var(--yfm-color-line-numbers, #666);
            user-select: none;
        }
    }

    sup,
    sub {
        line-height: 0;
    }

    /*
        Hides element visually, but leaves it visible for search crawlers and screen readers

        https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
        https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
    */
    .visually-hidden {
        position: absolute;

        overflow: hidden;
        clip: rect(0 0 0 0);

        width: 1px;
        height: 1px;
        margin: -1px;

        padding: 0;

        white-space: nowrap;

        border: 0;

        clip-path: inset(100%);
        user-select: none;
    }
}
