@use 'sass:map';

// Default configuration for the snackbar theme
$default-snackbar-config: (
  // Shared Layout
  font-family: ('Poppins', sans-serif),
  font-size: 14px,
  font-weight: 500,
  min-width: 300px,
  padding: 12px 16px,
  gap: 12px,
  radius: 8px,
  shadow: (0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)),
  icon-size: 20px,
  close-icon-size: 16px,
  
  // Base Colors
  bg: #ffffff,
  color: #1f2937,
  border: 1px solid transparent,

  // Success 
  success-bg: #ecfdf5,
  success-color: #065f46,
  success-border: #a7f3d0,
  success-icon-color: #10b981,

  // Error
  error-bg: #fef2f2,
  error-color: #991b1b,
  error-border: #fecaca,
  error-icon-color: #ef4444,

  // Info
  info-bg: #eff6ff,
  info-color: #1e40af,
  info-border: #bfdbfe,
  info-icon-color: #3b82f6,

  // Warning
  warning-bg: #fffbeb,
  warning-color: #92400e,
  warning-border: #fde68a,
  warning-icon-color: #f59e0b
);

// Mixin to generate CSS variables for the snackbar component
// E.g., @include cc-snackbar-theme()
@mixin snackbar-theme($user-config: ()) {
  // Merge user config with defaults
  $config: map.merge($default-snackbar-config, $user-config);

  // Structural
  --cc-sb-font-family: #{map.get($config, font-family)};
  --cc-sb-font-size: #{map.get($config, font-size)};
  --cc-sb-font-weight: #{map.get($config, font-weight)};
  --cc-sb-min-width: #{map.get($config, min-width)};
  --cc-sb-padding: #{map.get($config, padding)};
  --cc-sb-gap: #{map.get($config, gap)};
  --cc-sb-radius: #{map.get($config, radius)};
  --cc-sb-shadow: #{map.get($config, shadow)};
  --cc-sb-icon-size: #{map.get($config, icon-size)};
  --cc-sb-close-icon-size: #{map.get($config, close-icon-size)};

  // Base Defaults
  --cc-sb-bg: #{map.get($config, bg)};
  --cc-sb-color: #{map.get($config, color)};
  --cc-sb-border: #{map.get($config, border)};

  // Success
  --cc-sb-success-bg: #{map.get($config, success-bg)};
  --cc-sb-success-color: #{map.get($config, success-color)};
  --cc-sb-success-border: #{map.get($config, success-border)};
  --cc-sb-success-icon-color: #{map.get($config, success-icon-color)};

  // Error
  --cc-sb-error-bg: #{map.get($config, error-bg)};
  --cc-sb-error-color: #{map.get($config, error-color)};
  --cc-sb-error-border: #{map.get($config, error-border)};
  --cc-sb-error-icon-color: #{map.get($config, error-icon-color)};

  // Info
  --cc-sb-info-bg: #{map.get($config, info-bg)};
  --cc-sb-info-color: #{map.get($config, info-color)};
  --cc-sb-info-border: #{map.get($config, info-border)};
  --cc-sb-info-icon-color: #{map.get($config, info-icon-color)};

// Warning
  --cc-sb-warning-bg: #{map.get($config, warning-bg)};
  --cc-sb-warning-color: #{map.get($config, warning-color)};
  --cc-sb-warning-border: #{map.get($config, warning-border)};
  --cc-sb-warning-icon-color: #{map.get($config, warning-icon-color)};
}