/**
 * Modern Alert/Notification Component
 * Contextual feedback messages with semantic colors
 */

/* Base Alert Styles */
.alert {
  position: relative;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-4);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: all var(--transition-base);
}

.alert-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  color: var(--color-muted-foreground);
  font-size: var(--font-size-lg);
  line-height: 1;
  opacity: 0.5;
  transition: opacity var(--transition-base);
}

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

/* Success Alert - Green accent */
.alert-success {
  border-left: 4px solid #22c55e;
  background-color: #f0fdf4;
}

/* Destructive Alert - Red accent */
.alert-destructive {
  border-left: 4px solid var(--color-destructive);
  background-color: #fef2f2;
}

/* Warning Alert - Yellow accent */
.alert-warning {
  border-left: 4px solid #eab308;
  background-color: #fefce8;
}

/* Info Alert - Blue accent */
.alert-info {
  border-left: 4px solid var(--color-link);
  background-color: #eff6ff;
}

/* Alert Title */
.alert-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-base);
}

/* Alert Description */
.alert-description {
  font-size: var(--font-size-sm);
  color: var(--color-muted-foreground);
  line-height: var(--line-height-normal);
}