/* =========================================================
   Component — Alert
   ---------------------------------------------------------
   The line that says what just happened. Tinted rather than
   filled: a solid green bar across the top of a page reads as
   an interruption, and most of what it announces is routine.
   ========================================================= */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--alert-line, var(--color-line));
  border-radius: var(--radius-md);
  background: var(--alert-bg, var(--color-surface));
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.alert + .alert { margin-block-start: var(--space-3); }

.alert svg {
  flex: none;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-block-start: 0.1rem;
  color: var(--alert-icon, var(--color-text-muted));
}

.alert p { margin: 0; }
.alert p + p { margin-block-start: var(--space-1); }

.alert--success {
  --alert-bg: var(--color-success-soft);
  --alert-line: color-mix(in srgb, var(--color-success) 34%, transparent);
  --alert-icon: var(--color-success);
}

.alert--danger {
  --alert-bg: var(--color-danger-soft);
  --alert-line: color-mix(in srgb, var(--color-danger) 34%, transparent);
  --alert-icon: var(--color-danger);
}

.alert--warning {
  --alert-bg: var(--color-warning-soft);
  --alert-line: color-mix(in srgb, var(--color-warning) 34%, transparent);
  --alert-icon: var(--color-warning);
}

.alert--info {
  --alert-bg: var(--color-primary-soft);
  --alert-line: color-mix(in srgb, var(--color-primary) 30%, transparent);
  --alert-icon: var(--color-primary-text);
}

/* A hairline rule of the same tint, for notes that sit inside a card
   and should not repeat the card's own border. */
.alert--flat {
  border: 0;
  border-inline-start: 3px solid var(--alert-icon, var(--color-line));
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
:root[dir="ltr"] .alert--flat {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}