.view-content {
    z-index: 0;
}

.markdown-preview-view.markdown-preview-view {
    .image-embed[alt~="background"],
    img[alt~="background"]:not(.image-embed *) {
        --image-shadow-offset: 0;
        margin: 0px auto;
        position: fixed;
        width: calc(100cqw + 2 * var(--file-margins-inline));
        height: 100cqh;
        bottom: 0;
        top: 0;
        left: 0;
        z-index: -1;

        mix-blend-mode: var(--fas-note-background-image-blend-mode);
        opacity: var(--fas-note-background-image-opacity);
        filter: blur(var(--fas-note-background-image-blur)) brightness(var(--fas-note-background-image-brightness));
    }

    img[alt~="background"] {
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: center top;
    }
}

.markdown-source-view.markdown-source-view {
    .image-embed[alt~="edit-hide"],
    img[alt~="edit-hide"]:not(.image-embed *) {
        --image-shadow-offset: 0;
        font-size: inherit;
        opacity: 0;
        height: calc(1em * var(--line-height-normal));
        padding: unset;
        display: block;
        width: unset;
        position: unset;
        img {
            height: 100%;
        }
    }

    .image-embed[alt~="edit-icon"] {
        --image-shadow-offset: 0;
        font-size: inherit;
        img {
            display: none;
        }
        &:hover img {
            position: absolute;
            display: block;
        }
        &::after {
            content: "🖼️ background";
            font-size: 12px;
            color: var(--text-muted);
        }
    }

    .image-embed[alt~="edit-small"],
    img[alt~="edit-small"]:not(.image-embed *) {
        --image-shadow-offset: 0;
        max-width: 100px;
    }
}
