/* Callout modifications */
// The code snippets in this file are derived from the Halcyon theme
// - https://github.com/dbarenholz/halcyon-obsidian?tab=readme-ov-file
body {
  --flexcyon-callout-bg-opacity: 20%;
  --flexcyon-callout-icon-right-padding: 4px;
  --flexcyon-callout-first-codeblock-margin-top: 1rem;
  --flexcyon-callout-vertical-margin: 1em;
  --flexcyon-callout-pop-animation-duration: 0.2s;
  --flexcyon-callouts-flashcard-width: 250px;
  --flexcyon-callouts-flashcard-height: 250px;
  --flexcyon-callout-flashcard-animation-duration: 0.5s;
  --flexcyon-editor-writing-indentation: 16px;

  --flexcyon-callout-verti-padding: 12px;
  --flexcyon-callout-horiz-padding: 24px;
  --callout-padding: var(--flexcyon-callout-verti-padding)
    var(--flexcyon-callout-horiz-padding);
  --callout-radius: 2px;
  --flexcyon-callout-radix: 16px;

  div.callout {
    .callout-icon {
      padding-inline-end: var(--flexcyon-callout-icon-right-padding);
    }

    .callout-content :first-child:is(pre, img, iframe) {
      margin-top: var(--flexcyon-callout-first-codeblock-margin-top);
    }
  }

  .markdown-source-view.mod-cm6 .callout,
  .callout {
    margin: var(--flexcyon-callout-vertical-margin) 0;
  }
}

/* obsi-snip-coll start: tategaki */
div.callout[data-callout*="tategaki"],
div.callout[data-callout-metadata*="tategaki"] {
  div.callout-content {
    writing-mode: vertical-rl;
    overflow: scroll;
    max-width: 95%;
    padding-top: 2vh;
    padding-bottom: 1vh !important;
    line-height: 1.667;
    margin: auto;
    text-indent: 1rem;
    letter-spacing: var(--font-ui-large);

    h1 {
      letter-spacing: var(--h1-size);
    }
    h2 {
      letter-spacing: var(--h2-size);
    }
    h3 {
      letter-spacing: var(--h3-size);
    }
    h4 {
      letter-spacing: var(--h4-size);
    }
    h5 {
      letter-spacing: var(--h5-size);
    }
    h6 {
      letter-spacing: var(--h6-size);
    }

    :is(h1, h2, h3, h4, h5, h6) {
      margin-top: 0;
      line-height: 1.667;
    }
  }
}
/* obsi-snip-coll end */

/* obsi-snip-coll start: vertical-ltr */
div.callout[data-callout*="vert-ltr"],
div.callout[data-callout-metadata*="vert-ltr"] {
  div.callout-content {
    writing-mode: vertical-lr;
    overflow-y: scroll;
    overflow-x: scroll;
    max-width: 95%;
    padding-top: 2vh;
    padding-bottom: 1vh !important;
    line-height: 1.667;
    margin: auto;
    min-height: max-content !important;
    text-indent: 1rem;
    letter-spacing: var(--font-ui-large);

    h1 {
      letter-spacing: var(--h1-size);
    }
    h2 {
      letter-spacing: var(--h2-size);
    }
    h3 {
      letter-spacing: var(--h3-size);
    }
    h4 {
      letter-spacing: var(--h4-size);
    }
    h5 {
      letter-spacing: var(--h5-size);
    }
    h6 {
      letter-spacing: var(--h6-size);
    }

    :is(h1, h2, h3, h4, h5, h6) {
      margin-top: 0;
      line-height: 1.667;
      min-height: auto !important;
    }
  }
}
/* obsi-snip-coll end */

/* obsi-snip-coll start: no-icon */
div.callout[data-callout-metadata*="empty"],
div.callout[data-callout*="empty"],
div.callout[data-callout*="tategaki"],
div.callout[data-callout-metadata*="tategaki"],
div.callout[data-callout*="vert-ltr"],
div.callout[data-callout-metadata*="vert-ltr"],
div.callout[data-callout*="no-icon"],
div.callout[data-callout-metadata*="no-icon"] {
  .callout-icon {
    display: none;
  }
}
/* obsi-snip-coll end */

