@use 'sass:map';

// Default configuration for the pagination theme
$default-pagination-config: (
  // Font & Text
  font-family: ('Roboto', sans-serif),
  text-color: #757575,
  font-size: 14px,

  // Select Dropdown
  select-bg: #f5f5f5,
  select-border: none,
  select-radius: 4px,
  select-padding: 6px 12px,
  select-text-color: #333,
  select-arrow-color: #f44336, // Red arrow

  // Buttons
  btn-size: 32px,
  btn-bg: #ffffff,
  btn-border: 1px solid #e0e0e0,
  btn-radius: 4px,
  btn-text-color: #333,
  
  // States
  btn-hover-bg: #f5f5f5,
  btn-active-bg: #fff,
  btn-active-border: 1px solid #ff4081, // Pinkish red
  btn-active-text: #ff4081,
  
  // Disabled
  disabled-opacity: 0.5,
  disabled-bg: #f9f9f9
);

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

  // Generate CSS Variables
  --cc-pagination-font-family: #{map.get($config, font-family)};
  --cc-pagination-text-color: #{map.get($config, text-color)};
  --cc-pagination-font-size: #{map.get($config, font-size)};

  --cc-pagination-select-bg: #{map.get($config, select-bg)};
  --cc-pagination-select-border: #{map.get($config, select-border)};
  --cc-pagination-select-radius: #{map.get($config, select-radius)};
  --cc-pagination-select-padding: #{map.get($config, select-padding)};
  --cc-pagination-select-text-color: #{map.get($config, select-text-color)};
  --cc-pagination-select-arrow-color: #{map.get($config, select-arrow-color)};

  --cc-pagination-btn-size: #{map.get($config, btn-size)};
  --cc-pagination-btn-bg: #{map.get($config, btn-bg)};
  --cc-pagination-btn-border: #{map.get($config, btn-border)};
  --cc-pagination-btn-radius: #{map.get($config, btn-radius)};
  --cc-pagination-btn-text-color: #{map.get($config, btn-text-color)};
  
  --cc-pagination-btn-hover-bg: #{map.get($config, btn-hover-bg)};
  --cc-pagination-btn-active-bg: #{map.get($config, btn-active-bg)};
  --cc-pagination-btn-active-border: #{map.get($config, btn-active-border)};
  --cc-pagination-btn-active-text: #{map.get($config, btn-active-text)};
  
  --cc-pagination-disabled-opacity: #{map.get($config, disabled-opacity)};
  --cc-pagination-disabled-bg: #{map.get($config, disabled-bg)};
}