/*
 * Alert
 * Variants: success, warning, error, info
 * Dismissible
 */

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

.alert-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.125rem;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.alert-dismiss {
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.alert-dismiss:hover {
  opacity: 1;
}

/* Variants */
.alert-success {
  background: #f0fdf4;
  color: #166534;
  border-color: #bbf7d0;
}
.dark .alert-success {
  background: #14532d40;
  color: #86efac;
  border-color: #166534;
}

.alert-warning {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}
.dark .alert-warning {
  background: #78350f40;
  color: #fde68a;
  border-color: #78350f;
}

.alert-error {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fecaca;
}
.dark .alert-error {
  background: #7f1d1d40;
  color: #fca5a5;
  border-color: #7f1d1d;
}

.alert-info {
  background: #eff6ff;
  color: #1e40af;
  border-color: #bfdbfe;
}
.dark .alert-info {
  background: #1e3a5f40;
  color: #93c5fd;
  border-color: #1e3a5f;
}