/* GPLv3 license
FAS - Callout Fas Infobox
Author: ElsaTam (Kapirklaa in Discord)
*/
/*
    Inspired by ITS theme's infobox callouts from SlRvb (https://publish.obsidian.md/slrvb-docs/ITS+Theme/Callouts/Callout+-+Infoboxes)
*/
:where(.markdown-rendered ul),
:where(.markdown-rendered ol) {
  display: flow-root;
}

@media (width > 600px) {
  body {
    --fas-infobox-padding: var(--size-4-3);
    --fas-infobox-max-width: 300px;
  }
}
:where .callout[data-callout=infobox][data-callout-metadata~=full-width],
.callout[data-callout=fas-infobox][data-callout-metadata~=full-width] {
  --fas-infobox-max-width: 100%;
}

:where .callout[data-callout=infobox],
.callout[data-callout=fas-infobox] {
  --callout-content-padding: 0;
  --image-shadow-offset: 0;
  --hr-color: rgba(var(--callout-color), var(--callout-border-opacity));
  --heading-spacing: var(--p-spacing);
  max-width: var(--fas-infobox-max-width, 100%);
}
:where .callout[data-callout=infobox] .callout-title,
.callout[data-callout=fas-infobox] .callout-title {
  justify-content: center;
}
:where .callout[data-callout=infobox] .callout-icon,
.callout[data-callout=fas-infobox] .callout-icon {
  display: none;
}
:where .callout[data-callout=infobox] h1,
:where .callout[data-callout=infobox] h2,
:where .callout[data-callout=infobox] h3,
:where .callout[data-callout=infobox] h4,
:where .callout[data-callout=infobox] h5,
:where .callout[data-callout=infobox] h6,
.callout[data-callout=fas-infobox] h1,
.callout[data-callout=fas-infobox] h2,
.callout[data-callout=fas-infobox] h3,
.callout[data-callout=fas-infobox] h4,
.callout[data-callout=fas-infobox] h5,
.callout[data-callout=fas-infobox] h6 {
  text-align: center;
}
:where .callout[data-callout=infobox] p:first-child,
:where .callout[data-callout=infobox] h1 + p,
.callout[data-callout=fas-infobox] p:first-child,
.callout[data-callout=fas-infobox] h1 + p {
  margin-top: 0;
}
:where .callout[data-callout=infobox] > .callout-content > *,
.callout[data-callout=fas-infobox] > .callout-content > * {
  padding-inline: var(--fas-infobox-padding, 0);
}
:where .callout[data-callout=infobox] .callout-content hr:not(.sci-fi hr),
.callout[data-callout=fas-infobox] .callout-content hr:not(.sci-fi hr) {
  -webkit-mask-image: none;
  border-top: var(--hr-thickness) solid;
  border-color: var(--hr-color);
  height: unset;
}

/* tables */
:where .callout[data-callout=infobox],
.callout[data-callout=fas-infobox] {
  --table-row-alt-background: color-mix(in srgb, rgba(var(--callout-color), 0.2), rgba(var(--mono-rgb-0), 0.2) 50%);
  --table-border-color: rgba(var(--callout-color), var(--callout-border-opacity));
  --table-header-border-color: rgba(var(--callout-color), var(--callout-border-opacity));
}
:where .callout[data-callout=infobox] table,
.callout[data-callout=fas-infobox] table {
  width: 100%;
}
:where .callout[data-callout=infobox] table td,
.callout[data-callout=fas-infobox] table td {
  white-space: pre-wrap;
  word-wrap: normal;
  word-break: normal;
}
:where .callout[data-callout=infobox][data-callout-metadata~=no-thead] thead, :where .callout[data-callout=infobox][data-callout-metadata~=no-th] thead,
.callout[data-callout=fas-infobox][data-callout-metadata~=no-thead] thead,
.callout[data-callout=fas-infobox][data-callout-metadata~=no-th] thead {
  display: none;
}

/* images */
body {
  --infobox-icon-size: 70px;
  --infobox-background-blur: 1px;
  --infobox-background-opacity: 0.4;
}

