@use 'sass:map';

$default-button-dropdown-config: (
    // General Structure
    menu-radius: 4px,
    menu-border-light: 1px solid #e0e0e0,
    menu-border-dark: 1px solid #444444,
    menu-shadow-light: 0 4px 6px rgba(0, 0, 0, 0.1),
    menu-shadow-dark: 0 4px 6px rgba(0, 0, 0, 0.5),

    // Light Theme Map
    light-bg: #ffffff,
    light-item-color: #333333,
    light-item-hover-bg: #f5f5f5,

    // Dark Theme Map
    dark-bg: #1a1a1a,
    dark-item-color: #ffffff,
    dark-item-hover-bg: #2d2d2d,

    // Button Variants (For Explicit Actions)
    primary-bg: #262125,
    primary-color: #ffffff,
    primary-hover: #3d353b,

    warning-bg: #F9C80E,
    warning-color: #000000,
    warning-hover: #ebd573,

    success-bg: #16A34A,
    success-color: #ffffff,
    success-hover: #148f41,

    danger-bg: #E63E30,
    danger-color: #ffffff,
    danger-hover: #c93528,

    secondary-bg: #E8EAED,
    secondary-color: #000000,
    secondary-hover: #d1d5db,

    outline-bg: transparent,
    outline-color: #000000,
    outline-hover: rgba(0,0,0,0.05)
);

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

    --cc-btn-dropdown-radius: #{map.get($config, menu-radius)};
    --cc-btn-dropdown-border-light: #{map.get($config, menu-border-light)};
    --cc-btn-dropdown-border-dark: #{map.get($config, menu-border-dark)};
    --cc-btn-dropdown-shadow-light: #{map.get($config, menu-shadow-light)};
    --cc-btn-dropdown-shadow-dark: #{map.get($config, menu-shadow-dark)};

    --cc-btn-dropdown-light-bg: #{map.get($config, light-bg)};
    --cc-btn-dropdown-light-item-color: #{map.get($config, light-item-color)};
    --cc-btn-dropdown-light-item-hover-bg: #{map.get($config, light-item-hover-bg)};

    --cc-btn-dropdown-dark-bg: #{map.get($config, dark-bg)};
    --cc-btn-dropdown-dark-item-color: #{map.get($config, dark-item-color)};
    --cc-btn-dropdown-dark-item-hover-bg: #{map.get($config, dark-item-hover-bg)};

    --cc-btn-dropdown-primary-bg: #{map.get($config, primary-bg)};
    --cc-btn-dropdown-primary-color: #{map.get($config, primary-color)};
    --cc-btn-dropdown-primary-hover: #{map.get($config, primary-hover)};

    --cc-btn-dropdown-warning-bg: #{map.get($config, warning-bg)};
    --cc-btn-dropdown-warning-color: #{map.get($config, warning-color)};
    --cc-btn-dropdown-warning-hover: #{map.get($config, warning-hover)};

    --cc-btn-dropdown-success-bg: #{map.get($config, success-bg)};
    --cc-btn-dropdown-success-color: #{map.get($config, success-color)};
    --cc-btn-dropdown-success-hover: #{map.get($config, success-hover)};

    --cc-btn-dropdown-danger-bg: #{map.get($config, danger-bg)};
    --cc-btn-dropdown-danger-color: #{map.get($config, danger-color)};
    --cc-btn-dropdown-danger-hover: #{map.get($config, danger-hover)};

    --cc-btn-dropdown-secondary-bg: #{map.get($config, secondary-bg)};
    --cc-btn-dropdown-secondary-color: #{map.get($config, secondary-color)};
    --cc-btn-dropdown-secondary-hover: #{map.get($config, secondary-hover)};
    
    --cc-btn-dropdown-outline-bg: #{map.get($config, outline-bg)};
    --cc-btn-dropdown-outline-color: #{map.get($config, outline-color)};
    --cc-btn-dropdown-outline-hover: #{map.get($config, outline-hover)};
}