/* ===========================================
   ALERT COMPONENT
   =========================================== */

.alert {
  /* === Configuration === */
  --alert-bg: var(--bg-tertiary);
  --alert-border: var(--border-default);
  --alert-color: var(--text-primary);
  --alert-accent: var(--text-tertiary);
  --alert-padding: 0.875rem 1rem 0.875rem 1.125rem;
  --alert-radius: var(--radius-lg);

  /* === Base Styles === */
  position: relative;
  padding: var(--alert-padding);
  border-radius: var(--alert-radius);
  margin-block: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  overflow: hidden;
  background: var(--alert-bg);
  border: 1px solid var(--alert-border);
  color: var(--alert-color);
  animation: alertSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Accent bar */
.alert::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--alert-accent);
}

.alert svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* === VARIANTS via data attributes === */

/* Error */
.alert[data-type="error"] {
  --alert-bg: linear-gradient(135deg, var(--state-danger-light) 0%, rgba(239, 68, 68, 0.06) 100%);
  --alert-border: rgba(239, 68, 68, 0.2);
  --alert-color: #f87171;
  --alert-accent: var(--state-danger);
}

/* Warning */
.alert[data-type="warning"] {
  --alert-bg: linear-gradient(135deg, var(--state-warning-light) 0%, rgba(251, 191, 36, 0.06) 100%);
  --alert-border: rgba(251, 191, 36, 0.2);
  --alert-color: #fbbf24;
  --alert-accent: var(--state-warning);
}

/* Success */
.alert[data-type="success"] {
  --alert-bg: linear-gradient(135deg, var(--state-success-light) 0%, rgba(34, 197, 94, 0.06) 100%);
  --alert-border: rgba(34, 197, 94, 0.2);
  --alert-color: #4ade80;
  --alert-accent: var(--state-success);
}

/* Info */
.alert[data-type="info"] {
  --alert-bg: linear-gradient(135deg, var(--state-info-light) 0%, rgba(59, 130, 246, 0.06) 100%);
  --alert-border: rgba(59, 130, 246, 0.2);
  --alert-color: #60a5fa;
  --alert-accent: var(--state-info);
}

/* Light theme adjustments */
[data-theme="light"] .alert[data-type="error"] {
  --alert-color: #dc2626;
}
[data-theme="light"] .alert[data-type="warning"] {
  --alert-color: #d97706;
}
[data-theme="light"] .alert[data-type="success"] {
  --alert-color: #16a34a;
}
[data-theme="light"] .alert[data-type="info"] {
  --alert-color: #2563eb;
}

/* === Subcomponents === */

.alert__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.alert__title {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.alert__text {
  opacity: 0.9;
}

.alert__dismiss {
  background: none;
  border: none;
  padding: 0.375rem;
  margin: -0.25rem -0.25rem -0.25rem 0;
  cursor: pointer;
  color: inherit;
  opacity: 0.5;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.alert__dismiss:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .alert__dismiss:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* === States === */

.alert.hidden {
  display: none;
}

/* === Animation === */

@keyframes alertSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* === Layout helpers === */

.alert-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}