/* ============================================================
   alert-ext.css  — custom inline alert banner utility classes
   Complements AntDesign <Alert> for plain div-based banners.
   ============================================================ */

/* Base shared structure */
.alert-ext-warning,
.alert-ext-info,
.alert-ext-danger {
  padding: 10px;
  margin: 10px 0px;
}

/* Text inside any alert-ext banner */
.alert-ext-warning p,
.alert-ext-info p,
.alert-ext-danger p {
  margin: 10px;
  font-family: var(--font-family-roboto);
  font-size: 14px;
  font-weight: 400;
  color: var(--trimble-color-gray-dark);
}

/* ── Warning (yellow) ─────────────────────────────────────── */
.alert-ext-warning {
  background-color: var(--trimble-color-yellow-pale);
  border-left: 5px solid var(--trimble-color-yellow);
}

/* ── Info (blue) ──────────────────────────────────────────── */
.alert-ext-info {
  background-color: rgba(0, 99, 163, 0.07); /* --trimble-color-blue at 7% */
  border-left: 5px solid var(--trimble-color-blue-light);
}

.alert-ext-info p {
  color: var(--trimble-color-blue-dark-2);
}

/* ── Danger (red) ─────────────────────────────────────────── */
.alert-ext-danger {
  background-color: var(--trimble-color-red-pale);
  border-left: 5px solid var(--trimble-color-red);
}

.alert-ext-danger p {
  color: var(--trimble-color-red);
}