:root {
  --line-height-tight: 1.3;
  --callout-border-width: 1.5px;
  --callout-padding: 10px 12px 10px 15px;
  --callout-radius: 8px;
  --callout-title-color: inherit;
  --callout-title-padding: 0;
  --callout-title-size: inherit;
  --callout-title-weight: 600;
  --callout-content-padding: 0;
  --callout-collapse-icon: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0ibTkgMThsNi02bC02LTYiLz48L3N2Zz4=);
}
.callout {
  border-style: solid;
  border-width: var(--callout-border-width);
  border-radius: var(--callout-radius);
  margin: 1em 0;
  padding: var(--callout-padding);
  --callout-icon: lucide-pencil;
  border-color: hsl(from var(--blue) h s l / 0.5);
  background-color: hsl(from var(--blue) h s l / 0.2);
}
.callout-title {
  padding: var(--callout-title-padding);
  display: flex;
  gap: 7px;
  font-size: var(--callout-title-size);
  line-height: var(--line-height-tight);
  align-items: center;
  cursor: pointer;
  color: var(--blue);
  > .callout-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }
  > .callout-title-inner {
    --font-weight: var(--callout-title-weight);
    font-weight: var(--font-weight);
    color: var(--callout-title-color);
  }
  > .callout-fold {
    mask-image: var(--callout-collapse-icon);
    mask-size: 100%;
    -webkit-mask-image: var(--callout-collapse-icon);
    -webkit-mask-size: 100%;
    height: 20px;
    width: 20px;
    transition: 0.1s ease-in-out;
    background-color: var(--blue);
  }
}
.callout-content {
  padding: var(--callout-content-padding);
}
details[close].callout > .callout-title > .callout-fold {
  transform: rotate(-90deg);
}
details[open].callout > .callout-title > .callout-fold {
  transform: rotate(90deg);
}
.callout[data-callout="info"],
.callout[data-callout="todo"] {
  --callout-icon: lucide-check-circle-2;
  border-color: hsl(from var(--sapphire) h s l / 0.5);
  background-color: hsl(from var(--sapphire) h s l / 0.2);
  svg {
    color: var(--sapphire);
  }
  .callout-title {
    --callout-title-color: var(--sapphire);
  }
  .callout-title .callout-fold {
    background-color: var(--sapphire);
  }
}
.callout[data-callout="success"],
.callout[data-callout="check"],
.callout[data-callout="done"] {
  --callout-icon: lucide-check;
  border-color: hsl(from var(--green) h s l / 0.5);
  background-color: hsl(from var(--green) h s l / 0.2);
  svg {
    color: var(--green);
  }
  .callout-title {
    --callout-title-color: var(--green);
  }
  .callout-title .callout-fold {
    background-color: var(--green);
  }
}
.callout[data-callout="warning"],
.callout[data-callout="caution"],
.callout[data-callout="attention"] {
  --callout-icon: lucide-alert-triangle;
  border-color: hsl(from var(--peach) h s l / 0.5);
  background-color: hsl(from var(--peach) h s l / 0.2);
  svg {
    color: var(--peach);
  }
  .callout-title {
    --callout-title-color: var(--peach);
  }
  .callout-title .callout-fold {
    background-color: var(--peach);
  }
}
.callout[data-callout="question"],
.callout[data-callout="help"],
.callout[data-callout="faq"] {
  --callout-icon: lucide-alert-mark;
  border-color: hsl(from var(--yellow) h s l / 0.5);
  background-color: hsl(from var(--yellow) h s l / 0.2);
  svg {
    color: var(--yellow);
  }
  .callout-title {
    --callout-title-color: var(--yellow);
  }
  .callout-title .callout-fold {
    background-color: var(--yellow);
  }
}
.callout[data-callout="danger"],
.callout[data-callout="error"],
.callout[data-callout="bug"],
.callout[data-callout="failure"],
.callout[data-callout="fail"],
.callout[data-callout="missing"] {
  --callout-icon: lucide-zap;
  border-color: hsl(from var(--red) h s l / 0.5);
  background-color: hsl(from var(--red) h s l / 0.2);
  svg {
    color: var(--red);
  }
  .callout-title {
    --callout-title-color: var(--red);
  }
  .callout-title .callout-fold {
    background-color: var(--red);
  }
}
.callout[data-callout="tip"],
.callout[data-callout="hint"],
.callout[data-callout="important"] {
  --callout-icon: lucide-flame;
  border-color: hsl(from var(--pink) h s l / 0.5);
  background-color: hsl(from var(--pink) h s l / 0.2);
  svg {
    color: var(--pink);
  }
  .callout-title {
    --callout-title-color: var(--pink);
  }
  .callout-title .callout-fold {
    background-color: var(--pink);
  }
}
.callout[data-callout="example"] {
  --callout-icon: lucide-list;
  border-color: hsl(from var(--mauve) h s l / 0.5);
  background-color: hsl(from var(--mauve) h s l / 0.2);
  svg {
    color: var(--mauve);
  }
  .callout-title {
    --callout-title-color: var(--mauve);
  }
  .callout-title .callout-fold {
    background-color: var(--mauve);
  }
}
.callout[data-callout="abstract"],
.callout[data-callout="summary"],
.callout[data-callout="tldr"] {
  --callout-icon: lucide-clipboard-list;
  border-color: hsl(from var(--teal) h s l / 0.5);
  background-color: hsl(from var(--teal) h s l / 0.2);
  svg {
    color: var(--teal);
  }
  .callout-title {
    --callout-title-color: var(--teal);
  }
  .callout-title .callout-fold {
    background-color: var(--teal);
  }
}
.callout[data-callout="quote"],
.callout[data-callout="cite"] {
  --callout-icon: quote-glyph;
  border-color: hsl(from var(--lavender) h s l / 0.5);
  background-color: hsl(from var(--lavender) h s l / 0.2);
  svg {
    color: var(--lavender);
  }
  .callout-title {
    --callout-title-color: var(--lavender);
  }
  .callout-title .callout-fold {
    background-color: var(--lavender);
  }
}