/* GPLv3 license
FAS - Callout Caption
Author: ElsaTam (Kapirklaa in Discord)
*/
body {
  --workleaves-background: var(--background-primary);
  --workleaves-foreground: var(--text-normal);
}

.callout[data-callout=caption] {
  --p-spacing: 0;
  border: none;
  background: none;
  display: flex;
  flex-direction: column-reverse;
}
.callout[data-callout=caption] .callout-title {
  font-size: 0.8em;
  width: fit-content;
  margin-inline-end: auto;
  font-style: italic;
  border-bottom: 1px dashed rgb(var(--callout-color));
  background-color: color-mix(in srgb, var(--workleaves-background), rgb(var(--callout-color)) 20%);
  inset-block-start: calc(-1 * var(--image-shadow-offset, 0px));
  padding-inline-start: 0.4em;
  padding-inline-end: 1.5em;
  padding-block: 0.2em;
  margin-top: 0;
  position: relative;
  z-index: 2;
  border-left: 1px solid rgb(var(--callout-color));
}
.callout[data-callout=caption] .callout-icon {
  display: none;
}
.callout[data-callout=caption] .callout-fold {
  order: -1;
  padding-inline-end: 0;
}
.callout[data-callout=caption] .callout-content {
  padding: 0;
  border: none;
  border-left: 1px solid rgb(var(--callout-color));
  overflow: hidden;
}

.callout[data-callout=caption].is-collapsed .callout-title {
  inset-block-start: unset;
}

.callout[data-callout=caption][data-callout-metadata~=accent] .callout-title {
  border-bottom: 1px dashed var(--color-accent);
  background-color: color-mix(in srgb, var(--workleaves-background), var(--color-accent) 20%);
  border-left: 1px solid var(--color-accent);
}
.callout[data-callout=caption][data-callout-metadata~=accent] .callout-content {
  border-left: 1px solid var(--color-accent);
}

.callout[data-callout=caption] p {
  font-size: 0;
}
