@use 'sass:map';

$default-filter-sidebar-config: (
    // Layout
    width: 100%,
    padding: 1.5rem,
    gap: 1.5rem,
    bg: #FEFEFE,
    border-radius: 0,

    // Header
    header-height: 3rem,
    header-title-size: 1.125rem,
    header-title-weight: 500,
    header-title-color: #202124,

    // Footer
    footer-padding: 1rem 0 0 0,
    footer-gap: 1rem,
);

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

    --cc-filter-sidebar-width: #{map.get($config, width)};
    --cc-filter-sidebar-padding: #{map.get($config, padding)};
    --cc-filter-sidebar-gap: #{map.get($config, gap)};
    --cc-filter-sidebar-bg: #{map.get($config, bg)};
    --cc-filter-sidebar-border-radius: #{map.get($config, border-radius)};

    --cc-filter-header-height: #{map.get($config, header-height)};
    --cc-filter-header-title-size: #{map.get($config, header-title-size)};
    --cc-filter-header-title-weight: #{map.get($config, header-title-weight)};
    --cc-filter-header-title-color: #{map.get($config, header-title-color)};

    --cc-filter-footer-padding: #{map.get($config, footer-padding)};
    --cc-filter-footer-gap: #{map.get($config, footer-gap)};
}