@import '~@gravity-ui/uikit/styles/mixins';
@import '~@diplodoc/transform/dist/css/base.css';
@import '~@diplodoc/transform/dist/css/_yfm-only.css';
@import '~@diplodoc/cut-extension/runtime/styles.css';
@import '~@diplodoc/tabs-extension/runtime/styles.css';
@import '../../styles/mixins';

// yfm overrides works only for main app
$rootClass: '.app-root.g-root';

// support yfm dark theme

#{$rootClass} {
    --yfm-code-background: var(--g-color-base-misc-light);
    --yfm-code-color: var(--g-color-text-misc-heavy);
    --yfm-pre-code-background: var(--g-color-base-misc-light);
    --yfm-pre-code-color: var(--g-color-text-complementary);
}

#{$rootClass} .yfm {
    --yfm-list-text-last-margin-block: 15px;
    --yfm-list-text-only-margin-block: 15px;
    --yfm-font-family-sans: var(--g-font-family-sans);
    --yfm-font-family-monospace: var(--g-font-family-monospace);
    --yfm-color-table-row-header-background-primary: transparent;

    font-family: var(--g-font-family-sans);
    @include yfm-text-style();

    // override common styles to make it look better with header widgets
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-weight: 500;
    }

    h6 {
        // reset to the default value in most browsers, because the default value for Mac OS is too high
        margin-block-start: 1.67em;
    }

    img {
        background: transparent;
    }

    p.yfm-latex {
        text-align: center;
        display: inline-block;

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

    p:last-of-type:has(~ template:last-of-type),
    p:last-of-type:has(~ dfn:last-of-type),
    .yfm-cut-content table:last-child,
    .yfm-note-content:last-child p:last-child,
    .mermaid p:last-child {
        margin-bottom: 0;
    }

    .yfm-cut:last-child .yfm-cut-content {
        padding-bottom: 0;
    }

    // only for inner yfm block, fixes for autoheight markdown
    .yfm:not(.yfm-term_title):not(.yfm-term_dfn) {
        display: table;

        p:has(.MagicLink),
        p:has(.yfm-latex) {
            display: table;
            padding: 0.3em 0;
        }
    }

    .yfm:not(.yfm-term_title):not(.yfm-term_dfn) {
        width: 100%;
    }

    /**
     * unset styles from @diplodoc/transform to fix clipboard button position on hover
     * https://github.com/diplodoc-platform/transform/issues/700
     */
    .yfm-clipboard:hover .yfm-clipboard-button {
        min-height: unset;
        min-width: unset;
    }

    .yfm .yfm-term_dfn {
        display: none;
    }
    .yfm .yfm-term_dfn.open {
        display: block;
    }
}

#{$rootClass} .yfm:not(.yfm_only-light) {
    color: var(--g-color-text-primary);

    --yfm-color-hljs-background: var(--g-color-base-background);
    --yfm-color-hljs-subst: var(--g-color-text-complementary);
    --yfm-color-hljs-comment: var(--g-color-text-secondary);
    --yfm-color-hljs-deletion: var(--g-color-text-danger);
    --yfm-color-hljs-section: var(--g-color-text-danger);

    a {
        color: var(--g-color-text-link);

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

    &.yfm_links-visited {
        a {
            &:visited {
                color: var(--g-color-text-link-visited);
            }

            &:visited:hover {
                color: var(--g-color-text-link-visited-hover);
            }
        }
    }

    img {
        background-color: var(--g-color-base-background);
    }

    $backgroundColors: (
        yfm-accent-info: var(--g-color-base-info-light),
        yfm-accent-tip: var(--g-color-base-positive-light),
        yfm-accent-alert: var(--g-color-base-danger-light),
        yfm-accent-warning: var(--g-color-base-warning-light),
    );

    @each $type, $color in $backgroundColors {
        &.#{$type} {
            background: $color;
        }
    }

    code {
        background: var(--yfm-code-background);
        color: var(--yfm-code-color);
    }

    pre > code {
        background: var(--yfm-pre-code-background);
        color: var(--yfm-pre-code-color);
    }

    table {
        color: var(--g-color-text-primary);
        border-color: var(--g-color-line-generic);
        background: var(--g-color-base-background);
    }

    table thead,
    table tr:nth-child(2n) {
        background: var(--g-color-base-generic);
    }

    hr {
        background-color: var(--g-color-line-generic);
    }

    blockquote {
        border-left-color: var(--g-color-line-brand);
    }

    .yfm-tab-list {
        border-bottom-color: var(--g-color-line-generic);
    }

    .yfm-tab:hover,
    .yfm-tab:active {
        color: var(--g-color-text-link-hover);
    }

    .yfm-tab.active {
        border-bottom-color: var(--g-color-line-brand);
    }

    .yfm-term_dfn {
        background: var(--g-color-base-float);
    }
}

// fix for reassign style by weight

#{$rootClass} .editor-page div.yfm * img,
#{$rootClass} .dash-app div.yfm * img,
#{$rootClass} .app div.yfm * img {
    background: transparent;
}

#{$rootClass}_theme_dark .yfm,
#{$rootClass}_theme_dark-hc .yfm {
    .yfm-cut-title:before {
        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggc3Ryb2tlPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNykiIGZpbGw9Im5vbmUiIGQ9Ik0zIDZsNSA1IDUtNSI+PC9wYXRoPjwvc3ZnPg==');
    }
}

#{$rootClass} .yfm .yfm-colorify {
    $colors: (
        'gray': '--g-color-text-secondary',
        'yellow': '--g-color-text-warning',
        'orange': '--g-color-text-warning-heavy',
        'red': '--g-color-text-danger',
        'green': '--g-color-text-positive',
        'blue': '--g-color-text-info',
        'violet': '--g-color-text-utility',
    );

    @each $name, $value in $colors {
        --yfm-color-text-#{$name}: var(#{$value});
    }

    // for already colored to black text
    --yfm-colorify-black: var(--g-color-text-primary);

    @each $name, $value in $colors {
        --yfm-colorify-#{$name}: var(--yfm-color-text-#{$name});
    }

    @each $name, $_ in $colors {
        &.yfm-colorify--#{$name} > .yfm,
        &.yfm-colorify--#{$name} {
            color: var(--yfm-colorify-#{$name});
        }
    }
}

#{$rootClass}_theme_dark .yfm .yfm-colorify,
#{$rootClass}_theme_dark-hc .yfm .yfm-colorify {
    --yfm-color-text-orange: var(--g-color-private-orange-750-solid);
}
