/*
    Make.MD Contexts: Gradient Banners
    Gradient Banners

    https://i.imgur.com/o3e6GTa.png
    https://github.com/replete/obsidian-minimal-theme-css-snippets
*/
:root {
    --replete-banner-fade-offset: 2; /* integer */
}
.mk-inline-context {

    .mk-path-context-component {
        
        &:has(.mk-space-banner) {
            /* Moves the note text above the fade of the banner */
            height:calc(var(--replete-banner-height) / var(--replete-banner-fade-offset));
        }
    }

    .mk-space-banner {
        &::after {
            content:'';
            display: block;
            width:100%;
            height:100%;
            left:0;
            top:0;
            background:
                linear-gradient(to bottom, transparent 20%, var(--background-primary)),
                linear-gradient(to bottom, transparent 60%, var(--background-primary));
            position: absolute;
            pointer-events:none;
        }

        img {
            /* Disable magnify cursor */
            cursor:default !important
        }
    }
}