/* colors.css imported globally via style.css */
/* ==========================================================================
   _alerts.css – Alert Components (Success, Warning, Error, Info)
   ========================================================================== */

/* ==========================================================================
   Table of Contents
   ========================================================================== */
/**
 * 1.0 Base Alert Container
 * 2.0 Icon & Dismiss Button
 * 3.0 Alert Types
 *     3.1 Success
 *     3.2 Warning
 *     3.3 Error
 *     3.4 Info
 * 4.0 Animations
 * 5.0 Responsive Overrides
 * 6.0 Dark Mode Overrides
 */

/* ==========================================================================
   1.0 Base Alert Container
   ========================================================================== */

.alert {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-1, 6px);
  color: var(--color-text);
  font-size: 1rem;
  animation: fadeInAlert 0.3s ease forwards;
  box-sizing: border-box;
}

/* ==========================================================================
   2.0 Icon & Dismiss Button
   ========================================================================== */

.alert .icon {
  flex-shrink: 0;
  margin-right: var(--space-2);
  font-size: 1.25rem;
}

.alert .dismiss-btn {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.alert .dismiss-btn:focus-visible {
  outline: 2px solid var(--kaplon-red);
  outline-offset: 2px;
}

/* ==========================================================================
   3.0 Alert Types
   ========================================================================== */

/* 3.1 Success */
/* Contrast: ensure text token applied after container base */
.alert-success {
  background-color: var(--color-success-bg);
  border-color: var(--color-success-border);
  color: var(--color-success-text);
  /* Fallback guard if token overridden incorrectly */
  --_alert-success-fg: var(--color-success-text);
}

/* 3.2 Warning */
.alert-warning {
  background-color: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
  --_alert-warning-fg: var(--color-warning-text);
}

/* 3.3 Error */
.alert-error {
  background-color: var(--color-error-bg);
  border-color: var(--color-error-border);
  color: var(--color-error-text);
  --_alert-error-fg: var(--color-error-text);
}

/* 3.4 Info */
.alert-info {
  background-color: var(--color-info-bg);
  border-color: var(--color-info-border);
  color: var(--color-info-text);
  --_alert-info-fg: var(--color-info-text);
}

/* 3.x Solid Variants (explicit, high-contrast) */
.alert--solid,
.alert.solid {
  /* utility flag to switch variant; provide minimal baseline */
  /* Inherit border radius & spacing; ensures non-empty ruleset for lint */
  border-radius: var(--radius-1, 6px);
}

.alert-success.alert--solid,
.alert-success.solid {
  background-color: var(--green-dark);
  border-color: color-mix(in oklab, var(--green-dark) 70%, black);
  color: var(--white);
}

.alert-warning.alert--solid,
.alert-warning.solid {
  background-color: var(--orange-dark);
  border-color: color-mix(in oklab, var(--orange-dark) 70%, black);
  color: var(--white);
}

.alert-error.alert--solid,
.alert-error.solid {
  background-color: var(--kaplon-red-active);
  border-color: color-mix(in oklab, var(--kaplon-red-active) 70%, black);
  color: var(--white);
}

.alert-info.alert--solid,
.alert-info.solid {
  background-color: var(--kaplon-blue-dark);
  border-color: color-mix(in oklab, var(--kaplon-blue-dark) 70%, black);
  color: var(--white);
}

/* IDX Scoped Alerts (use IDX token set) */
.IDX-wrapper-standard .alert,
.IDX-wrapper-standard .IDX-alert {
  background-color: var(--idx-surface-card, var(--surface-soft));
  border-color: var(--idx-border, var(--gray-border));
  color: var(--idx-text-primary, var(--gray-900));
}

.IDX-wrapper-standard .alert-success,
.IDX-wrapper-standard .IDX-alert-success {
  background-color: var(--idx-success-bg, var(--color-success-bg));
  border-color: color-mix(in oklab, var(--idx-success-bg, var(--color-success-bg)) 50%, var(--idx-border, var(--gray-border)));
  color: var(--idx-success-text, var(--color-success-text));
}

.IDX-wrapper-standard .alert-warning,
.IDX-wrapper-standard .IDX-alert-warning {
  background-color: var(--idx-warning-bg, var(--color-warning-bg));
  border-color: color-mix(in oklab, var(--idx-warning-bg, var(--color-warning-bg)) 50%, var(--idx-border, var(--gray-border)));
  color: var(--idx-warning-text, var(--color-warning-text));
}

.IDX-wrapper-standard .alert-error,
.IDX-wrapper-standard .IDX-alert-danger,
.IDX-wrapper-standard .IDX-alert-error {
  background-color: var(--idx-error-bg, var(--color-error-bg));
  border-color: color-mix(in oklab, var(--idx-error-bg, var(--color-error-bg)) 50%, var(--idx-border, var(--gray-border)));
  color: var(--idx-error-text, var(--color-error-text));
}

.IDX-wrapper-standard .alert-info,
.IDX-wrapper-standard .IDX-alert-info {
  background-color: var(--idx-info-bg, var(--color-info-bg));
  border-color: color-mix(in oklab, var(--idx-info-bg, var(--color-info-bg)) 50%, var(--idx-border, var(--gray-border)));
  color: var(--idx-info-text, var(--color-info-text));
}

/* ==========================================================================
   4.0 Animations
   ========================================================================== */

@keyframes fadeInAlert {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .alert {
    animation: none;
  }
}

/* ==========================================================================
   5.0 Responsive Overrides
   ========================================================================== */

@media (max-width: 600px) {
  .alert {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-3);
  }

  .alert .icon {
    margin-right: 0;
    margin-bottom: var(--space-1);
  }

  .alert .dismiss-btn {
    top: calc(var(--space-1) / 2);
    right: calc(var(--space-1) / 2);
  }
}

