$default-variables: (
  "Range__Thumb____bg-color": var(--color--invert),
  "Range--disabled__Thumb____bg-color": var(--color--invert),

  "Range__Thumb____border": 1px solid var(--color--gray-4),
  "Range--disabled__Thumb____border": 1px solid var(--color--gray-4),

  "Range__Thumb____radius": var(--radius--circle),
  "Range__Thumb____shadow": 0 2px 4px rgba(var(--color--main-rgb), 0.08),
  "Range__Thumb____height": 1.5625em,
  "Range__Thumb____width": 1.5625em,

  "Range__Track____bg-color": rgba(var(--color--dscout-rgb), .5),
  "Range--disabled__Track____bg-color": var(--color--gray-3),
  
  "Range__Track____height": .25em,
  "Range__Track____radius": var(--radius--pill),
);

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

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