body {
    --fas-note-background-image-url: url("");
    --fas-note-background-image-blend-mode-dark: normal;
    --fas-note-background-image-blend-mode-light: normal;
    --fas-note-background-image-repeat: no;
    --fas-note-background-image-blur: 0px;
    --fas-note-background-image-opacity: 1;
    --fas-note-background-image-brightness-dark: 1;
    --fas-note-background-image-brightness-light: 1;
}

.theme-dark {
    --fas-note-background-image-blend-mode: var(--fas-note-background-image-blend-mode-dark);
    --fas-note-background-image-brightness: var(--fas-note-background-image-brightness-dark);
}

.theme-light {
    --fas-note-background-image-blend-mode: var(--fas-note-background-image-blend-mode-light);
    --fas-note-background-image-brightness: var(--fas-note-background-image-brightness-light);
}

.fas-note-background-image .markdown-source-view:not(.no-background, .no-bg),
.fas-note-background-image .markdown-preview-view:not(.no-background, .no-bg),
.markdown-source-view:is(.background-img, .bg-img),
.markdown-preview-view:is(.background-img, .bg-img) {
    background-color: var(--workleaves-background);
    background-image: var(--fas-note-background-image-url);
    background-blend-mode: var(--fas-note-background-image-blend-mode);
}

@container (not (style(--fas-note-background-image-blur: 0) or style(--fas-note-background-image-blur: 0px))) or (not style(--fas-note-background-image-opacity: 1)) or (not style(--fas-note-background-image-brightness: 1)) {
    /* Source */
    .fas-note-background-image .markdown-source-view:not(.no-background, .no-bg) .cm-editor,
    .markdown-source-view:is(.background-img, .bg-img) .cm-editor {
        background-color: color-mix(
            in srgb,
            var(--workleaves-background),
            transparent calc(100% * var(--fas-note-background-image-opacity))
        );
        backdrop-filter: blur(var(--fas-note-background-image-blur))
            brightness(var(--fas-note-background-image-brightness));
    }

    /* Preview scrollbar */
    body:not(.native-scrollbars).fas-note-background-image
        .markdown-preview-view:not(.no-background, .no-bg)::-webkit-scrollbar-track,
    body:not(.native-scrollbars) .markdown-preview-view:is(.background-img, .bg-img)::-webkit-scrollbar-track {
        background-color: color-mix(
            in srgb,
            var(--workleaves-background),
            transparent calc(100% * var(--fas-note-background-image-opacity))
        );
    }

    /* Preview, needs resizing so it covers the whole image */
    .fas-note-background-image .markdown-preview-view:not(.no-background, .no-bg),
    .markdown-preview-view:is(.background-img, .bg-img) {
        padding: 0;

        > :first-child {
            padding-block: var(--file-margins-block);
            padding-inline: max(
                var(--file-margins-inline),
                0.5 * (100% - var(--file-margins-inline) - var(--file-line-width)) + var(--scrollbar-width)
            );
            max-width: 100%;
            background-color: color-mix(
                in srgb,
                var(--workleaves-background),
                transparent calc(100% * var(--fas-note-background-image-opacity))
            );
            backdrop-filter: blur(var(--fas-note-background-image-blur))
                brightness(var(--fas-note-background-image-brightness));
        }
    }
}

@container style(--fas-note-background-image-repeat: no) {
    .fas-note-background-image .markdown-source-view:not(.no-background, .no-bg),
    .fas-note-background-image .markdown-preview-view:not(.no-background, .no-bg),
    .markdown-source-view:is(.background-img, .bg-img),
    .markdown-preview-view:is(.background-img, .bg-img) {
        background-size: cover;
        background-position: center;
    }
}

@container style(--fas-note-background-image-repeat: yes) {
    .fas-note-background-image .markdown-source-view:not(.no-background, .no-bg),
    .fas-note-background-image .markdown-preview-view:not(.no-background, .no-bg),
    .markdown-source-view:is(.background-img, .bg-img),
    .markdown-preview-view:is(.background-img, .bg-img) {
        background-repeat: repeat;
    }
}

.fas-note-background-image .markdown-preview-view:not(.no-background, .no-bg) .metadata-container,
.fas-note-background-image .markdown-source-view:not(.no-background, .no-bg) .metadata-container,
:is(.background-img, .bg-img) .metadata-container {
    background-color: color-mix(in srgb, var(--workleaves-background), transparent 30%);
    backdrop-filter: blur(5px);
}

@media print {
    body:not(.fas-print-note-background) .print {
        --fas-note-background-image-url: url("");
        --fas-note-background-image-blend-mode: normal;
        --fas-note-background-image-repeat: no;
        --fas-note-background-image-blur: 0px;
        --fas-note-background-image-opacity: 1;
        --fas-note-background-image-brightness: 1;
    }
}
