@utility callout {
  @apply border-none rounded-lg px-6 py-3 my-6;
  border-color: var(--color-callout-border);
  background-color: var(--color-callout-background);

  summary {
    @apply cursor-pointer;
    > .callout-fold-icon > svg {
      transform: rotate(-90deg);
    }
  }

  &[open] summary {
    > .callout-fold-icon > svg {
      transform: none;
    }
  }
}


@utility callout-title {
  @apply text-base flex items-center gap-2 font-semibold text-[var(--color-callout-foreground)];
}

@utility callout-title-icon {
  svg {
    @apply w-4.5 h-4.5;
  }
}

@utility callout-content {
  @apply font-paragraph text-text-normal;

  p {
    @apply my-4;
  }

  strong {
    @apply text-[var(--color-callout-foreground)];
  }
}

.callout[data-callout="abstract"],
.callout[data-callout="summary"],
.callout[data-callout="tldr"],
.callout[data-callout="tip"],
.callout[data-callout="hint"],
.callout[data-callout="important"] {
   --color-callout-foreground: var(--color-hint-foreground);
  --color-callout-border: var(--color-hint-border);
  --color-callout-background: var(--color-hint-background);
}

.callout[data-callout="info"],
.callout[data-callout="note"],
.callout[data-callout="todo"] {
   --color-callout-foreground: var(--color-info-foreground);
  --color-callout-border: var(--color-info-border);
  --color-callout-background: var(--color-info-background);
}

.callout[data-callout="success"],
.callout[data-callout="check"],
.callout[data-callout="done"] {
   --color-callout-foreground: var(--color-success-foreground);
  --color-callout-border: var(--color-success-border);
  --color-callout-background: var(--color-success-background);
}

.callout[data-callout="question"],
.callout[data-callout="help"],
.callout[data-callout="faq"],
.callout[data-callout="warning"],
.callout[data-callout="caution"],
.callout[data-callout="attention"] {
   --color-callout-foreground: var(--color-warning-foreground);
  --color-callout-border: var(--color-warning-border);
  --color-callout-background: var(--color-warning-background);
}

.callout[data-callout="failure"],
.callout[data-callout="fail"],
.callout[data-callout="missing"],
.callout[data-callout="danger"],
.callout[data-callout="error"],
.callout[data-callout="bug"] {
   --color-callout-foreground: var(--color-danger-foreground);
  --color-callout-border: var(--color-danger-border);
  --color-callout-background: var(--color-danger-background);
}

.callout[data-callout="example"] {
   --color-callout-foreground: var(--color-example-foreground);
  --color-callout-border: var(--color-example-border);
  --color-callout-background: var(--color-example-background);
}

.callout[data-callout="quote"],
.callout[data-callout="cite"] {
   --color-callout-foreground: var(--color-quote-foreground);
  --color-callout-border: var(--color-quote-border);
  --color-callout-background: var(--color-quote-background);
}

@source inline("callout");
@source inline("callout-title");
@source inline("callout-title-icon");
@source inline("callout-content");