@import './mixins';
@import './variables';

.dc-doc-page .yfm {
    color: var(--yc-color-text-primary);

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

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

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

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

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

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

    code {
        font-size: var(--dc-code-short-font-size);
        line-height: var(--dc-code-short-line-height);
        padding: var(--dc-code-short-padding);
        background: var(--yc-color-base-misc);
        color: var(--yc-color-text-misc);
    }

    pre > code {
        font-size: var(--dc-code-font-size);
        line-height: var(--dc-code-line-height);
        padding: 16px;
        background: var(--yc-color-base-misc);
        color: var(--yc-color-text-complementary);
    }

    dfn {
        background: var(--yc-color-base-float);
        box-shadow: 0 8px 20px var(--yc-color-sfx-shadow);
    }

    dfn:before {
        box-shadow: 0 0 0 1px var(--yc-popup-border-color);
    }

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

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

    hr {
        background-color: var(--yc-color-base-background);
    }

    blockquote {
        border-left-color: var(--yc-color-base-special);
    }

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

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

    .yfm-tab.active {
        border-bottom-color: var(--yc-color-base-special);
    }

    /* TODO: move yfm-cut styles to yfm-transform */
    .yfm-cut {
        margin-bottom: $blockMarginBottomMedium;
    }

    .yfm-cut.open .yfm-cut-content {
        padding: 5px 0 0 30px;
    }

    .yfm-term_title:hover {
        color: var(--yc-color-text-link-hover);
    }

    // Margin collapse is not applied for a block and header with a negative margin.
    // The margin is summed up. So, we need to take 15px away from the header margin-top
    h1,
    h2 {
        @include fixAnchorPosition(calc(#{$headerMarginTopLarge} - #{$blockMarginBottomMedium}));
        margin-bottom: $blockMarginBottomLarge;
    }

    h3,
    h4,
    h5,
    h6 {
        @include fixAnchorPosition(calc(#{$headerMarginTopMedium} - #{$blockMarginBottomMedium}));
    }

    h1 + h2,
    h2 + h3,
    h3 + h4,
    h4 + h5,
    h5 + h6 {
        @include fixAnchorPosition();
    }

    // Use 0px for the top offset of the header if it is the first child element,
    // because it is located after the page title
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        &:first-child {
            @include fixAnchorPosition();
        }
    }

    .yfm-page__delimeter {
        height: 4px;
        border-radius: 2px;
        background: var(--yc-color-line-generic);
        margin-top: 20px;
        margin-bottom: 0;

        & + h1,
        & + h2,
        & + h3,
        & + h4,
        & + h5,
        & + h6 {
            @include fixAnchorPosition(#{$headerMarginTopLarge});
        }
    }

    .yfm-original-link {
        &:before {
            content: none;
        }
        & svg {
            visibility: hidden;
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        .yfm-original-link::before {
            content: none;
        }
        .yfm-original-link svg {
            visibility: hidden;
        }
        &:hover .yfm-original-link svg {
            visibility: visible;
        }
    }

    /* stylelint-disable declaration-no-important */
    .yfm-anchor_hidden {
        visibility: hidden;
        &:before {
            visibility: hidden !important;
        }
    }
    /* stylelint-enable declaration-no-important */
}

.yc-root_theme_dark .dc-doc-page .yfm {
    .yfm-cut-title:before {
        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggc3Ryb2tlPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNykiIGZpbGw9Im5vbmUiIGQ9Ik0zIDZsNSA1IDUtNSI+PC9wYXRoPjwvc3ZnPg==');
    }
}