.callout {
  @apply rounded-lg border-s-8 border-gray-700 bg-gray-200 p-4 text-gray-700 dark:border-gray-200 dark:bg-gray-900 dark:text-gray-200;

  margin: 1.25em 0;

  @media (min-width: 768px) {
    margin: 1.3333333em 0;
  }

  @media (min-width: 1024px) {
    margin: 1.2em 0;
  }
}

.callout a {
  color: inherit;
}

.callout-title {
  @apply flex items-center;
  font-family: var(--font-heading);
}

.callout-title-icon {
  @apply shrink-0 grow-0 basis-9;
}

.callout-content {
  @apply ms-9;
}

.callout[data-callout='abstract'],
.callout[data-callout='summary'],
.callout[data-callout='tldr'] {
  @apply border-fuchsia-700 bg-fuchsia-200 text-fuchsia-700 dark:border-fuchsia-200 dark:bg-fuchsia-900 dark:text-fuchsia-200;
}

.callout[data-callout='bug'] {
  @apply border-rose-700 bg-rose-200 text-rose-700 dark:border-rose-200 dark:bg-rose-900 dark:text-rose-200;
}

.callout[data-callout='danger'],
.callout[data-callout='error'] {
  @apply border-amber-700 bg-amber-200 text-amber-700 dark:border-amber-200 dark:bg-amber-900 dark:text-amber-200;
}

.callout[data-callout='example'] {
  @apply border-stone-700 bg-stone-200 text-stone-700 dark:border-stone-200 dark:bg-stone-900 dark:text-stone-200;
}

.callout[data-callout='failure'],
.callout[data-callout='fail'],
.callout[data-callout='missing'] {
  @apply border-red-700 bg-red-200 text-red-700 dark:border-red-200 dark:bg-red-900 dark:text-red-200;
}

.callout[data-callout='info'] {
  @apply border-sky-700 bg-sky-200 text-sky-700 dark:border-sky-200 dark:bg-sky-900 dark:text-sky-200;
}

.callout[data-callout='note'] {
  @apply border-cyan-700 bg-cyan-200 text-cyan-700 dark:border-cyan-200 dark:bg-cyan-900 dark:text-cyan-200;
}

.callout[data-callout='question'],
.callout[data-callout='faq'],
.callout[data-callout='help'] {
  @apply border-blue-700 bg-blue-200 text-blue-700 dark:border-blue-200 dark:bg-blue-900 dark:text-blue-200;
}

.callout[data-callout='quote'],
.callout[data-callout='cite'] {
  @apply border-zinc-700 bg-zinc-200 text-zinc-700 dark:border-zinc-200 dark:bg-zinc-900 dark:text-zinc-200;
}

.callout[data-callout='success'],
.callout[data-callout='check'],
.callout[data-callout='done'] {
  @apply border-emerald-700 bg-emerald-200 text-emerald-700 dark:border-emerald-200 dark:bg-emerald-900 dark:text-emerald-200;
}

.callout[data-callout='tip'],
.callout[data-callout='hint'],
.callout[data-callout='important'] {
  @apply border-indigo-700 bg-indigo-200 text-indigo-700 dark:border-indigo-200 dark:bg-indigo-900 dark:text-indigo-200;
}

.callout[data-callout='todo'] {
  @apply border-lime-700 bg-lime-200 text-lime-700 dark:border-lime-200 dark:bg-lime-900 dark:text-lime-200;
}

.callout[data-callout='warning'],
.callout[data-callout='attention'],
.callout[data-callout='caution'] {
  @apply border-amber-700 bg-amber-200 text-amber-700 dark:border-amber-200 dark:bg-amber-900 dark:text-amber-200;
}
