@use 'sass:map';

$default-side-nav-config: (
  // Container & Global
  bg: #ffffff,
  border-color: rgba(0, 0, 0, 0.08),
  width: 220px,
  collapsed-width: 56px,
  gap-sections: 24px,
  padding: 16px,

  // Typographic Global
  font-family: ('Poppins', sans-serif),

  // Header Typography
  heading-font-weight: 500,
  heading-font-size: 16px,
  heading-color: #3C4043,

  // Item Defaults (Inactive)
  item-gap: 4px,
  item-padding: 12px 16px,
  item-border-radius: 8px,
  item-font-weight: 400,
  item-font-size: 14px,
  item-color: #5F6368,

  // Item Hover
  item-hover-bg: rgba(30, 30, 45, 0.08),
  item-hover-color: #1e1e2d,

  // Active Item
  active-bg: #1e1e2d,
  active-color: #ffffff,
  active-font-weight: 500,
  active-hover-bg: #2a2a3d,

  // Disable State
  disabled-opacity: 0.5,

  // Toggle Pill
  toggle-bg: #ffffff,
  toggle-border-color: rgba(0, 0, 0, 0.1),

  // Tooltip Styling
  tooltip-bg: #1e1e2d,
  tooltip-color: #FFFFFF,
  tooltip-padding: 8px 14px,
  tooltip-border-radius: 6px,
  tooltip-font-size: 12px,
  tooltip-font-weight: 500,
  tooltip-letter-spacing: 0.2px,
  tooltip-offset: 20px,
  tooltip-shadow: 0 4px 12px rgba(0, 0, 0, 0.35)
);

@mixin side-nav-theme($user-config: ()) {
  $config: map.merge($default-side-nav-config, $user-config);

  // Container
  --cc-side-nav-bg: #{map.get($config, bg)};
  --cc-side-nav-border-color: #{map.get($config, border-color)};
  --cc-side-nav-width: #{map.get($config, width)};
  --cc-side-nav-collapsed-width: #{map.get($config, collapsed-width)};
  --cc-side-nav-gap-sections: #{map.get($config, gap-sections)};
  --cc-side-nav-padding: #{map.get($config, padding)};

  // Typography Family
  --cc-side-nav-font-family: #{map.get($config, font-family)};

  // Headers
  --cc-side-nav-heading-font-weight: #{map.get($config, heading-font-weight)};
  --cc-side-nav-heading-font-size: #{map.get($config, heading-font-size)};
  --cc-side-nav-heading-color: #{map.get($config, heading-color)};

  // Items Config
  --cc-side-nav-item-gap: #{map.get($config, item-gap)};
  --cc-side-nav-item-padding: #{map.get($config, item-padding)};
  --cc-side-nav-item-border-radius: #{map.get($config, item-border-radius)};
  
  // Inactive Items
  --cc-side-nav-item-font-weight: #{map.get($config, item-font-weight)};
  --cc-side-nav-item-font-size: #{map.get($config, item-font-size)};
  --cc-side-nav-item-color: #{map.get($config, item-color)};
  --cc-side-nav-item-hover-bg: #{map.get($config, item-hover-bg)};
  --cc-side-nav-item-hover-color: #{map.get($config, item-hover-color)};

  // Active Items
  --cc-side-nav-active-bg: #{map.get($config, active-bg)};
  --cc-side-nav-active-color: #{map.get($config, active-color)};
  --cc-side-nav-active-font-weight: #{map.get($config, active-font-weight)};
  --cc-side-nav-active-hover-bg: #{map.get($config, active-hover-bg)};

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

  // Toggle Pill
  --cc-side-nav-toggle-bg: #{map.get($config, toggle-bg)};
  --cc-side-nav-toggle-border-color: #{map.get($config, toggle-border-color)};

  // Tooltip
  --cc-side-nav-tooltip-bg: #{map.get($config, tooltip-bg)};
  --cc-side-nav-tooltip-color: #{map.get($config, tooltip-color)};
  --cc-side-nav-tooltip-padding: #{map.get($config, tooltip-padding)};
  --cc-side-nav-tooltip-border-radius: #{map.get($config, tooltip-border-radius)};
  --cc-side-nav-tooltip-font-size: #{map.get($config, tooltip-font-size)};
  --cc-side-nav-tooltip-font-weight: #{map.get($config, tooltip-font-weight)};
  --cc-side-nav-tooltip-letter-spacing: #{map.get($config, tooltip-letter-spacing)};
  --cc-side-nav-tooltip-offset: #{map.get($config, tooltip-offset)};
  --cc-side-nav-tooltip-shadow: #{map.get($config, tooltip-shadow)};
}