/**
 * Component: Alerts
 */

.alert {
  display: flex;
  gap: var(--sf-space-3);
  align-items: flex-start;
  padding: var(--sf-space-4) var(--sf-space-5);
  border-radius: var(--sf-radius-md);
  border: 1px solid transparent;
  font-size: var(--sf-text-sm);
}

.alert__icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.1em; }

.alert__title {
  font-weight: var(--sf-weight-semibold);
  margin-bottom: var(--sf-space-1);
}

.alert--info {
  background: var(--sf-indigo-50);
  border-color: var(--sf-indigo-100);
  color: var(--sf-indigo-600);
}
.alert--success {
  background: var(--sf-green-100);
  border-color: rgba(30, 158, 108, 0.25);
  color: #16794f;
}
.alert--warning {
  background: var(--sf-amber-100);
  border-color: rgba(232, 163, 61, 0.35);
  color: #8a5e1c;
}
.alert--error {
  background: var(--sf-red-100);
  border-color: rgba(214, 69, 69, 0.3);
  color: #a32f2f;
}

.alert--dismissible { position: relative; padding-right: var(--sf-space-10); }
.alert__dismiss {
  position: absolute;
  top: var(--sf-space-3);
  right: var(--sf-space-3);
  background: none;
  border: none;
  color: currentColor;
  opacity: 0.6;
  padding: var(--sf-space-1);
}
.alert__dismiss:hover { opacity: 1; }