:where .callout[data-callout=infobox],
.callout[data-callout=fas-infobox] {
  /* cover */
  /* icon */
  /* background */
}
:where .callout[data-callout=infobox] .image-embed[alt~=cover],
.callout[data-callout=fas-infobox] .image-embed[alt~=cover] {
  position: relative;
  display: block;
}
:where .callout[data-callout=infobox] .image-embed[alt~=cover]::after,
.callout[data-callout=fas-infobox] .image-embed[alt~=cover]::after {
  --triangle-size: 16px;
  content: "";
  display: block;
  position: absolute;
  bottom: calc(-0.5 * var(--triangle-size));
  left: calc(50% - 0.5 * var(--triangle-size));
  border-right: calc(0.5 * var(--triangle-size)) solid transparent;
  border-left: calc(0.5 * var(--triangle-size)) solid transparent;
  border-top: calc(0.5 * var(--triangle-size)) solid rgb(var(--callout-color));
  z-index: 1;
}
:where .callout[data-callout=infobox] img[alt*=cover],
.callout[data-callout=fas-infobox] img[alt*=cover] {
  max-width: var(--fas-infobox-max-width, 100%);
  width: calc(100% + 2 * var(--fas-infobox-padding, 0));
  margin-left: calc(-1 * var(--fas-infobox-padding, 0));
  border-bottom: 4px solid rgb(var(--callout-color));
}
:where .callout[data-callout=infobox] .image-embed[alt~=icon],
.callout[data-callout=fas-infobox] .image-embed[alt~=icon] {
  display: block;
  position: relative;
  height: var(--infobox-icon-size, 70px);
  width: var(--infobox-icon-size, 70px);
  margin-top: calc(-0.5 * var(--infobox-icon-size, 70px));
  z-index: 2;
}
:where .callout[data-callout=infobox] p + p > .image-embed[alt~=icon],
.callout[data-callout=fas-infobox] p + p > .image-embed[alt~=icon] {
  margin-top: calc(-0.5 * var(--infobox-icon-size, 70px) - var(--p-spacing) - var(--font-text-size));
}
:where .callout[data-callout=infobox] img[alt*=icon]:not(.image-embed img),
.callout[data-callout=fas-infobox] img[alt*=icon]:not(.image-embed img) {
  display: block;
  position: relative;
  margin-top: calc(-0.5 * var(--infobox-icon-size, 70px));
  z-index: 2;
}
:where .callout[data-callout=infobox] p + p > img[alt*=icon]:not(.image-embed img),
.callout[data-callout=fas-infobox] p + p > img[alt*=icon]:not(.image-embed img) {
  margin-top: calc(-0.5 * var(--infobox-icon-size, 70px) - var(--p-spacing) - var(--font-text-size));
}
:where .callout[data-callout=infobox] img[alt*=icon],
.callout[data-callout=fas-infobox] img[alt*=icon] {
  height: var(--infobox-icon-size, 70px);
  width: var(--infobox-icon-size, 70px);
  border: 2px solid rgb(var(--callout-color));
  object-fit: cover;
  z-index: 2;
  border-radius: 20%;
  background-color: var(--workleaves-background, var(--background-primary));
}
:where .callout[data-callout=infobox] .image-embed[alt~=background],
.callout[data-callout=fas-infobox] .image-embed[alt~=background] {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  overflow: hidden;
}
:where .callout[data-callout=infobox] .image-embed[alt~=background] img,
.callout[data-callout=fas-infobox] .image-embed[alt~=background] img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: blur(var(--infobox-background-blur, 1px));
  opacity: var(--infobox-background-opacity, 0.4);
}
:where .callout[data-callout=infobox] img[alt*=background]:not(.image-embed img),
.callout[data-callout=fas-infobox] img[alt*=background]:not(.image-embed img) {
  position: absolute;
  top: var(--callout-border-width);
  left: var(--callout-border-width);
  height: calc(100% - 2 * var(--callout-border-width));
  width: calc(100% - 2 * var(--callout-border-width));
  z-index: -1;
  object-fit: cover;
  filter: blur(var(--infobox-background-blur, 1px));
  opacity: var(--infobox-background-opacity, 0.4);
}

