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

:where(.markdown-rendered ul),
:where(.markdown-rendered ol) {
  display: flow-root;
}

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);
}

.callout[data-callout-metadata~=gray] {
  --callout-color: var(--color-gray-rgb);
}

.callout[data-callout-metadata~=brown] {
  --callout-color: var(--color-brown-rgb);
}

.callout[data-callout-metadata~=red] {
  --callout-color: var(--color-red-rgb);
}

.callout[data-callout-metadata~=orange] {
  --callout-color: var(--color-orange-rgb);
}

.callout[data-callout-metadata~=yellow] {
  --callout-color: var(--color-yellow-rgb);
}

.callout[data-callout-metadata~=green] {
  --callout-color: var(--color-green-rgb);
}

.callout[data-callout-metadata~=cyan] {
  --callout-color: var(--color-cyan-rgb);
}

.callout[data-callout-metadata~=blue] {
  --callout-color: var(--color-blue-rgb);
}

.callout[data-callout-metadata~=purple] {
  --callout-color: var(--color-purple-rgb);
}

.callout[data-callout-metadata~=pink] {
  --callout-color: var(--color-pink-rgb);
}

.callout[data-callout-metadata~=black] {
  --callout-color: 0, 0, 0;
}

.callout[data-callout-metadata~=white] {
  --callout-color: 255, 255, 255;
}

[data-callout-metadata~=accent] {
  border-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l), var(--callout-border-opacity));
  background-color: hsl(var(--accent-h), var(--accent-s), var(--accent-l), 0.1);
}
[data-callout-metadata~=accent] > .callout-title {
  color: var(--color-accent);
}
[data-callout-metadata~=accent] > .callout-title .svg-icon {
  color: var(--color-accent);
}

.callout[data-callout-metadata~=no-bg],
.callout[data-callout-metadata~=no-bg] > .callout-content,
.callout[data-callout-metadata~=no-bg] > .callout-title,
.callout[data-callout-metadata~=no-background],
.callout[data-callout-metadata~=no-background] > .callout-content,
.callout[data-callout-metadata~=no-background] > .callout-title {
  background: none;
}

.callout[data-callout-metadata~=black-and-white] img,
.callout[data-callout-metadata~=b-w] img {
  filter: grayscale(100);
}

.callout[data-callout-metadata~=no-icon] > .callout-title > .callout-icon {
  display: none;
}

.callout[data-callout-metadata~=no-title] > .callout-title {
  display: none;
}

.callout[data-callout-metadata~=no-title] > .callout-content {
  border: none;
}

.callout[data-callout-metadata~=blank] {
  margin: 0;
  mix-blend-mode: none;
  border-radius: 0;
}
.callout[data-callout-metadata~=blank],
.callout[data-callout-metadata~=blank] > .callout-content {
  border: none;
  background: none;
  padding: 0;
}
.callout[data-callout-metadata~=blank] > .callout-title {
  display: none;
}

.markdown-preview-view .callout[data-callout-metadata~=wide] {
  position: relative;
  --w: calc(0.95 * (100cqw + 2 * var(--file-margins-inline)));
  width: var(--w);
  left: calc(50% - var(--w) * 0.5);
}
.markdown-preview-view .callout[data-callout-metadata~=wide] .callout-title {
  justify-content: center;
}

@media (width > 600px) {
  .markdown-preview-view .callout:is([data-callout-metadata~=right], [data-callout-metadata~=float-right]) {
    float: right;
    clear: right;
    margin: var(--fas-float-inline-margin, 12px) 0 var(--fas-float-inline-margin, 12px) var(--fas-float-inline-margin, 12px);
    max-width: 300px;
  }
  @container not (style(--image-shadow-offset: 0) or style(--image-shadow-offset: 0px)) {
    .markdown-preview-view .callout:is([data-callout-metadata~=right], [data-callout-metadata~=float-right]) img {
      max-width: min(100%, 299px - var(--image-shadow-offset));
    }
  }
  .markdown-preview-view .callout:is([data-callout-metadata~=left], [data-callout-metadata~=float-left]) {
    float: left;
    clear: left;
    margin: var(--fas-float-inline-margin, 12px) var(--fas-float-inline-margin, 12px) var(--fas-float-inline-margin, 12px) 0;
    max-width: 300px;
  }
  @container not (style(--image-shadow-offset: 0) or style(--image-shadow-offset: 0px)) {
    .markdown-preview-view .callout:is([data-callout-metadata~=left], [data-callout-metadata~=float-left]) img {
      max-width: min(100%, 299px - var(--image-shadow-offset));
    }
  }
}
.callout[data-callout-metadata~=clear] {
  clear: both;
}

.callout[data-callout-metadata~=no-blending] {
  --callout-blend-mode: normal;
}

.callout[data-callout-metadata~=center-title] .callout-title-inner {
  flex-grow: 1;
  text-align: center;
}

.callout[data-callout-metadata~=table-fixed] table {
  table-layout: fixed;
  width: 100%;
}

.callout[data-callout-metadata~=overflow],
.callout[data-callout-metadata~=overflow] .callout-content {
  overflow: visible;
}

body {
  --callout-handwritten-font: "Lucida Handwriting", "Comic Sans MS", "Brush Script MT", cursive;
  --callout-monospace-font: var(--font-monospace);
  --callout-sans-serif-font: "Noto", "Arial", serif;
}

.callout[data-callout-metadata~=handwritten] {
  font-family: var(--callout-handwritten-font);
}

.callout[data-callout-metadata~=monospace] {
  font-family: var(--callout-monospace-font);
}

.callout[data-callout-metadata~=sans-serif] {
  font-family: var(--callout-sans-serif-font);
}
