.eb-alert { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eb-space-3) var(--eb-space-4); padding: 8px 10px; border: 0; border-radius: var(--eb-radius-0); color: var(--eb-text-primary); font-size: 14px; }
.eb-alert--info { background: var(--eb-primary-50); }
.eb-alert--success { background: var(--eb-success-50); }
.eb-alert--warning { background: var(--eb-warning-50); }
.eb-alert--danger { background: var(--eb-danger-50); }
.eb-alert--banner { width: 100%; }
.eb-alert > svg { flex: 0 0 auto; width: 22px; height: 22px; }
.eb-alert > div { flex: 1 1 260px; min-width: 0; }
.eb-alert form { margin: 0; }

/* Bootstrap's .alert (flash messages, script-built notices) follows the same scale. */
.alert { --bs-alert-padding-y: 8px; --bs-alert-padding-x: 10px; font-size: 14px; }