/* h1 ribbon */
:where .callout[data-callout=infobox],
.callout[data-callout=fas-infobox] {
  --overflow-width: 10px;
  --h1-line-height: 1.6;
}
:where .callout[data-callout=infobox],
:where .callout[data-callout=infobox] > .callout-content,
.callout[data-callout=fas-infobox],
.callout[data-callout=fas-infobox] > .callout-content {
  overflow: visible;
}
:where .callout[data-callout=infobox] h1,
.callout[data-callout=fas-infobox] h1 {
  color: var(--text-normal);
  width: calc(100% + 2 * var(--overflow-width));
  margin-block: 0;
  margin-inline: calc(-1 * var(--overflow-width));
  z-index: 1;
  position: relative;
  background: color-mix(in srgb, rgb(var(--callout-color)), rgb(var(--mono-rgb-0)) 20%);
  overflow: visible;
}
:where .callout[data-callout=infobox] h1:first-child,
.callout[data-callout=fas-infobox] h1:first-child {
  margin-top: -1px;
}
:where .callout[data-callout=infobox] h1::before,
:where .callout[data-callout=infobox] h1::after,
.callout[data-callout=fas-infobox] h1::before,
.callout[data-callout=fas-infobox] h1::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--overflow-width) + 1px);
  border-top: calc(var(--overflow-width) - 1px) solid color-mix(in srgb, rgb(var(--callout-color)), rgb(0, 0, 0) 60%);
}
:where .callout[data-callout=infobox] h1::before,
.callout[data-callout=fas-infobox] h1::before {
  left: 0;
  border-left: calc(var(--overflow-width) - 1px) solid transparent;
}
:where .callout[data-callout=infobox] h1::after,
.callout[data-callout=fas-infobox] h1::after {
  right: 0;
  border-right: calc(var(--overflow-width) - 1px) solid transparent;
}

:where .callout[data-callout=infobox][data-callout-metadata~=h1-title] .callout-title,
.callout[data-callout=fas-infobox][data-callout-metadata~=h1-title] .callout-title {
  padding: 0;
  position: relative;
}
:where .callout[data-callout=infobox][data-callout-metadata~=h1-title] .callout-title-inner,
.callout[data-callout=fas-infobox][data-callout-metadata~=h1-title] .callout-title-inner {
  flex-grow: 1;
}
:where .callout[data-callout=infobox][data-callout-metadata~=h1-title] .callout-title h1,
.callout[data-callout=fas-infobox][data-callout-metadata~=h1-title] .callout-title h1 {
  padding-inline: calc(var(--icon-size) + var(--size-4-2));
}
:where .callout[data-callout=infobox][data-callout-metadata~=h1-title] .callout-fold,
.callout[data-callout=fas-infobox][data-callout-metadata~=h1-title] .callout-fold {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  bottom: 0;
  transform: translateX(var(--overflow-width));
}
:where .callout[data-callout=infobox][data-callout-metadata~=h1-title] .callout-fold svg,
.callout[data-callout=fas-infobox][data-callout-metadata~=h1-title] .callout-fold svg {
  color: inherit;
}
:where .callout[data-callout=infobox][data-callout-metadata~=h1-title] .callout-content,
.callout[data-callout=fas-infobox][data-callout-metadata~=h1-title] .callout-content {
  border: none;
}

:is( :where .h1-stroke) .callout[data-callout=infobox] h1,
:is( .h1-stroke) .callout[data-callout=fas-infobox] h1 {
  display: block;
}
:is( :where .h1-stroke) .callout[data-callout=infobox] h1::before,
:is( :where .h1-stroke) .callout[data-callout=infobox] h1::after,
:is( .h1-stroke) .callout[data-callout=fas-infobox] h1::before,
:is( .h1-stroke) .callout[data-callout=fas-infobox] h1::after {
  background: none;
  height: unset;
}

/* footer */
:where .callout[data-callout=infobox] .callout[data-callout=footer],
.callout[data-callout=fas-infobox] .callout[data-callout=footer] {
  --callout-blend-mode: normal;
  background: color-mix(in srgb, rgb(var(--callout-color)), rgb(var(--mono-rgb-0)) 80%);
  border: none;
  margin-bottom: 0;
  overflow: visible;
  padding-top: 14px;
}
:where .callout[data-callout=infobox] .callout[data-callout=footer] .callout-title,
.callout[data-callout=fas-infobox] .callout[data-callout=footer] .callout-title {
  display: none;
}
:where .callout[data-callout=infobox] .callout[data-callout=footer] .callout-content,
.callout[data-callout=fas-infobox] .callout[data-callout=footer] .callout-content {
  border: none;
}
:where .callout[data-callout=infobox] .callout[data-callout=footer]::after,
.callout[data-callout=fas-infobox] .callout[data-callout=footer]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  border-top: 2px dashed rgba(var(--callout-color), var(--callout-border-opacity));
}

