@use 'sass:map';

$default-dropdown-config: (
    // Layout
    height: 2.5rem,
    padding: 0.375rem 1rem,
    label-gap: 0.5rem,

    // Borders
    border-radius: 0.4375rem,
    border-color: #BDC1C6,
    border-width: 1px,

    // Colors
    bg: #FEFEFE,
    color: #202124,
    placeholder-color: #80868B,

    // Typography
    font-size: 0.875rem,
    font-weight: 400,
    font-family: inherit,

    // Label
    label-font-size: 0.875rem,
    label-font-weight: 500,
    label-color: #202124,

    // States
    focus-border-color: #1A73E8,
    error-color: #D93025,
    disabled-bg: #F1F3F4,
    disabled-color: #80868B,
    required-color: #D93025,

    // Search
    divider-color: #E0E0E0,
    search-border-color: #BDC1C6,
    search-border-radius: 0.25rem,
    search-font-size: 0.875rem,
    search-focus-color: #1A73E8,

    // Dropdown arrow
    arrow-color: #5F6368
);

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

    // Layout
    --cc-dropdown-height: #{map.get($config, height)};
    --cc-dropdown-padding: #{map.get($config, padding)};
    --cc-dropdown-label-gap: #{map.get($config, label-gap)};

    // Borders
    --cc-dropdown-border-radius: #{map.get($config, border-radius)};
    --cc-dropdown-border-color: #{map.get($config, border-color)};
    --cc-dropdown-border-width: #{map.get($config, border-width)};

    // Colors
    --cc-dropdown-bg: #{map.get($config, bg)};
    --cc-dropdown-color: #{map.get($config, color)};
    --cc-dropdown-placeholder-color: #{map.get($config, placeholder-color)};

    // Typography
    --cc-dropdown-font-size: #{map.get($config, font-size)};
    --cc-dropdown-font-weight: #{map.get($config, font-weight)};
    --cc-dropdown-font-family: #{map.get($config, font-family)};

    // Label
    --cc-dropdown-label-font-size: #{map.get($config, label-font-size)};
    --cc-dropdown-label-font-weight: #{map.get($config, label-font-weight)};
    --cc-dropdown-label-color: #{map.get($config, label-color)};

    // States
    --cc-dropdown-focus-border-color: #{map.get($config, focus-border-color)};
    --cc-dropdown-error-color: #{map.get($config, error-color)};
    --cc-dropdown-disabled-bg: #{map.get($config, disabled-bg)};
    --cc-dropdown-disabled-color: #{map.get($config, disabled-color)};
    --cc-dropdown-required-color: #{map.get($config, required-color)};

    // Search
    --cc-dropdown-divider-color: #{map.get($config, divider-color)};
    --cc-dropdown-search-border-color: #{map.get($config, search-border-color)};
    --cc-dropdown-search-border-radius: #{map.get($config, search-border-radius)};
    --cc-dropdown-search-font-size: #{map.get($config, search-font-size)};
    --cc-dropdown-search-focus-color: #{map.get($config, search-focus-color)};

    // Arrow
    --cc-dropdown-arrow-color: #{map.get($config, arrow-color)};
}