/* GPLv3 license
FAS - Background image
Author: ElsaTam (Kapirklaa in Discord)
*/
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);
}

.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 */
  .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) .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 */
  .markdown-preview-view:is(.background-img, .bg-img) {
    padding: 0;
  }
  .markdown-preview-view:is(.background-img, .bg-img) > :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) {
  .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) {
  .markdown-source-view:is(.background-img, .bg-img),
  .markdown-preview-view:is(.background-img, .bg-img) {
    background-repeat: repeat;
  }
}
: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 .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;
  }
}