:where .callout[data-callout=infobox][data-callout-metadata~=gray] [data-callout=footer],
.callout[data-callout=fas-infobox][data-callout-metadata~=gray] [data-callout=footer] {
  --callout-color: var(--color-gray-rgb);
}

:where .callout[data-callout=infobox][data-callout-metadata~=brown] [data-callout=footer],
.callout[data-callout=fas-infobox][data-callout-metadata~=brown] [data-callout=footer] {
  --callout-color: var(--color-brown-rgb);
}

:where .callout[data-callout=infobox][data-callout-metadata~=red] [data-callout=footer],
.callout[data-callout=fas-infobox][data-callout-metadata~=red] [data-callout=footer] {
  --callout-color: var(--color-red-rgb);
}

:where .callout[data-callout=infobox][data-callout-metadata~=orange] [data-callout=footer],
.callout[data-callout=fas-infobox][data-callout-metadata~=orange] [data-callout=footer] {
  --callout-color: var(--color-orange-rgb);
}

:where .callout[data-callout=infobox][data-callout-metadata~=yellow] [data-callout=footer],
.callout[data-callout=fas-infobox][data-callout-metadata~=yellow] [data-callout=footer] {
  --callout-color: var(--color-yellow-rgb);
}

:where .callout[data-callout=infobox][data-callout-metadata~=green] [data-callout=footer],
.callout[data-callout=fas-infobox][data-callout-metadata~=green] [data-callout=footer] {
  --callout-color: var(--color-green-rgb);
}

:where .callout[data-callout=infobox][data-callout-metadata~=cyan] [data-callout=footer],
.callout[data-callout=fas-infobox][data-callout-metadata~=cyan] [data-callout=footer] {
  --callout-color: var(--color-cyan-rgb);
}

:where .callout[data-callout=infobox][data-callout-metadata~=blue] [data-callout=footer],
.callout[data-callout=fas-infobox][data-callout-metadata~=blue] [data-callout=footer] {
  --callout-color: var(--color-blue-rgb);
}

:where .callout[data-callout=infobox][data-callout-metadata~=purple] [data-callout=footer],
.callout[data-callout=fas-infobox][data-callout-metadata~=purple] [data-callout=footer] {
  --callout-color: var(--color-purple-rgb);
}

:where .callout[data-callout=infobox][data-callout-metadata~=pink] [data-callout=footer],
.callout[data-callout=fas-infobox][data-callout-metadata~=pink] [data-callout=footer] {
  --callout-color: var(--color-pink-rgb);
}

