// Alert component - Notification boxes

/**
 * @section Alert Base
 */

/** @public Alert container - notification box */
.alert {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border));
  padding: var(--spacing-4);
  display: flex;
  gap: var(--spacing-3);
}

/** @public Alert icon container */
.alert-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

/** @public Alert content wrapper */
.alert-content {
  flex: 1;
  min-width: 0; // Allow flex item to shrink below content size
  overflow: hidden; // Prevent content overflow
}

/** @public Alert title */
.alert-title {
  font-weight: var(--font-medium);
  font-size: var(--text-sm);
  margin-bottom: var(--spacing-2);
  line-height: var(--leading-tight);
}

/** @public Alert description text */
.alert-description {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  line-height: var(--leading-relaxed);
  
  // Handle long content gracefully
  pre {
    overflow-x: auto;
    max-width: 100%;
  }
  
  code {
    word-break: break-word;
  }
}

/**
 * @section Alert Variants
 */

/** @public Default alert */
.alert-default {
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}

/** @public Destructive/error alert */
.alert-destructive {
  border-color: hsl(var(--destructive));
  // Light mode: light red background
  background-color: hsl(0 84.2% 95%);
  color: hsl(0 84.2% 30%);

  .alert-description {
    color: hsl(0 84.2% 35%);
  }

  .dark &,
  [data-theme="dark"] & {
    // Dark mode: darker red background with better contrast
    background-color: hsl(0 84.2% 15%);
    color: hsl(0 84.2% 85%);
    border-color: hsl(var(--destructive) / 0.6);

    .alert-description {
      color: hsl(0 84.2% 75%);
    }
  }
}

/** @public Success alert */
.alert-success {
  border-color: hsl(var(--success));
  // Light mode: light green background
  background-color: hsl(142.1 76.2% 92%);
  color: hsl(142.1 76.2% 25%);

  .alert-description {
    color: hsl(142.1 76.2% 28%);
  }

  .dark &,
  [data-theme="dark"] & {
    // Dark mode: darker green background
    background-color: hsl(142.1 76.2% 12%);
    color: hsl(142.1 76.2% 80%);
    border-color: hsl(var(--success) / 0.6);

    .alert-description {
      color: hsl(142.1 76.2% 70%);
    }
  }
}

/** @public Warning alert */
.alert-warning {
  border-color: hsl(var(--warning));
  // Light mode: light yellow/orange background
  background-color: hsl(38 92% 90%);
  color: hsl(38 92% 25%);

  .alert-description {
    color: hsl(38 92% 28%);
  }

  .dark &,
  [data-theme="dark"] & {
    // Dark mode: darker orange background
    background-color: hsl(38 92% 15%);
    color: hsl(38 92% 80%);
    border-color: hsl(var(--warning) / 0.6);

    .alert-description {
      color: hsl(38 92% 70%);
    }
  }
}

/** @public Info alert */
.alert-info {
  border-color: hsl(var(--info));
  // Light mode: light blue background
  background-color: hsl(221.2 83.2% 92%);
  color: hsl(221.2 83.2% 30%);

  .alert-description {
    color: hsl(221.2 83.2% 35%);
  }

  .dark &,
  [data-theme="dark"] & {
    // Dark mode: darker blue background
    background-color: hsl(221.2 83.2% 15%);
    color: hsl(221.2 83.2% 80%);
    border-color: hsl(var(--info) / 0.6);

    .alert-description {
      color: hsl(221.2 83.2% 70%);
    }
  }
}