/* ==========================================================================
   6.0 Dark Mode Overrides
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  html[data-kaplon-color-mode=system] .alert {
    background-color: var(--color-surface-dark);
    border-color: var(--color-border-dark);
    color: var(--color-text-dark);
  }

  html[data-kaplon-color-mode=system] .alert-success {
    background-color: var(--color-success-bg-dark);
    border-color: var(--color-success-border-dark);
    color: var(--color-success-text-dark);
  }

  html[data-kaplon-color-mode=system] .alert-warning {
    background-color: var(--color-warning-bg-dark);
    border-color: var(--color-warning-border-dark);
    color: var(--color-warning-text-dark);
  }

  html[data-kaplon-color-mode=system] .alert-error {
    background-color: var(--color-error-bg-dark);
    border-color: var(--color-error-border-dark);
    color: var(--color-error-text-dark);
  }

  html[data-kaplon-color-mode=system] .alert-info {
    background-color: var(--color-info-bg-dark);
    border-color: var(--color-info-border-dark);
    color: var(--color-info-text-dark);
  }

  html[data-kaplon-color-mode=system] .alert .dismiss-btn {
    color: var(--color-text-dark);
  }
}
html[data-kaplon-color-mode=dark] .alert {
    background-color: var(--color-surface-dark);
    border-color: var(--color-border-dark);
    color: var(--color-text-dark);
  }
html[data-kaplon-color-mode=dark] .alert-success {
    background-color: var(--color-success-bg-dark);
    border-color: var(--color-success-border-dark);
    color: var(--color-success-text-dark);
  }
html[data-kaplon-color-mode=dark] .alert-warning {
    background-color: var(--color-warning-bg-dark);
    border-color: var(--color-warning-border-dark);
    color: var(--color-warning-text-dark);
  }
html[data-kaplon-color-mode=dark] .alert-error {
    background-color: var(--color-error-bg-dark);
    border-color: var(--color-error-border-dark);
    color: var(--color-error-text-dark);
  }
html[data-kaplon-color-mode=dark] .alert-info {
    background-color: var(--color-info-bg-dark);
    border-color: var(--color-info-border-dark);
    color: var(--color-info-text-dark);
  }
html[data-kaplon-color-mode=dark] .alert .dismiss-btn {
    color: var(--color-text-dark);
  }