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

body {
    --footer-img-height: 220px;
    --footer-img-opacity: 0.2;
    --footer-img-color: rgb(var(--mono-rgb-100));
}

.footer-img-accent {
    --footer-img-color: var(--color-accent);
}
.footer-img-gray {
    --footer-img-color: var(--color-gray);
}
.footer-img-brown {
    --footer-img-color: var(--color-brown);
}
.footer-img-red {
    --footer-img-color: var(--color-red);
}
.footer-img-orange {
    --footer-img-color: var(--color-orange);
}
.footer-img-yellow {
    --footer-img-color: var(--color-yellow);
}
.footer-img-green {
    --footer-img-color: var(--color-green);
}
.footer-img-cyan {
    --footer-img-color: var(--color-cyan);
}
.footer-img-blue {
    --footer-img-color: var(--color-blue);
}
.footer-img-purple {
    --footer-img-color: var(--color-purple);
}
.footer-img-pink {
    --footer-img-color: var(--color-pink);
}

@media screen {
    .footer-img,
    .footer-img-accent,
    .footer-img-gray,
    .footer-img-brown,
    .footer-img-red,
    .footer-img-orange,
    .footer-img-yellow,
    .footer-img-green,
    .footer-img-cyan,
    .footer-img-blue,
    .footer-img-purple,
    .footer-img-pink {
        background-color: var(--workleaves-background);

        > .markdown-preview-section > div:nth-last-child(1 of div.el-p) {
            --image-shadow-offset: 0;
            position: sticky;
            bottom: -6px;
            width: calc(100cqw + 2 * var(--file-margins-inline));
            margin-left: calc(50% - 50cqw - var(--file-margins-inline));
            transform: translateY(calc(var(--file-margins-block) + 1px));
            background-color: black;
            mix-blend-mode: multiply;
            opacity: var(--footer-img-opacity);
            pointer-events: none;

            p {
                margin: 0;
                background-color: var(--footer-img-color);
                mix-blend-mode: exclusion;
                color: white;
            }

            img {
                height: var(--footer-img-height);
                width: 100%;
                object-fit: cover;
                object-position: center top;
                filter: saturate(0);
                mix-blend-mode: luminosity;
            }
        }

        > .markdown-preview-sizer {
            padding-bottom: 0 !important;
        }
    }

    .theme-dark [class*="footer-img"] > .markdown-preview-section > div:nth-last-child(1 of div.el-p) {
        background-color: white;
        mix-blend-mode: screen;

        p {
            background-color: rgb(from var(--footer-img-color) calc(255 - r) calc(255 - g) calc(255 - b));
        }
    }
}

@media print {
    .print [class*="footer-img"] > div:last-child img {
        display: none;
    }
}
