@use '../../../functions/units';

$default-variables: (
  "Selector__Label____line-height": var(--line-height--copy),
  "Selector__Label____top-offset": -.12em,
  "Selector__Label____padding-left": 1em,

  "Radio--unchecked____bg-color": transparent,
  "Radio--checked____bg-color": currentColor,

  "Radio--unchecked____border-color": rgba(var(--color--main-rgb), .2),
  "Radio--checked____border-color": currentColor,

  "Radio--unchecked____border-width": 1px,
  "Radio--checked____border-width": 1px,

  "Radio--unchecked____padding": .375em,
  "Radio--checked____padding": .1875em,

  "Radio____radius": var(--radius--circle),
  "Radio____size": units.calc-em(18),
  "Radio____transition-duration": var(--timing--hover),

  "Radio--unchecked__Icon____color": transparent,
  "Radio--checked__Icon____color": transparent,

  "Checkbox--unchecked____bg-color": transparent,
  "Checkbox--checked____bg-color": currentColor,

  "Checkbox--unchecked____border-color": rgba(var(--color--main-rgb), .2),
  "Checkbox--checked____border-color": currentColor,

  "Checkbox--unchecked____border-width": 1px,
  "Checkbox--checked____border-width": 1px,

  "Checkbox--unchecked____padding": .375em,
  "Checkbox--checked____padding": 0,

  "Checkbox____radius": var(--radius--small),
  "Checkbox____size": units.calc-em(18),
  "Checkbox____transition-duration": var(--timing--hover),

  "Checkbox--unchecked__Icon____color": transparent,
  "Checkbox--checked__Icon____color": var(--color--invert),
  "Checkbox--readonly--unchecked__Icon____color": var(--color--gray-3),
  "Checkbox--readonly--checked__Icon____color": var(--Checkbox--checked____bg-color)
);

@mixin generate-selector-theme-variables($theme-variables: ()) {
  $variables: map-merge($default-variables, $theme-variables);

  @each $name, $value in $variables {
    --#{$name}: #{$value};
  }
}