$switch-bg: getCustomVar(("$switch-bg")) !default;
$switch-handle-off-bg: getCustomVar(("$switch-handle-off-bg")) !default;
$switch-on-bg: getCustomVar(("$switch-on-bg")) !default;
$switch-handle-on-bg: getCustomVar(("$switch-handle-on-bg")) !default;

@use "sass:color";
@use "../sizes" as *;
@use "../colors" as *;

// adduse
$switch-bg: null !default;
$switch-handle-off-bg: null !default;
$switch-on-bg: color.change($base-accent, $alpha: 0.5) !default;
$switch-handle-on-bg: $base-accent !default;
$switch-handle-border-radius: 50% !default;
$switch-handle-disabled-bg: null !default;
$switch-invalid-handle-bg: $base-invalid-color !default;
$switch-invalid-container-bg: color.change($base-invalid-color, $alpha: 0.5) !default;

@if $mode == "light" {
  $switch-bg: darken($base-element-bg, 38%) !default;
  $switch-handle-off-bg: darken($base-element-bg, 2%) !default;
  $switch-handle-disabled-bg: darken($base-element-bg, 26%) !default;
}

@if $mode == "dark" {
  $switch-bg: lighten($base-element-bg, 38%) !default;
  $switch-handle-off-bg: lighten($base-element-bg, 18.5%) !default;
  $switch-handle-disabled-bg: lighten($base-element-bg, 26%) !default;
}

$never-used: collector((
"$switch-bg": $switch-bg,
"$switch-handle-off-bg": $switch-handle-off-bg,
"$switch-on-bg": $switch-on-bg,
"$switch-handle-on-bg": $switch-handle-on-bg,
));