@reference "../css/globals.css";

/*
 * Flat, GitHub-style admonitions.
 *
 * Icons are lucide (https://lucide.dev/icons/) data URIs applied as masks so
 * they render in currentColor.
 */

.admonition {
  --admonition-heading-color: var(--blue-11);
  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');

  display: flex;
  flex-direction: column;
  padding: 0.5rem 1rem;
  border-left: 0.25rem solid var(--admonition-heading-color);
  margin-bottom: 1rem;

  /* Tighten the gap between the title and body (md.css gives paragraphs a
     1rem block margin; flex children don't collapse margins). */
  & > .paragraph,
  & > p {
    margin-block: 0.375rem;
  }

  /* The paragraph right after the title hugs it, matching callouts, whose
     body is nested in a wrapper and gets the md.css :first-child treatment. */
  & > .admonition-title + .paragraph,
  & > .admonition-title + p {
    margin-block-start: 0;
  }
}

.admonition-title {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--admonition-heading-color);

  &::before {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    vertical-align: -0.125rem;
    background-color: currentcolor;
    mask: var(--admonition-icon) no-repeat center / contain;
  }

  > .paragraph {
    margin: 0;
    padding-top: 0.5rem;
    font-weight: initial;
    text-transform: none;

    @apply text-foreground tracking-normal;
  }
}

.admonition.info,
.admonition.note {
  --admonition-heading-color: var(--blue-11);
  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
}

.admonition.danger,
.admonition.caution,
.admonition.error {
  --admonition-heading-color: var(--red-11);
  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-octagon-alert"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>');
}

.admonition.attention,
.admonition.warning {
  --admonition-heading-color: var(--yellow-11);
  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>');
}

.admonition.hint {
  --admonition-heading-color: var(--gray-11);
  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>');
}

.admonition.important {
  --admonition-heading-color: var(--cyan-11);
  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-message-square-warning"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/><path d="M12 7v2"/><path d="M12 13h.01"/></svg>');
}

.admonition.success {
  --admonition-heading-color: var(--grass-11);
  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>');
}

.admonition.tip {
  --admonition-heading-color: var(--grass-11);
  --admonition-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lightbulb"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>');
}

/* Quiet, icon-less variant used by neutral callouts. */
.admonition.neutral {
  --admonition-heading-color: var(--gray-11);

  .admonition-title::before {
    content: none;
  }
}