/**
 * Modern Alert Components
 * Standalone alert/notification styles
 */

.modern-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px);
  border-radius: var(--radius-md, 8px);
  margin-bottom: var(--space-6, 24px);
  border: 1px solid transparent;
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

.modern-alert-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.modern-alert-content {
  flex: 1;
}

.modern-alert-title {
  font-weight: 600;
  font-size: var(--font-size-base, 16px);
  margin-bottom: var(--space-1, 4px);
}

/* Alert Variants */
.modern-alert-danger {
  background-color: var(--color-error-100, #fee2e2);
  border-color: #fca5a5;
  color: #991b1b;
}

.modern-alert-success {
  background-color: var(--color-success-100, #dcfce7);
  border-color: #86efac;
  color: #166534;
}

.modern-alert-warning {
  background-color: var(--color-warning-100, #fef3c7);
  border-color: #fcd34d;
  color: #92400e;
}

.modern-alert-info {
  background-color: var(--color-info-100, #dbeafe);
  border-color: #93c5fd;
  color: #1e40af;
}

/* Close Button */
.modern-alert-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: var(--space-1, 4px);
  margin-left: auto;
  border-radius: var(--radius-sm, 4px);
  transition: opacity 0.2s;
}

.modern-alert-close:hover {
  opacity: 1;
}

.modern-alert-close:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}