@forward "../shared/markdown-container";
@forward "../shared/markdown-anchor";
@forward "../shared/file-margins";

$img-embed-sel: ".mod-header + div + div > p > .image-embed:nth-child(1 of .image-embed)";
$img-embed-sel-print: ".mod-frontmatter + div > p > .image-embed:nth-child(1 of .image-embed)";

body {
    --banner-height: 300px;
    --banner-title-shadow-size: 0.5em;
    --banner-title-shadow:
        0px 0px calc(var(--banner-title-shadow-size) * 0.2) rgb(var(--mono-rgb-0)),
        0px 0px calc(var(--banner-title-shadow-size) * 0.5) rgb(var(--mono-rgb-0)),
        0px 0px var(--banner-title-shadow-size) rgb(var(--mono-rgb-0));
    --banner-slope-angle: 4deg;
    --banner-slope-border-width: 5px;
    --banner-slope-border-color: var(--color-accent);
    --banner-width: calc(100cqw + 2 * var(--file-margins-inline));
    --banner-print-width: full-bleed;
}

.is-mobile {
    --banner-height: 180px;
    --banner-slope-border-width: 4px;
}

@mixin image-banner {
    --image-shadow-offset: 0;
    display: block;

    position: absolute;
    z-index: -1;

    width: var(--banner-width);
    height: var(--banner-height);

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    + br {
        display: none;
    }
}

.markdown-preview-view.banner {
    --inline-title-margin-bottom: 0;
    --page-title-color: var(--text-normal);

    isolation: isolate;

    #{$img-embed-sel} {
        top: 0;
        left: 0;
        @include image-banner;
    }

    .inline-title,
    .page-header {
        position: absolute;
        top: var(--file-margins-block);
        left: var(--file-margins-inline);
        padding-top: 0;
        text-shadow: var(--banner-title-shadow);
    }
}

@media print {
    .print .markdown-preview-view.banner #{$img-embed-sel-print} {
        @include image-banner;
    }
    @container not style(--banner-print-width: full-bleed) {
        .print {
            --banner-width: calc(100cqw);
        }
        .print .markdown-preview-view.banner #{$img-embed-sel-print} {
            top: var(--file-margins-block);
            left: var(--file-margins-inline);
        }
        .print .markdown-preview-view.banner {
            padding-top: calc(var(--banner-height) + var(--file-margins-block));
        }
    }
    @container style(--banner-print-width: full-bleed) {
        .print .markdown-preview-view.banner #{$img-embed-sel-print} {
            top: 0;
            left: 0;
        }
        .print .markdown-preview-view.banner {
            padding-top: var(--banner-height);
        }
    }
}

// Properties hidden
.markdown-preview-view:not(.show-properties).banner > * > .mod-header,
.markdown-preview-view.hide-properties.banner > * > .mod-header {
    height: calc(var(--banner-height) - var(--file-margins-block));
    padding-bottom: var(--file-margins-block);
}

// Properties visible
@container not style(--metadata-display-reading: none) {
    .markdown-preview-view.show-properties.banner .metadata-container {
        margin-top: calc(var(--banner-height) - var(--file-margins-block) + 4px + 0.8em);
    }
}

@mixin image-banner-gradient {
    -webkit-mask-image: linear-gradient(to bottom, black var(--file-margins-block), transparent);
}

.markdown-preview-view.banner.banner-gradient {
    #{$img-embed-sel} {
        @include image-banner-gradient;
    }
}

@media print {
    .print .markdown-preview-view.banner.banner-gradient #{$img-embed-sel-print} {
        @include image-banner-gradient;
    }
}

.markdown-preview-view.banner.banner-title {
    --inline-title-line-height: 3;

    .inline-title,
    .page-header {
        position: absolute;
        top: calc(var(--banner-height) * 0.5);
        right: 50%;
        left: unset;
        transform: translate(50%, -50%);
        display: block;
        border: 1px solid var(--color-base-50);
        min-width: 50%;
        background-color: rgba(var(--mono-rgb-0), 0.4);
        backdrop-filter: blur(5px);
        text-shadow: none;
        text-align: center;
    }
}
.is-mobile .markdown-preview-view.banner.banner-title {
    --inline-title-line-height: 2;
}

@mixin image-banner-slope {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--banner-angle-height)), 0 100%);
    background-color: var(--banner-slope-border-color);

    img {
        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - var(--banner-angle-height) - var(--banner-slope-border-width)),
            0 calc(100% - var(--banner-slope-border-width))
        );
    }
}

.markdown-preview-view.banner.banner-slant,
.markdown-preview-view.banner.banner-slope {
    --inline-title-size: 4em;
    --inline-title-line-height: 1.5;

    --banner-angle-diag: calc(var(--banner-width) * sin(var(--banner-slope-angle)));
    --banner-angle-height: calc(var(--banner-angle-diag) / sin(90deg - var(--banner-slope-angle)));

    #{$img-embed-sel} {
        @include image-banner-slope;
    }

    .inline-title,
    .page-header {
        position: absolute;
        transform: rotate(calc(-1 * var(--banner-slope-angle)));
        transform-origin: bottom left;
        top: calc(var(--banner-height) - 1em - var(--banner-title-shadow-size));
        right: var(--file-margins-inline);
        left: 0;
        text-align: right;
    }
}

@supports (top: anchor(--anchor-preview-section top)) and (right: anchor(--anchor-preview-section right)) {
    .markdown-preview-view.banner:is(.banner-slant, .banner-slope) :is(.inline-title, .page-header) {
        top: calc(
            anchor(--anchor-preview-section top) + var(--banner-height) - var(--file-margins-block) -
                1em - var(--banner-title-shadow-size)
        );
        right: anchor(--anchor-preview-section right, var(--file-margins-inline));
    }
}

@media print {
    .print .markdown-preview-view.banner:is(.banner-slant, .banner-slope) #{$img-embed-sel-print} {
        @include image-banner-slope;
    }
}

.markdown-source-view.banner.banner-edit-hide,
.fas-banner-edit-hide .markdown-source-view.banner {
    .cm-contentContainer > div > .image-embed:nth-child(1 of div.image-embed) {
        --image-shadow-offset: 0;
        img {
            display: none;
        }
    }
}

.markdown-source-view.banner.banner-edit-icon,
.fas-banner-edit-icon .markdown-source-view.banner {
    .cm-contentContainer > div > .image-embed:nth-child(1 of div.image-embed) {
        --image-shadow-offset: 0;
        img {
            display: none;
        }
        &::after {
            content: "🖼️ banner";
            font-size: 12px;
            color: var(--text-muted);
        }
    }
}

@media (hover: hover) {
    .markdown-source-view.banner.banner-edit-icon,
    .fas-banner-edit-icon .markdown-source-view.banner {
        .cm-contentContainer > div > .image-embed:nth-child(1 of div.image-embed):hover img {
            position: absolute;
            display: block;
        }
    }
}

.markdown-source-view.banner.banner-edit-small,
.fas-banner-edit-small .markdown-source-view.banner {
    .cm-contentContainer > div > .image-embed:nth-child(1 of div.image-embed) {
        --image-shadow-offset: 0;
        img {
            max-width: 100px;
        }
    }
}
