.ifx-callout {
  --ifx-callout-accent: var(--ifx-note-accent, #225ea8);
  --ifx-callout-fill: var(--ifx-note-fill, #eff6ff);
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  margin-block: 1.75rem;
  padding: 1.35rem 1.5rem;
  border: 0;
  border-inline-start: 4px solid var(--ifx-callout-accent);
  border-radius: 0 8px 8px 0;
  background: var(--ifx-callout-fill);
  color: var(--ifx-callout-text, #000032);
  font-family: inherit;
  font-size: inherit;
  line-height: 1.65;
  text-align: start;
}
.ifx-callout--tip {
  --ifx-callout-accent: var(--ifx-tip-accent, #226c49);
  --ifx-callout-fill: var(--ifx-tip-fill, #eff8f2);
}
.ifx-callout--warning {
  --ifx-callout-accent: var(--ifx-warning-accent, #946000);
  --ifx-callout-fill: var(--ifx-warning-fill, #fff7e5);
}
.ifx-callout__icon { display: flex; flex: 0 0 24px; padding-top: .2em; color: var(--ifx-callout-accent); }
.ifx-callout__icon svg { display: block; }
.ifx-callout__body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ifx-callout__label { display: block; margin-bottom: .25rem; color: inherit; font-weight: 700; }
.ifx-callout__text { color: inherit; }
.ifx-callout__text > :first-child { margin-top: 0; }
.ifx-callout__text > :last-child { margin-bottom: 0; }
.ifx-callout__text a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.ifx-callout__text a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 480px) {
  .ifx-callout { padding: 1rem; gap: .75rem; }
}
@media (forced-colors: active) {
  .ifx-callout { border: 1px solid CanvasText; border-inline-start-width: 4px; }
  .ifx-callout__icon { color: CanvasText; }
}