/* Theme Integration Mixins for UI Library */

/**
 * Mixin that generates CSS variables for UI library components
 * This mixin should be called by the main application to provide colors for the UI library
 * The UI library uses only --ui-* variables with hardcoded fallbacks for portability
 * 
 * @param $primary - Primary color for the theme
 * @param $secondary - Secondary color for the theme  
 * @param $background - Background color for the theme
 * @param $text - Text color for the theme
 * @param $border - Border color for the theme
 * @param $hover - Hover state color for the theme
 */
@mixin ui-theme-variables(
  $primary: #2c3e50,
  $secondary: #666666,
  $background: #343a40,
  $text: #ffffff,
  $border: #d0d0d0,
  $hover: rgba(255, 255, 255, 0.1)
) {
  /* UI Library specific CSS variables - only these should be used in UI components */
  --ui-color-primary: #{$primary};
  --ui-color-secondary: #{$secondary};
  --ui-color-background: #{$background};
  --ui-color-text: #{$text};
  --ui-color-border: #{$border};
  --ui-color-hover: #{$hover};
  
  /* Derived colors for specific UI components */
  --ui-color-menu-bg: #{$background};
  --ui-color-menu-text: #{$text};
  --ui-color-menu-hover: #{$hover};
  --ui-color-menu-active: color-mix(in srgb, #{$background} 80%, black 20%);
  --ui-color-menu-border: #{$border};
  
  --ui-color-content-bg: color-mix(in srgb, #{$background} 95%, white 5%);
  --ui-color-content-text: #{$text};
  
  --ui-color-icon-primary: #{$primary};
  --ui-color-icon-secondary: #{$secondary};
  --ui-color-icon-muted: color-mix(in srgb, #{$text} 60%, transparent 40%);
}

/**
 * Mixin that applies theme-aware styles to menu components
 */
@mixin ui-menu-theme() {
  background: var(--ui-color-menu-bg);
  color: var(--ui-color-menu-text);
  border-right: 1px solid var(--ui-color-menu-border);
  
  &.active {
    background: var(--ui-color-menu-active);
  }
  
  &.focus,
  &:active,
  &:hover {
    background: var(--ui-color-menu-hover);
  }
}

/**
 * Mixin that applies theme-aware styles to content components
 */
@mixin ui-content-theme() {
  background: var(--ui-color-content-bg);
  color: var(--ui-color-content-text);
}

/**
 * Mixin that applies theme-aware styles to icon components
 */
@mixin ui-icon-theme($variant: 'primary') {
  @if $variant == 'primary' {
    color: var(--ui-color-icon-primary);
  } @else if $variant == 'secondary' {
    color: var(--ui-color-icon-secondary);
  } @else if $variant == 'muted' {
    color: var(--ui-color-icon-muted);
  }
}