.callout {
  --callout-bg: var(--callout-note-bg, #f0f4f8);
  --callout-accent: var(--callout-note-accent, #4a90e2);
  background: var(--callout-bg);
  border-left: 4px solid var(--callout-accent);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-radius: 4px;
}

.callout-title {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--callout-accent);
}

.callout-body > :first-child {
  margin-top: 0;
}

.callout-body > :last-child {
  margin-bottom: 0;
}

.callout-note {
  --callout-bg: #e8f0fe;
  --callout-accent: #4a90e2;
}
.callout-abstract,
.callout-summary,
.callout-tldr {
  --callout-bg: #e0f7fa;
  --callout-accent: #26a69a;
}
.callout-info,
.callout-todo {
  --callout-bg: #e3f2fd;
  --callout-accent: #2196f3;
}
.callout-tip,
.callout-hint,
.callout-important {
  --callout-bg: #fff8e1;
  --callout-accent: #ffa726;
}
.callout-success,
.callout-check,
.callout-done {
  --callout-bg: #e8f5e9;
  --callout-accent: #43a047;
}
.callout-question,
.callout-help,
.callout-faq {
  --callout-bg: #f3e5f5;
  --callout-accent: #8e24aa;
}
.callout-warning,
.callout-caution,
.callout-attention {
  --callout-bg: #fff3e0;
  --callout-accent: #fb8c00;
}
.callout-failure,
.callout-fail,
.callout-missing {
  --callout-bg: #ffebee;
  --callout-accent: #e53935;
}
.callout-danger,
.callout-error {
  --callout-bg: #ffebee;
  --callout-accent: #c62828;
}
.callout-bug {
  --callout-bg: #fce4ec;
  --callout-accent: #d81b60;
}
.callout-example {
  --callout-bg: #f3e5f5;
  --callout-accent: #7b1fa2;
}
.callout-quote,
.callout-cite {
  --callout-bg: #f5f5f5;
  --callout-accent: #757575;
}

@media (prefers-color-scheme: dark) {
  .callout {
    --callout-bg: var(--callout-note-bg, #1e2a3a);
    --callout-accent: var(--callout-note-accent, #7ab3ec);
  }
  .callout-note {
    --callout-bg: #1e2a3a;
    --callout-accent: #7ab3ec;
  }
  .callout-abstract,
  .callout-summary,
  .callout-tldr {
    --callout-bg: #1b2f2e;
    --callout-accent: #4dc4b8;
  }
  .callout-info,
  .callout-todo {
    --callout-bg: #1c2b3a;
    --callout-accent: #64b5f6;
  }
  .callout-tip,
  .callout-hint,
  .callout-important {
    --callout-bg: #33291a;
    --callout-accent: #ffb74d;
  }
  .callout-success,
  .callout-check,
  .callout-done {
    --callout-bg: #1e2f20;
    --callout-accent: #66bb6a;
  }
  .callout-question,
  .callout-help,
  .callout-faq {
    --callout-bg: #2d2233;
    --callout-accent: #ba68c8;
  }
  .callout-warning,
  .callout-caution,
  .callout-attention {
    --callout-bg: #332718;
    --callout-accent: #ffa040;
  }
  .callout-failure,
  .callout-fail,
  .callout-missing {
    --callout-bg: #331f1f;
    --callout-accent: #ef6e6b;
  }
  .callout-danger,
  .callout-error {
    --callout-bg: #331d1d;
    --callout-accent: #e57373;
  }
  .callout-bug {
    --callout-bg: #321f27;
    --callout-accent: #ec5f8f;
  }
  .callout-example {
    --callout-bg: #2b2133;
    --callout-accent: #b077d6;
  }
  .callout-quote,
  .callout-cite {
    --callout-bg: #2a2620;
    --callout-accent: #a89d8c;
  }
}