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

$default-variables: (
  "Toggle__Switch____height": 1em,
  "Toggle__Switch____width": 1em,
  "Toggle__Switch____radius": var(--radius--pill),
  "Toggle__Switch____transition-duration": var(--timing--click),
  "Toggle__Switch____top": calc((var(--Toggle__Track____height) - var(--Toggle__Switch____height)) / 2),
  "Toggle__Switch____left": var(--Toggle__Switch____top),

  "Toggle--unchecked__Switch____shadow": none,
  "Toggle--unchecked__Switch____bg-color": var(--color--invert),

  "Toggle--checked__Switch____shadow": none,
  "Toggle--checked__Switch____bg-color": var(--color--invert),

  "Toggle__Track____height": units.calc-em(18),
  "Toggle__Track____width": 2em,
  "Toggle__Track____radius": var(--radius--pill),
  "Toggle__Track____shadow": none,
  "Toggle__Track____transition-duration": var(--timing--click),

  "Toggle--unchecked__Track____bg-color": var(--color--gray-3),
  "Toggle--unchecked__Track____fill-width": var(--Toggle__Track____width),
  
  "Toggle--checked__Track____bg-color": rgba(var(--color--dscout-rgb), 1),
  "Toggle--checked__Track____fill-width": var(--Toggle__Track____width),
);

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

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