@use 'sass:map';
@use 'flexy-sys-color' as *;
@use 'flexy-sys-palette' as *;
@use 'flexy-sys-ref' as *;
@use 'flexy-sys-shape' as *;

$_flexy-comp-checkbox: (
  size: 20px,
  outline-width: 2px,
  mark-color: $flexy-sys-color-on-primary,
  mark-size: 16px,
  unselected-fill-color: transparent,
  unselected-outline-color: $flexy-sys-palette-grey-70,
  unselected-hovered-outline-color: $flexy-sys-palette-grey-100,
  selected-fill-color: $flexy-sys-color-primary,
  selected-outline-color: $flexy-sys-color-primary,
  state-transition-duration: 150ms,
  state-transition-easing: ease-out,
);

$flexy-comp-checkbox: ();

@each $name, $value in $_flexy-comp-checkbox {
  @if not $flexy-sys-ref-hardcode-values {
    $value: var(--flexy-comp-checkbox-#{$name}, #{$value});
  }
  $flexy-comp-checkbox: map.set($flexy-comp-checkbox, $name, $value);
}