@use 'sass:map';

$default-radio-config: (
    // Layout
    label-gap: 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.25rem,

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

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

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

    // Layout
    --cc-radio-label-gap: #{map.get($config, label-gap)};
    --cc-radio-group-gap: #{map.get($config, group-gap)};

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

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

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

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

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