/* Styles for src/components/callout.js and nothing else. */

.callout {
  border: 1px solid var(--c-info-border);
  background: var(--c-info);
  padding: var(--s-2) var(--s-3);
  margin: var(--s-2) 0;
}
.callout--success { background: var(--c-success-bg); }
.callout--warning { background: var(--c-info); }

.callout__title { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 2px; }
.callout__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: var(--c-highlight);
  font-family: Georgia, serif;
}
.callout__icon--warning { background: #f0a30a; color: #000000; font-family: var(--font); }
.callout__icon--success { background: var(--c-success); font-family: var(--font); }

details.callout > summary { cursor: default; list-style: none; }
details.callout > summary::-webkit-details-marker { display: none; }
details.callout[open] > summary { margin-bottom: var(--s-1); }

.callout__body p:last-child, .callout__body ul:last-child { margin-bottom: 0; }