@use 'sass:map';

$default-checkbox-config: (
    // Layout
    margin-bottom: 0.5rem,
    group-gap: 0.75rem,

    // Label
    font-size: 0.875rem,
    font-weight: 400,
    font-family: inherit,
    label-color: #202124,

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

    // Size
    size: 1.125rem,
    border-radius: 2px,

    // Colors
    checked-color: #1A73E8,
    unchecked-color: #BDC1C6,

    // States
    disabled-color: #80868B,
    error-color: #D93025,
    required-color: #D93025
);

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

    // Layout
    --cc-checkbox-margin-bottom: #{map.get($config, margin-bottom)};
    --cc-checkbox-group-gap: #{map.get($config, group-gap)};

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

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

    // Size
    --cc-checkbox-size: #{map.get($config, size)};
    --cc-checkbox-border-radius: #{map.get($config, border-radius)};

    // Colors
    --cc-checkbox-checked-color: #{map.get($config, checked-color)};
    --cc-checkbox-unchecked-color: #{map.get($config, unchecked-color)};

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