@use 'sass:map';

$default-toggle-config: (
    // Label
    font-size: 0.875rem,
    font-weight: 400,
    font-family: inherit,
    label-color: #202124,

    // Size
    width: 2.25rem,
    height: 1rem,

    // Colors
    track-color: #BDC1C6,
    thumb-color: #FEFEFE,
    checked-track-color: #1A73E8,
    checked-thumb-color: #FEFEFE,

    // States
    disabled-color: #80868B
);

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

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

    // Size
    --cc-toggle-width: #{map.get($config, width)};
    --cc-toggle-height: #{map.get($config, height)};

    // Colors
    --cc-toggle-track-color: #{map.get($config, track-color)};
    --cc-toggle-thumb-color: #{map.get($config, thumb-color)};
    --cc-toggle-checked-track-color: #{map.get($config, checked-track-color)};
    --cc-toggle-checked-thumb-color: #{map.get($config, checked-thumb-color)};

    // States
    --cc-toggle-disabled-color: #{map.get($config, disabled-color)};
}