/* obsi-snip-coll start: no-title */
div.callout[data-callout-metadata*="tategaki"],
div.callout[data-callout*="tategaki"],
div.callout[data-callout-metadata*="empty"],
div.callout[data-callout*="empty"],
div.callout[data-callout-metadata*="vert-ltr"],
div.callout[data-callout*="vert-ltr"],
div.callout[data-callout*="no-title"],
div.callout[data-callout-metadata*="no-title"] {
  .callout-title-inner,
  .callout-title {
    display: none;
  }
}
/* obsi-snip-coll end */

/* obsi-snip-coll start: bg-transparent */
div.callout[data-callout*="bg-transparent"],
div.callout[data-callout-metadata*="bg-transparent"],
div.callout[data-callout*="transparent-bg"],
div.callout[data-callout-metadata*="transparent-bg"] {
  background-color: transparent;
}
/* obsi-snip-coll end */

/* obsi-snip-coll start: color */
@mixin callout-color($color-name, $color-var) {
  div.callout[data-callout*="all-#{$color-name}"],
  div.callout[data-callout-metadata*="all-#{$color-name}"],
  div.callout[data-callout*="bg-#{$color-name}"],
  div.callout[data-callout-metadata*="bg-#{$color-name}"] {
    background-color: rgba(
      var(--#{$color-var}-rgb),
      var(--flexcyon-callout-bg-opacity)
    );
    &:has([data-callout*="tui"], [data-callout-metadata*="tui"])
      div.callout-title,
    &:has(.callout[data-callout*="tui"], [data-callout-metadata*="tui"])
      .callout-content {
      background-color: rgba(
        var(--#{$color-var}-rgb),
        var(--flexcyon-callout-bg-opacity)
      );
    }
  }

  div.callout[data-callout*="all-#{$color-name}"],
  div.callout[data-callout-metadata*="all-#{$color-name}"],
  div.callout[data-callout*="title-#{$color-name}"],
  div.callout[data-callout-metadata*="title-#{$color-name}"] {
    div.callout-title,
    div.callout-icon .svg-icon {
      color: var(--#{$color-var});
    }
  }
}

@include callout-color("yellow", "color-yellow");
@include callout-color("blue", "color-blue");
@include callout-color("purple", "color-purple");
@include callout-color("red", "color-red");
@include callout-color("cyan", "color-cyan");
@include callout-color("pink", "color-pink");
@include callout-color("green", "color-green");
@include callout-color("orange", "color-orange");

/* obsi-snip-coll end */

/* obsi-snip-coll start: centre-text */
div.callout[data-callout*="center-all"],
div.callout[data-callout-metadata*="center-all"],
div.callout[data-callout*="center-title"],
div.callout[data-callout-metadata*="center-title"] {
  div.callout-title {
    justify-content: center;
  }
}

div.callout[data-callout*="center-all"],
div.callout[data-callout-metadata*="center-all"],
div.callout[data-callout*="center-content"],
div.callout[data-callout-metadata*="center-content"] {
  div.callout-content {
    text-align: center;
  }
}
/* obsi-snip-coll end */

/* obsi-snip-coll start: text-direction */
@mixin callout-dir($dir) {
  div.callout[data-callout*="#{$dir}-all"],
  div.callout[data-callout-metadata*="#{$dir}-all"],
  div.callout[data-callout*="#{$dir}-title"],
  div.callout[data-callout-metadata*="#{$dir}-title"] {
    div.callout-title *,
    div.callout-title {
      direction: $dir !important;
      unicode-bidi: bidi-override;
    }
  }

  div.callout[data-callout*="#{$dir}-all"],
  div.callout[data-callout-metadata*="#{$dir}-all"],
  div.callout[data-callout*="#{$dir}-content"],
  div.callout[data-callout-metadata*="#{$dir}-content"] {
    div.callout-content {
      * {
        direction: $dir !important;
        unicode-bidi: bidi-override;
      }

      code[class*="language-"],
      pre[class*="language-"] {
        @if $dir == "rtl" {
          text-align: right;
        } @else {
          text-align: left;
        }
      }
    }
  }
}

@include callout-dir(rtl);
@include callout-dir(ltr);
/* obsi-snip-coll end */

/* obsi-snip-coll start: text-transform */
@mixin callout-text-transform($transform) {
  div.callout[data-callout*="#{$transform}-all"],
  div.callout[data-callout-metadata*="#{$transform}-all"],
  div.callout[data-callout*="#{$transform}-title"],
  div.callout[data-callout-metadata*="#{$transform}-title"] {
    div.callout-title .callout-title-inner {
      @if $transform == "caps" {
        text-transform: capitalize;
      } @else {
        text-transform: $transform;
      }
    }
  }

  div.callout[data-callout*="#{$transform}-all"],
  div.callout[data-callout-metadata*="#{$transform}-all"],
  div.callout[data-callout*="#{$transform}-content"],
  div.callout[data-callout-metadata*="#{$transform}-content"] {
    div.callout-content * {
      @if $transform == "caps" {
        text-transform: capitalize;
      } @else {
        text-transform: $transform;
      }

      * {
        @if $transform == "caps" {
          text-transform: capitalize;
        } @else {
          text-transform: $transform;
        }
      }

      code[class*="language-"],
      pre[class*="language-"] {
        @if $transform == "caps" {
          text-transform: capitalize;
        } @else {
          text-transform: $transform;
        }
      }
    }
  }
}

@include callout-text-transform(uppercase);
@include callout-text-transform(lowercase);
@include callout-text-transform(caps);
/* obsi-snip-coll end */

/* obsi-snip-coll start: extended-color-palette */
@mixin callout-ext-color($color-name, $color-var) {
  div.callout[data-callout*="all-#{$color-name}"],
  div.callout[data-callout-metadata*="all-#{$color-name}"],
  div.callout[data-callout*="bg-#{$color-name}"],
  div.callout[data-callout-metadata*="bg-#{$color-name}"] {
    background-color: var(--#{$color-var}-bg);
  }

  div.callout[data-callout*="all-#{$color-name}"],
  div.callout[data-callout-metadata*="all-#{$color-name}"],
  div.callout[data-callout*="title-#{$color-name}"],
  div.callout[data-callout-metadata*="title-#{$color-name}"] {
    .callout-title,
    .callout-icon .svg-icon {
      color: var(--#{$color-var});
    }
  }
}

@include callout-ext-color("red-blue", "color-red-blue-mix");
@include callout-ext-color("blue-red", "color-red-blue-mix");

@include callout-ext-color("red-orange", "color-red-orange-mix");
@include callout-ext-color("orange-red", "color-red-orange-mix");

@include callout-ext-color("red-yellow", "color-red-yellow-mix");
@include callout-ext-color("yellow-red", "color-red-yellow-mix");

@include callout-ext-color("red-green", "color-red-green-mix");
@include callout-ext-color("green-red", "color-red-green-mix");

@include callout-ext-color("red-cyan", "color-red-cyan-mix");
@include callout-ext-color("cyan-red", "color-red-cyan-mix");

@include callout-ext-color("red-purple", "color-red-purple-mix");
@include callout-ext-color("purple-red", "color-red-purple-mix");

@include callout-ext-color("red-pink", "color-red-pink-mix");
@include callout-ext-color("pink-red", "color-red-pink-mix");

@include callout-ext-color("orange-yellow", "color-orange-yellow-mix");
@include callout-ext-color("yellow-orange", "color-orange-yellow-mix");

@include callout-ext-color("orange-green", "color-orange-green-mix");
@include callout-ext-color("green-orange", "color-orange-green-mix");

@include callout-ext-color("orange-cyan", "color-orange-cyan-mix");
@include callout-ext-color("cyan-orange", "color-orange-cyan-mix");

@include callout-ext-color("orange-blue", "color-orange-blue-mix");
@include callout-ext-color("blue-orange", "color-orange-blue-mix");

@include callout-ext-color("orange-purple", "color-orange-purple-mix");
@include callout-ext-color("purple-orange", "color-orange-purple-mix");

@include callout-ext-color("orange-pink", "color-orange-pink-mix");
@include callout-ext-color("pink-orange", "color-orange-pink-mix");

@include callout-ext-color("yellow-green", "color-yellow-green-mix");
@include callout-ext-color("green-yellow", "color-yellow-green-mix");

@include callout-ext-color("yellow-cyan", "color-yellow-cyan-mix");
@include callout-ext-color("cyan-yellow", "color-yellow-cyan-mix");

@include callout-ext-color("yellow-blue", "color-yellow-blue-mix");
@include callout-ext-color("blue-yellow", "color-yellow-blue-mix");

@include callout-ext-color("yellow-purple", "color-yellow-purple-mix");
@include callout-ext-color("purple-yellow", "color-yellow-purple-mix");

@include callout-ext-color("yellow-pink", "color-yellow-pink-mix");
@include callout-ext-color("pink-yellow", "color-yellow-pink-mix");

@include callout-ext-color("green-cyan", "color-green-cyan-mix");
@include callout-ext-color("cyan-green", "color-green-cyan-mix");

@include callout-ext-color("green-blue", "color-green-blue-mix");
@include callout-ext-color("blue-green", "color-green-blue-mix");

@include callout-ext-color("green-purple", "color-green-purple-mix");
@include callout-ext-color("purple-green", "color-green-purple-mix");

@include callout-ext-color("green-pink", "color-green-pink-mix");
@include callout-ext-color("pink-green", "color-green-pink-mix");

@include callout-ext-color("cyan-blue", "color-cyan-blue-mix");
@include callout-ext-color("blue-cyan", "color-cyan-blue-mix");

@include callout-ext-color("cyan-purple", "color-cyan-purple-mix");
@include callout-ext-color("purple-cyan", "color-cyan-purple-mix");

@include callout-ext-color("cyan-pink", "color-cyan-pink-mix");
@include callout-ext-color("pink-cyan", "color-cyan-pink-mix");

@include callout-ext-color("blue-purple", "color-blue-purple-mix");
@include callout-ext-color("purple-blue", "color-blue-purple-mix");

@include callout-ext-color("blue-pink", "color-blue-pink-mix");
@include callout-ext-color("pink-blue", "color-blue-pink-mix");

@include callout-ext-color("purple-pink", "color-purple-pink-mix");
@include callout-ext-color("pink-purple", "color-purple-pink-mix");
/* obsi-snip-coll end */

body.is-mobile {
  .markdown-reading-view {
    .callout[data-callout*="$pop"],
    .callout[data-callout-metadata*="$pop"] {
      margin-left: min(-5vw, -40px);
      width: max(calc(var(--file-line-width) / 2), 40vw);
    }
  }
}

.markdown-source-view .callout[data-callout-metadata*="$pop"]:not(:hover) {
  visibility: visible;
}

.markdown-reading-view {
  .callout[data-callout*="$pop"],
  .callout[data-callout-metadata*="$pop"] {
    display: block;
    position: absolute;
    margin-left: min(-3vw, -40px);
    transform: translateY(-70px);
    transition: all var(--flexcyon-callout-pop-animation-duration) ease;
    width: calc(var(--file-line-width) / 2 + min(3vw, 40px));
    backdrop-filter: blur(20px);
    z-index: 999;

    .callout-title {
      margin-top: 3px;
      margin-left: 22px;
    }
  }

  .callout[data-callout*="$pop"]:hover::before,
  .callout[data-callout-metadata*="$pop"]:hover::before {
    display: block;
    border: none;
    transition: all var(--flexcyon-callout-pop-animation-duration) ease;
  }

  .callout[data-callout*="$pop"]::before,
  .callout[data-callout-metadata*="$pop"]::before {
    visibility: visible;
    content: ">";
    display: block;
    position: absolute;
    padding: 2px;
    color: rgb(var(--callout-color));
    z-index: 1;
  }

  .callout[data-callout*="$pop"]:not(:hover),
  .callout[data-callout-metadata*="$pop"]:not(:hover) {
    visibility: hidden;
  }
}

/* obsi-snip-coll start: tilt */
div.callout[data-callout*="tilt-all"],
div.callout[data-callout-metadata*="tilt-all"],
div.callout[data-callout*="tilt-title"],
div.callout[data-callout-metadata*="tilt-title"] {
  .callout-title {
    transform: skewX(-7.5deg);
  }
}

div.callout[data-callout*="tilt-all"],
div.callout[data-callout-metadata*="tilt-all"],
div.callout[data-callout*="tilt-content"],
div.callout[data-callout-metadata*="tilt-content"] {
  .callout-content {
    transform: skewX(-7.5deg);
  }
}
/* obsi-snip-coll end */

/* obsi-snip-coll start: font-style */
@mixin callout-font-style($style) {
  div.callout[data-callout*="#{$style}-all"],
  div.callout[data-callout-metadata*="#{$style}-all"],
  div.callout[data-callout*="#{$style}-title"],
  div.callout[data-callout-metadata*="#{$style}-title"] {
    .callout-title {
      font-style: $style;
    }
  }

  div.callout[data-callout*="#{$style}-all"],
  div.callout[data-callout-metadata*="#{$style}-all"],
  div.callout[data-callout*="#{$style}-content"],
  div.callout[data-callout-metadata*="#{$style}-content"] {
    .callout-content {
      font-style: $style;
    }
  }
}

@include callout-font-style(italic);
@include callout-font-style(oblique);
/* obsi-snip-coll end */

/* obsi-snip-coll start: text-decoration */
@mixin callout-text-decor($callout-name) {
  div.callout[data-callout*="#{$callout-name}-all"],
  div.callout[data-callout-metadata*="#{$callout-name}-all"],
  div.callout[data-callout*="#{$callout-name}-content"],
  div.callout[data-callout-metadata*="#{$callout-name}-content"] {
    .callout-content {
      text-decoration: #{$callout-name};
    }
  }

  div.callout[data-callout*="#{$callout-name}-all"],
  div.callout[data-callout-metadata*="#{$callout-name}-all"],
  div.callout[data-callout*="#{$callout-name}-title"],
  div.callout[data-callout-metadata*="#{$callout-name}-title"] {
    .callout-title {
      text-decoration: #{$callout-name};
    }
  }
}

@include callout-text-decor(dashed);
@include callout-text-decor(dotted);
@include callout-text-decor(double);
@include callout-text-decor(overline);
@include callout-text-decor(underline);
@include callout-text-decor(line-through);
/* obsi-snip-coll end */

/* obsi-snip-coll start: heading-title */
@mixin callout-title-heading($heading_no) {
  div.callout[data-callout*="#{$heading_no}-title"],
  div.callout[data-callout-metadata*="#{$heading_no}-title"] {
    .callout-title {
      font-size: var(--#{$heading_no}-size);
      color: var(--#{$heading_no}-color);
    }

    .callout-icon svg {
      color: var(--#{$heading_no}-color);
    }
  }
}

@include callout-title-heading(h1);
@include callout-title-heading(h2);
@include callout-title-heading(h3);
@include callout-title-heading(h4);
@include callout-title-heading(h5);
@include callout-title-heading(h6);
/* obsi-snip-coll end */

/* obsi-snip-coll start: font-weight */
@mixin callout-text-font-weight($font-weight) {
  div.callout[data-callout*="w-#{$font-weight}-all"],
  div.callout[data-callout-metadata*="w-#{$font-weight}-all"],
  div.callout[data-callout*="w-#{$font-weight}-title"],
  div.callout[data-callout-metadata*="w-#{$font-weight}-title"] {
    .callout-title {
      font-weight: $font-weight;
    }
  }

  div.callout[data-callout*="w-#{$font-weight}-all"],
  div.callout[data-callout-metadata*="w-#{$font-weight}-all"],
  div.callout[data-callout*="w-#{$font-weight}-content"],
  div.callout[data-callout-metadata*="w-#{$font-weight}-content"] {
    .callout-content {
      font-weight: $font-weight;
    }
  }
}

@include callout-text-font-weight(100);
@include callout-text-font-weight(200);
@include callout-text-font-weight(300);
@include callout-text-font-weight(400);
@include callout-text-font-weight(500);
@include callout-text-font-weight(600);
@include callout-text-font-weight(700);
@include callout-text-font-weight(800);
@include callout-text-font-weight(900);
@include callout-text-font-weight(bold);
@include callout-text-font-weight(bolder);
@include callout-text-font-weight(lighter);
/* obsi-snip-coll end */

div.callout[data-callout*="bg-grid"] .callout-content,
div.callout[data-callout-metadata*="bg-grid"] .callout-content,
div.callout[data-callout*="bg-dots"] .callout-content,
div.callout[data-callout-metadata*="bg-dots"] .callout-content {
  margin-top: 16px;
  padding: 0px 8px;
}

/* obsi-snip-coll start: flashcard */
div.callout[data-callout*="flashcard"],
div.callout[data-callout-metadata*="flashcard"] {
  width: var(--flexcyon-callouts-flashcard-width);
  height: var(--flexcyon-callouts-flashcard-height);
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: all var(--flexcyon-callout-flashcard-animation-duration)
    ease-in-out;

  .callout-content {
    transform: rotateY(180deg);
    opacity: 0;
  }

  .callout-title {
    position: absolute;
    top: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  &:hover {
    transform: rotateY(180deg);

    .callout-title {
      opacity: 0;
    }

    .callout-content {
      opacity: 1;
    }
  }
}
/* obsi-snip-coll end */

/* obsi-snip-coll start: writing-mode */
.flexcyon-editor-writing .cm-line,
.editor-writing .cm-line,
div.callout[data-callout*="writing"] .callout-content p,
div.callout[data-callout-metadata*="writing"] .callout-content p {
  text-indent: var(--flexcyon-editor-writing-indentation);
  white-space: initial;
  word-wrap: break-word;
  margin-block-end: calc(1.25 * var(--p-spacing));
}
/* obsi-snip-coll end */

/* obsi-snip-coll start: set-font */
@mixin font-toggler($font-type) {
  div.callout[data-callout*="font-#{$font-type}-all"],
  div.callout[data-callout-metadata*="font-#{$font-type}-all"],
  div.callout[data-callout*="font-#{$font-type}-title"],
  div.callout[data-callout-metadata*="font-#{$font-type}-title"] {
    .callout-title {
      font-family: var(--font-#{$font-type});
    }
  }

  div.callout[data-callout*="font-#{$font-type}-all"],
  div.callout[data-callout-metadata*="font-#{$font-type}-all"],
  div.callout[data-callout*="font-#{$font-type}-content"],
  div.callout[data-callout-metadata*="font-#{$font-type}-content"] {
    .callout-content {
      font-family: var(--font-#{$font-type});
    }
  }
}

@include font-toggler(interface);
@include font-toggler(text);
@include font-toggler(monospace);
/* obsi-snip-coll end */

/* obsi-snip-coll start: lists */
@mixin callout-list($style-type) {
  div.callout[data-callout*="li-#{$style-type}"],
  div.callout[data-callout-metadata*="li-#{$style-type}"],
  div.callout[data-callout*="ol-#{$style-type}"],
  div.callout[data-callout-metadata*="ol-#{$style-type}"] {
    ol {
      list-style-type: $style-type;
      list-style-position: inside;
    }
  }

  div.callout[data-callout*="li-#{$style-type}"],
  div.callout[data-callout-metadata*="li-#{$style-type}"],
  div.callout[data-callout*="ul-#{$style-type}"],
  div.callout[data-callout-metadata*="ul-#{$style-type}"] {
    ul {
      list-style-type: $style-type;
      list-style-position: inside;
    }
  }
}

@include callout-list(none);
@include callout-list(disc);
@include callout-list(circle);
@include callout-list(square);
@include callout-list(decimal);
@include callout-list(cjk-decimal);
@include callout-list(decimal-leading-zero);
@include callout-list(lower-roman);
@include callout-list(upper-roman);
@include callout-list(lower-greek);
@include callout-list(lower-alpha);
@include callout-list(lower-latin);
@include callout-list(upper-alpha);
@include callout-list(upper-latin);
@include callout-list(arabic-indic);
@include callout-list(armenian);
@include callout-list(bengali);
@include callout-list(cambodian);
@include callout-list(khmer);
@include callout-list(cjk-earthly-branch);
@include callout-list(cjk-heavenly-branch);
@include callout-list(cjk-ideographic);
@include callout-list(devanagari);
@include callout-list(ethiopic-numeric);
@include callout-list(georgian);
@include callout-list(gujarati);
@include callout-list(gurmukhi);
@include callout-list(hebrew);
@include callout-list(hiragana);
@include callout-list(hiragana-iroha);
@include callout-list(japanese-formal);
@include callout-list(japanese-informal);
@include callout-list(kannada);
@include callout-list(kannada-iroha);
@include callout-list(katakana);
@include callout-list(katakana-iroha);
@include callout-list(korean-hangul-formal);
@include callout-list(korean-hanja-formal);
@include callout-list(korean-hanja-informal);
@include callout-list(lao);
@include callout-list(lower-armenian);
@include callout-list(malayalam);
@include callout-list(mongolian);
@include callout-list(myanmar);
@include callout-list(oriya);
@include callout-list(persian);
@include callout-list(simp-chinese-formal);
@include callout-list(simp-chinese-informal);
@include callout-list(tamil);
@include callout-list(telugu);
@include callout-list(thai);
@include callout-list(tibetan);
@include callout-list(trad-chinese-formal);
@include callout-list(trad-chinese-informal);
@include callout-list(upper-armenian);
@include callout-list(disclosure-open);
/* obsi-snip-coll end */

div.callout[data-callout*="center-img"],
div.callout[data-callout-metadata*="center-img"] {
  background-color: transparent;
  img {
    justify-content: center;
    display: flex;
    width: max-content;
    margin: 0 auto;
    max-width: 85%;
    right: 0;
    left: calc(16px + 6px * 2 + 4px * 2);
  }
}

/* obsi-snip-coll start: lucide-icons */
.callout[data-callout*="lucide"] {
  --callout-icon: attr(data-callout);
}
.callout[data-callout-metadata*="lucide"] {
  --callout-icon: attr(data-callout-metadata);
}
/* obsi-snip-coll end */

$flexcyon-tui-exclusions: "[data-callout*='vertical'], [data-callout*='plain'], [data-callout-metadata*='vertical'], [data-callout-metadata*='plain']";
$flexcyon-plain-exclusions: "[data-callout*='vertical'], [data-callout*='tui'], [data-callout-metadata*='vertical'], [data-callout-metadata*='tui']";
$flexcyon-vert-exclusions: "[data-callout*='tui'], [data-callout*='plain'], [data-callout-metadata*='tui'], [data-callout-metadata*='plain']";

.markdown-rendered:has(
    :is([data-callout*="tui"], [data-callout-metadata*="tui"]):not(
        :is(#{$flexcyon-tui-exclusions})
      )
  ) {
  margin-top: -28px;
  margin-bottom: -4px;
}

body.flexcyon-tui-callouts .callout:not(:is(#{$flexcyon-tui-exclusions})),
.callout[data-callout*="tui"]:not(:is(#{$flexcyon-tui-exclusions})),
.callout[data-callout-metadata*="tui"]:not(:is(#{$flexcyon-tui-exclusions})) {
  background-color: var(--background-primary);
  padding: 0px;
  margin: 0px;
  .callout-icon {
    display: none;
  }
  .callout-title {
    color: var(--text-faint);
    z-index: 2;
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      color: unset;
      font-size: inherit;
    }
  }
  .callout-title:has(~ .callout-content) {
    transform: translate(24px, 50%);
    background-color: var(--background-primary);
    padding: 2px 8px;
    width: max-content;
  }
  .callout-content {
    border-radius: var(--flexcyon-callout-radix);
    border: 1px solid var(--text-faint);
    padding: 8px 16px;
    z-index: 1;
  }
}

@mixin border-wrapper($color) {
  div.callout[data-callout*="border-#{$color}"]:is(
      [data-callout*="tui"],
      [data-callout-metadata*="tui"]
    ),
  div.callout[data-callout-metadata*="border-#{$color}"]:is(
      [data-callout*="tui"],
      [data-callout-metadata*="tui"]
    ) {
    .callout-title {
      color: var(--color-#{$color});
    }
    .callout-content {
      border-radius: var(--flexcyon-callout-radix);
      border: 1px solid var(--color-#{$color});
      padding: 8px 16px;
      z-index: 1;
    }
  }
  div.callout[data-callout*="border-#{$color}"]:not(
      [data-callout*="tui"],
      [data-callout-metadata*="tui"]
    ),
  div.callout[data-callout-metadata*="border-#{$color}"]:not(
      [data-callout*="tui"],
      [data-callout-metadata*="tui"]
    ) {
    border-radius: var(--flexcyon-callout-radix);
    border: 1px solid var(--color-#{$color});
    padding: 8px 16px;
    z-index: 1;
  }
}

@include border-wrapper("yellow");
@include border-wrapper("blue");
@include border-wrapper("purple");
@include border-wrapper("red");
@include border-wrapper("cyan");
@include border-wrapper("pink");
@include border-wrapper("green");
@include border-wrapper("orange");

body.flexcyon-plain-callouts .callout:not(:is(#{$flexcyon-plain-exclusions})),
.callout[data-callout*="pln"]:not(:is(#{$flexcyon-plain-exclusions})),
.callout[data-callout-metadata*="pln"]:not(:is(#{$flexcyon-plain-exclusions})) {
  border: 1px solid var(--color-blue);
  border-radius: calc(0.5 * var(--flexcyon-callout-radix));
  padding: 0px;

  .callout-title {
    background-color: var(--color-blue);
    color: var(--background-primary);
    padding: 4px 12px;

    .callout-icon {
      display: none;
    }
  }
  .callout-content {
    padding: 4px 12px;
  }
}

@mixin plain-wrapper($color) {
  .callout[data-callout*="plain-#{$color}"]:not(
      :is(#{$flexcyon-plain-exclusions})
    ),
  .callout[data-callout-metadata*="plain-#{$color}"]:not(
      :is(#{$flexcyon-plain-exclusions})
    ) {
    border: 1px solid var(--color-#{$color});
    border-radius: calc(0.5 * var(--flexcyon-callout-radix));
    padding: 0px;

    .callout-title {
      background-color: var(--color-#{$color});
      color: var(--background-primary);
      padding: 4px 12px;

      .callout-icon {
        display: none;
      }
    }
    .callout-content {
      padding: 4px 12px;
    }
  }
}

@include plain-wrapper("yellow");
@include plain-wrapper("blue");
@include plain-wrapper("purple");
@include plain-wrapper("red");
@include plain-wrapper("cyan");
@include plain-wrapper("pink");
@include plain-wrapper("green");
@include plain-wrapper("orange");

body.flexcyon-vert-callouts .callout:not(:is(#{$flexcyon-vert-exclusions})),
.callout[data-callout*="vertical"]:not(:is(#{$flexcyon-vert-exclusions})),
.callout[data-callout-metadata*="vertical"]:not(
    :is(#{$flexcyon-vert-exclusions})
  ) {
  border: 1px solid var(--color-blue);
  border-radius: calc(0.5 * var(--flexcyon-callout-radix));
  padding: 0px;
  display: flex;
  flex-direction: row;
  letter-spacing: 2px;

  .callout-title {
    background-color: var(--color-blue);
    color: var(--background-primary);
    padding: 8px 12px;
    writing-mode: vertical-lr;
    justify-content: center;
    text-overflow: hidden;

    .callout-icon svg {
      color: var(--background-primary);
    }
  }
  .callout-content {
    margin-left: 12px;
    padding: 4px 12px;
  }
}

@mixin vert-wrapper($color) {
  .callout[data-callout*="vert-#{$color}"]:not(
      :is(#{$flexcyon-vert-exclusions})
    ),
  .callout[data-callout-metadata*="vert-#{$color}"]:not(
      :is(#{$flexcyon-vert-exclusions})
    ) {
    border: 1px solid var(--color-#{$color});
    border-radius: calc(0.5 * var(--flexcyon-callout-radix));
    padding: 0px;
    display: flex;
    flex-direction: row;
    letter-spacing: 2px;

    .callout-title {
      background-color: var(--color-#{$color});
      color: var(--background-primary);
      padding: 8px 12px;
      writing-mode: vertical-lr;
      justify-content: center;
      text-overflow: hidden;

      .callout-icon svg {
        color: var(--background-primary);
      }
    }
    .callout-content {
      margin-left: 12px;
      padding: 4px 12px;
    }
  }
}

@include vert-wrapper("yellow");
@include vert-wrapper("blue");
@include vert-wrapper("purple");
@include vert-wrapper("red");
@include vert-wrapper("cyan");
@include vert-wrapper("pink");
@include vert-wrapper("green");
@include vert-wrapper("orange");
