@forward "../styles/prefix";
@forward "../styles/variables";
@use "../styles/variables" as *;

$switch-size: var(--switch-size, 30px * $hd);
$switch-font-size: var(--switch-font-size, $switch-size);
$switch-width: var(--switch-width, calc(1.8em + 4px * $hd));
$switch-height: var(--switch-height, calc(1em + 4px * $hd));
$switch-border: var(--switch-border, 0);
$switch-background-color: var(--switch-background-color, rgba(120, 120, 128, .16));
$switch-transition-duration: var(--switch-transition-duration, var(--animation-duration-base, $animation-duration-base));
$switch-node-size: var(--switch-node-size, 1em);
$switch-node-width: var(--switch-node-width, $switch-node-size);
$switch-node-height: var(--switch-node-height, $switch-node-size);
$switch-node-translate-x: translateX(var(--switch-node-translate-x, calc(#{$switch-width} - #{$switch-node-size} - #{4px * $hd})));
$switch-node-background-color: var(--switch-node-background-color, var(--white, $white));
$switch-node-box-shadow: var(--switch-node-box-shadow, #{0 3px * $hd 1px * $hd 0 rgba(0, 0, 0, 0.05)});
$switch-checked-color: var(--switch-checked-color, var(--primary-color, $primary-color));
$switch-checked-background-color: var(--switch-checked-background-color, $switch-checked-color);
$switch-loading-color: var(--switch-loading-color, var(--switch-checked-color, $switch-checked-color));
$switch-disabled-opacity: var(--switch-disabled-opacity, var(--disabled-opacity, $disabled-opacity));