@import './mixins.scss';
@import './variables.scss';
@import '@gravity-ui/page-constructor/styles/yfm.scss';

.yfm_blog {
    $root: &;

    @include text-size(body-3);
    color: var(--g-color-text-primary);

    h1:first-child,
    h2:first-child,
    h3:first-child,
    h4:first-child {
        padding: 0;
        margin-top: 0;
        padding-top: 0;
    }

    h2 {
        @include text-size(display-2);
    }

    h3 {
        @include text-size(header-2);
    }

    h4 {
        @include text-size(header-1);
    }

    @include add-specificity(&) {
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin-bottom: $indentXS;
            margin-top: $indentM;
            padding-top: 0;
            font-weight: var(--g-text-header-font-weight);
        }
    }

    blockquote,
    dl,
    ol,
    p,
    pre,
    table,
    ul {
        margin: 0 0 $indentXS;
    }

    *:has(+ dfn) {
        //stylelint-disable-next-line declaration-no-important
        margin-bottom: 0 !important;
    }

    img {
        margin-bottom: $indentM;
        margin-top: $indentXS;
        border-radius: $indentSM;
    }

    hr {
        height: 1px;
    }

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

    code {
        color: var(--g-color-text-misc);
    }

    pre > code {
        color: var(--g-color-text-primary);
    }

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

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

    &_media {
        @include text-size(body-3);
        color: var(--g-color-text-secondary);
    }

    &_breadcrumbs {
        @include text-size(body-2);
        color: var(--g-text-color-base);
    }

    &_description {
        color: var(--g-color-text-primary);
    }

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

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

        @include focusable(0, 'box-shadow');

        &:focus {
            outline: 0;
        }
    }

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

        &.active {
            border-bottom-color: var(--g-color-text-link);
        }
    }

    .yfm-clipboard {
        margin: $indentM 0;
    }
}

.yfm_blog_card {
    p {
        color: var(--pc-text-header-color);
    }
}

.yfm_heading {
    @include add-specificity(&) {
        font-family: var(--g-text-display-font-family);
    }
}