@use 'sass:map';

// Default configuration for the nav theme
$default-nav-config: (
  // Container
  container-bg: #f5f5f5,
  container-padding: 4px,
  container-radius: 6px,
  container-border: none,
  container-gap: 4px,

  // Item - Font & Text
  font-family: ('Roboto', sans-serif),
  font-size: 14px,
  font-weight: 500,
  item-color: #666666,
  item-bg: transparent,
  item-padding: 8px 16px,
  item-radius: 4px,
  item-border: none,

  // Item - Active State
  item-active-bg: #ffffff,
  item-active-color: #1a1a1a,
  item-active-font-weight: 600,
  item-active-border-color: transparent,
  item-active-border-width: 2px,
  item-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.1),

  // Item - Hover State
  item-hover-bg: #eeeeee,
  item-hover-color: #333333,

  // Item - Disabled State
  disabled-opacity: 0.5,

  // Badge
  badge-bg: #e74c3c,
  badge-color: #ffffff,
  badge-size: 18px,
  badge-font-size: 10px
);

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

  // Container
  --cc-nav-container-bg: #{map.get($config, container-bg)};
  --cc-nav-container-padding: #{map.get($config, container-padding)};
  --cc-nav-container-radius: #{map.get($config, container-radius)};
  --cc-nav-container-border: #{map.get($config, container-border)};
  --cc-nav-container-gap: #{map.get($config, container-gap)};

  // Item - Font & Text
  --cc-nav-font-family: #{map.get($config, font-family)};
  --cc-nav-font-size: #{map.get($config, font-size)};
  --cc-nav-font-weight: #{map.get($config, font-weight)};
  --cc-nav-item-color: #{map.get($config, item-color)};
  --cc-nav-item-bg: #{map.get($config, item-bg)};
  --cc-nav-item-padding: #{map.get($config, item-padding)};
  --cc-nav-item-radius: #{map.get($config, item-radius)};
  --cc-nav-item-border: #{map.get($config, item-border)};

  // Item - Active State
  --cc-nav-item-active-bg: #{map.get($config, item-active-bg)};
  --cc-nav-item-active-color: #{map.get($config, item-active-color)};
  --cc-nav-item-active-font-weight: #{map.get($config, item-active-font-weight)};
  --cc-nav-item-active-border-color: #{map.get($config, item-active-border-color)};
  --cc-nav-item-active-border-width: #{map.get($config, item-active-border-width)};
  --cc-nav-item-active-shadow: #{map.get($config, item-active-shadow)};

  // Item - Hover State
  --cc-nav-item-hover-bg: #{map.get($config, item-hover-bg)};
  --cc-nav-item-hover-color: #{map.get($config, item-hover-color)};

  // Item - Disabled State
  --cc-nav-disabled-opacity: #{map.get($config, disabled-opacity)};

  // Badge
  --cc-nav-badge-bg: #{map.get($config, badge-bg)};
  --cc-nav-badge-color: #{map.get($config, badge-color)};
  --cc-nav-badge-size: #{map.get($config, badge-size)};
  --cc-nav-badge-font-size: #{map.get($config, badge-font-size)};
}