// Declare mixins
@mixin blockquote-styles {
  blockquote {
    overflow-x: auto;
    padding: var(--callout-content-padding);
    border-radius: var(--callout-radius);

    > :first-child {
      margin-top: 0.5em;
    }

    > :last-child {
      margin-bottom: 0.5em;
    }
  }
}

// General colors

body {
  --callout-padding: 0;
  --callout-radius: var(--radius-m);
  --callout-content-padding: 0 var(--size-4-2);
  --callout-title-padding: var(--size-4-2);
  --callout-border-opacity: 0.4;
  --callout-border-width: 0 0.05rem 0 0.1rem;
  --blockquote-border-thickness: 0.05rem;

  --ebw-callout-warning: 234, 175, 0; // yellow-3
  --ebw-callout-success: 139, 167, 145; // green-3

  --ebw-callout-note: 148, 189, 223; // blue-2
  --ebw-callout-info: 111, 166, 211; // blue-3
  --ebw-callout-quote: 53, 120, 175; // blue-4

  --ebw-callout-tip: 134, 196, 193; // cyan-2
  --ebw-callout-question: 89, 174, 170; // cyan-3
  --ebw-callout-chat: 61, 126, 123; // cyan-4

  --ebw-callout-abstract: 199, 178, 195; // purple-2
  --ebw-callout-bug: 180, 152, 175; // purple-3
  --ebw-callout-example: 142, 103, 135; // purple-4

  --ebw-callout-danger: 230, 133, 132; // red-3
  --ebw-callout-failure: 211, 141, 159; // pink-3

  --ebw-callout-reference: 183, 183, 183; // gray
  --ebw-callout-toc: 235, 235, 235; // gray-light-4

  --blockquote-border-color: var(--secondary-accent-4);
}

.theme-light {
  --blockquote-border-color: var(--secondary-accent-2);
  --ebw-callout-toc: 159, 159, 159; // gray-dark-1
  --ebw-callout-reference: 137, 137, 137; // gray-dark-2
  --ebw-callout-success: 92, 122, 99; // green-4

  --ebw-callout-note: 33, 75, 109; // blue-5
  --ebw-callout-abstract: 88, 64, 84; // purple-5
  --ebw-callout-info: 53, 119, 174; // blue-4
  --ebw-callout-tip: 61, 126, 123; // cyan-4

  --ebw-callout-danger: 167, 92, 112; // pink-4
}

// Blockquote styling

.rendered-widget,
.markdown-preview-section,
.markdown-rendered {
  @include blockquote-styles;
}

// Edit button tweaks

.markdown-source-view.mod-cm6 .edit-block-button {
  right: calc(var(--size-4-2) + var(--icon-size) + 0.375rem);
  top: calc(var(--size-2-2) + 0.125rem);
}

// Build callouts

// Callout Color Types

$callout-types: (
        "abstract": ebw-callout-abstract,
        "summary": ebw-callout-abstract,
        "tldr": ebw-callout-abstract,
        "note": ebw-callout-note,
        "info": ebw-callout-info,
        "todo": ebw-callout-info,
        "tip": ebw-callout-tip,
        "hint": ebw-callout-tip,
        "important": ebw-callout-tip,
        "success": ebw-callout-success,
        "check": ebw-callout-success,
        "done": ebw-callout-success,
        "question": ebw-callout-question,
        "help": ebw-callout-question,
        "faq": ebw-callout-question,
        "warning": ebw-callout-warning,
        "caution": ebw-callout-warning,
        "attention": ebw-callout-warning,
        "failure": ebw-callout-failure,
        "fail": ebw-callout-failure,
        "missing": ebw-callout-failure,
        "danger": ebw-callout-danger,
        "error": ebw-callout-danger,
        "bug": ebw-callout-bug,
        "example": ebw-callout-example,
        "excerpt": ebw-callout-quote,
        "quote": ebw-callout-quote,
        "cite": ebw-callout-quote,
        "chat": ebw-callout-chat,
        "reference": ebw-callout-reference,
        "toc": ebw-callout-toc
);

.callout {
  @each $type, $color in $callout-types {
    &[data-callout="#{$type}"] {
      --callout-color: var(--#{$color});
    }
  }
}

// Color Map

$callout-title-types: (
        "info": blue-5,
        "todo": blue-5,
        "note": blue-5,
        "excerpt": blue-5,
        "quote": blue-5,
        "cite": blue-5,
        "bug": purple-5,
        "example": purple-5,
        "abstract": purple-5,
        "summary": purple-5,
        "tldr": purple-5,
        "question": cyan-5,
        "help": cyan-5,
        "faq": cyan-5,
        "tip": cyan-5,
        "hint": cyan-5,
        "important": cyan-5,
        "success": green-5,
        "check": green-5,
        "done": green-5,
        "warning": yellow-5,
        "caution": yellow-5,
        "attention": yellow-5,
        "danger": red-5,
        "error": red-5,
        "failure": red-5,
        "fail": red-5,
        "missing": red-5,
        "toc": gray-dark-4,
        "reference": gray-dark-4
);

.theme-light {
  @each $type, $color in $callout-title-types {
    .callout[data-callout="#{$type}"] {
      --callout-title-color: var(--#{$color});
    }
  }
}


.callout-title {
  font-family: var(--ebw-font-callout-title);

  & .callout-title-inner {
    flex: 2;
  }
}

.callout-content {
  background-color: var(--background-primary);

  > :first-child {
    margin-top: 0.5em;
  }

  > :last-child {
    margin-bottom: 0.5em;
  }
}

// Add Admonition
.admonition {
  margin: 1em 0;
  padding: var(--callout-padding);
}
.is-live-preview {
  .admonition {
    margin: 0;
    padding: var(--callout-padding);

    .admonition-content {
      > :first-child {
        margin-top: 0.5em;
      }
      > :last-child {
        margin-bottom: 0.5em;
      }
      > * {
        margin-top: initial;
        margin-bottom: initial;
      }
      > * br {
        display: none;
      }
      ul,
      ol {
        white-space: normal;
      }
      .math-block > mjx-container {
        padding: 0;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.markdown-source-view.mod-cm6 .edit-block-button {
  right: calc(var(--size-4-2) + var(--icon-size) + 0.375rem);
  top: calc(var(--size-2-2) + 0.125rem);
}


// ------------------------------------------------------
// Reference Admonition
// Create admonition of type 'reference' (book icon suggested)
// ```ad-reference
// Title:: Title of referenced thing
// Source:: https://....
// ```
// ------------------------------------------------------

.callout[data-callout="reference"] {
  .callout-content {
    white-space: pre-wrap;
    font-family: var(--font-monospace);
    font-size: var(--font-smallest);
    color: var(--text-muted);

    p {
      margin-block: 0;
    }

    p:not(:first-child) {
      margin-block-end: .5em;
    }
  }
}

// ------------------------------------------------------
// TOC Admonition
// List with compressed padding that floats to the right
// Create admonition of type 'toc' (outline icon suggested)
// ```ad-toc
// - List of links to document sections
// ```
// ------------------------------------------------------

.callout[data-callout="toc"] {
  &.callout {
    float: right;
    margin-left: .5em;
    min-width: 9.375rem;
  }

  .callout-content {
    padding-right: .5em;

    ul {
      display: block;
      margin-block-start: .5em;
      margin-block-end: .5em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 1.875rem;
    }
  }
}

div.modal-content {
  .callout[data-callout="toc"] {
    float: unset;
    min-width: unset;
    margin-left: unset;
  }
}

div.popover {
  .callout[data-callout="toc"] {
    display: none;
  }
}
