/* GPLv3 license
FAS - Banner
Author: ElsaTam (Kapirklaa in Discord)
*/
/* Compatibility with ITS theme/snippets */
.markdown-source-view > div, .markdown-preview-view {
  container: markdown-view/inline-size;
}

.markdown-preview-section {
  anchor-name: --anchor-preview-section;
}

.view-content {
  anchor-name: --view-content;
}

body {
  --workleaves-background: var(--background-primary);
  --workleaves-foreground: var(--text-normal);
}

body {
  --file-margins-block: var(--size-4-8);
  --file-margins-inline: var(--size-4-8);
  --file-margins: var(--file-margins-block) var(--file-margins-inline);
}

.is-mobile {
  --file-margins-block: var(--size-4-2);
  --file-margins-inline: var(--size-4-6);
}

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);
  }
  .footer-img > .markdown-preview-section > div:nth-last-child(1 of div.el-p),
  .footer-img-accent > .markdown-preview-section > div:nth-last-child(1 of div.el-p),
  .footer-img-gray > .markdown-preview-section > div:nth-last-child(1 of div.el-p),
  .footer-img-brown > .markdown-preview-section > div:nth-last-child(1 of div.el-p),
  .footer-img-red > .markdown-preview-section > div:nth-last-child(1 of div.el-p),
  .footer-img-orange > .markdown-preview-section > div:nth-last-child(1 of div.el-p),
  .footer-img-yellow > .markdown-preview-section > div:nth-last-child(1 of div.el-p),
  .footer-img-green > .markdown-preview-section > div:nth-last-child(1 of div.el-p),
  .footer-img-cyan > .markdown-preview-section > div:nth-last-child(1 of div.el-p),
  .footer-img-blue > .markdown-preview-section > div:nth-last-child(1 of div.el-p),
  .footer-img-purple > .markdown-preview-section > div:nth-last-child(1 of div.el-p),
  .footer-img-pink > .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;
  }
  .footer-img > .markdown-preview-section > div:nth-last-child(1 of div.el-p) p,
  .footer-img-accent > .markdown-preview-section > div:nth-last-child(1 of div.el-p) p,
  .footer-img-gray > .markdown-preview-section > div:nth-last-child(1 of div.el-p) p,
  .footer-img-brown > .markdown-preview-section > div:nth-last-child(1 of div.el-p) p,
  .footer-img-red > .markdown-preview-section > div:nth-last-child(1 of div.el-p) p,
  .footer-img-orange > .markdown-preview-section > div:nth-last-child(1 of div.el-p) p,
  .footer-img-yellow > .markdown-preview-section > div:nth-last-child(1 of div.el-p) p,
  .footer-img-green > .markdown-preview-section > div:nth-last-child(1 of div.el-p) p,
  .footer-img-cyan > .markdown-preview-section > div:nth-last-child(1 of div.el-p) p,
  .footer-img-blue > .markdown-preview-section > div:nth-last-child(1 of div.el-p) p,
  .footer-img-purple > .markdown-preview-section > div:nth-last-child(1 of div.el-p) p,
  .footer-img-pink > .markdown-preview-section > div:nth-last-child(1 of div.el-p) p {
    margin: 0;
    background-color: var(--footer-img-color);
    mix-blend-mode: exclusion;
    color: white;
  }
  .footer-img > .markdown-preview-section > div:nth-last-child(1 of div.el-p) img,
  .footer-img-accent > .markdown-preview-section > div:nth-last-child(1 of div.el-p) img,
  .footer-img-gray > .markdown-preview-section > div:nth-last-child(1 of div.el-p) img,
  .footer-img-brown > .markdown-preview-section > div:nth-last-child(1 of div.el-p) img,
  .footer-img-red > .markdown-preview-section > div:nth-last-child(1 of div.el-p) img,
  .footer-img-orange > .markdown-preview-section > div:nth-last-child(1 of div.el-p) img,
  .footer-img-yellow > .markdown-preview-section > div:nth-last-child(1 of div.el-p) img,
  .footer-img-green > .markdown-preview-section > div:nth-last-child(1 of div.el-p) img,
  .footer-img-cyan > .markdown-preview-section > div:nth-last-child(1 of div.el-p) img,
  .footer-img-blue > .markdown-preview-section > div:nth-last-child(1 of div.el-p) img,
  .footer-img-purple > .markdown-preview-section > div:nth-last-child(1 of div.el-p) img,
  .footer-img-pink > .markdown-preview-section > div:nth-last-child(1 of div.el-p) img {
    height: var(--footer-img-height);
    width: 100%;
    object-fit: cover;
    object-position: center top;
    filter: saturate(0);
    mix-blend-mode: luminosity;
  }
  .footer-img > .markdown-preview-sizer,
  .footer-img-accent > .markdown-preview-sizer,
  .footer-img-gray > .markdown-preview-sizer,
  .footer-img-brown > .markdown-preview-sizer,
  .footer-img-red > .markdown-preview-sizer,
  .footer-img-orange > .markdown-preview-sizer,
  .footer-img-yellow > .markdown-preview-sizer,
  .footer-img-green > .markdown-preview-sizer,
  .footer-img-cyan > .markdown-preview-sizer,
  .footer-img-blue > .markdown-preview-sizer,
  .footer-img-purple > .markdown-preview-sizer,
  .footer-img-pink > .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;
  }
  .theme-dark [class*=footer-img] > .markdown-preview-section > div:nth-last-child(1 of div.el-p) 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;
  }
}