/* corners */
:where .callout[data-callout=infobox][data-callout-metadata~=corners]::before, :where .callout[data-callout=infobox][data-callout-metadata~=corners]::after,
.callout[data-callout=fas-infobox][data-callout-metadata~=corners]::before,
.callout[data-callout=fas-infobox][data-callout-metadata~=corners]::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: color-mix(in srgb, rgb(var(--callout-color)), rgb(var(--mono-rgb-0)) 20%);
  z-index: 3;
}
:where .callout[data-callout=infobox][data-callout-metadata~=corners]::before,
.callout[data-callout=fas-infobox][data-callout-metadata~=corners]::before {
  right: -3px;
  top: -3px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
:where .callout[data-callout=infobox][data-callout-metadata~=corners]::after,
.callout[data-callout=fas-infobox][data-callout-metadata~=corners]::after {
  left: -3px;
  bottom: -3px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

/* Position */
@media (width > 600px) {
  :where .markdown-preview-view .callout[data-callout=infobox]:not([data-callout-metadata~=full-width]),
  :where .markdown-preview-view .callout[data-callout=infobox]:not([data-callout-metadata~=full-width])[data-callout-metadata~=right],
  .markdown-preview-view .callout[data-callout=fas-infobox]:not([data-callout-metadata~=full-width]),
  .markdown-preview-view .callout[data-callout=fas-infobox]:not([data-callout-metadata~=full-width])[data-callout-metadata~=right] {
    float: right;
    margin-left: calc(var(--overflow-width) + var(--fas-float-inline-margin, 12px));
  }
  :where .markdown-preview-view .callout[data-callout=infobox]:not([data-callout-metadata~=full-width])[data-callout-metadata~=left],
  .markdown-preview-view .callout[data-callout=fas-infobox]:not([data-callout-metadata~=full-width])[data-callout-metadata~=left] {
    float: left;
    margin-right: calc(var(--overflow-width) + var(--fas-float-inline-margin, 12px));
  }
  :where .markdown-preview-view .callout[data-callout=infobox]:not([data-callout-metadata~=full-width])[data-callout-metadata~=center],
  .markdown-preview-view .callout[data-callout=fas-infobox]:not([data-callout-metadata~=full-width])[data-callout-metadata~=center] {
    float: unset;
    margin-inline: auto;
  }
}
:where .markdown-source-view .callout[data-callout=infobox],
.markdown-source-view .callout[data-callout=fas-infobox] {
  margin-inline: auto;
}

/* Color accent */
:where .callout[data-callout=infobox][data-callout-metadata~=accent],
.callout[data-callout=fas-infobox][data-callout-metadata~=accent] {
  --hr-color: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / var(--callout-border-opacity));
  --table-row-alt-background: color-mix(
      in srgb,
      hsl(var(--accent-h) var(--accent-s) var(--accent-l) / 0.2),
      rgba(var(--mono-rgb-0), 0.2) 50%
  );
  --table-border-color: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / var(--callout-border-opacity));
  --table-header-border-color: hsl(var(--accent-h) var(--accent-s) var(--accent-l) / var(--callout-border-opacity));
}
:where .callout[data-callout=infobox][data-callout-metadata~=accent] .image-embed[alt~=cover]::after,
.callout[data-callout=fas-infobox][data-callout-metadata~=accent] .image-embed[alt~=cover]::after {
  border-top: calc(0.5 * var(--triangle-size)) solid var(--color-accent);
}
:where .callout[data-callout=infobox][data-callout-metadata~=accent] img[alt*=cover],
.callout[data-callout=fas-infobox][data-callout-metadata~=accent] img[alt*=cover] {
  border-bottom: 4px solid var(--color-accent);
}
:where .callout[data-callout=infobox][data-callout-metadata~=accent] img[alt*=icon],
.callout[data-callout=fas-infobox][data-callout-metadata~=accent] img[alt*=icon] {
  border: 2px solid var(--color-accent);
}
:where .callout[data-callout=infobox][data-callout-metadata~=accent] h1,
.callout[data-callout=fas-infobox][data-callout-metadata~=accent] h1 {
  background: color-mix(in srgb, var(--color-accent), rgb(var(--mono-rgb-0)) 20%);
}
:where .callout[data-callout=infobox][data-callout-metadata~=accent] h1::before,
:where .callout[data-callout=infobox][data-callout-metadata~=accent] h1::after,
.callout[data-callout=fas-infobox][data-callout-metadata~=accent] h1::before,
.callout[data-callout=fas-infobox][data-callout-metadata~=accent] h1::after {
  border-top: calc(var(--overflow-width) - 1px) solid color-mix(in srgb, var(--color-accent), rgb(0, 0, 0) 60%);
}
:where .callout[data-callout=infobox][data-callout-metadata~=accent] .callout[data-callout=footer],
.callout[data-callout=fas-infobox][data-callout-metadata~=accent] .callout[data-callout=footer] {
  background: color-mix(in srgb, var(--color-accent), rgb(var(--mono-rgb-0)) 80%);
}
:where .callout[data-callout=infobox][data-callout-metadata~=accent] .callout[data-callout=footer]::after,
.callout[data-callout=fas-infobox][data-callout-metadata~=accent] .callout[data-callout=footer]::after {
  border-top: 2px dashed hsl(var(--accent-h), var(--accent-s), var(--accent-l), var(--callout-border-opacity));
}
:where .callout[data-callout=infobox][data-callout-metadata~=accent][data-callout-metadata~=corners]::before, :where .callout[data-callout=infobox][data-callout-metadata~=accent][data-callout-metadata~=corners]::after,
.callout[data-callout=fas-infobox][data-callout-metadata~=accent][data-callout-metadata~=corners]::before,
.callout[data-callout=fas-infobox][data-callout-metadata~=accent][data-callout-metadata~=corners]::after {
  background-color: color-mix(in srgb, var(--color-accent), rgb(var(--mono-rgb-0)) 20%);
}
