// must all be same units--start
$toggle-switch-bar-padding: 4px !default; // space between button and bar, can be negative value
$toggle-switch-bar-padding-mobile: 4px !default;

$toggle-switch-button-width: 16px !default; // 24px
$toggle-switch-button-width-mobile: 16px !default; // 16px

$toggle-switch-bar-height: ($toggle-switch-bar-padding * 2) +
	$toggle-switch-button-width !default;
$toggle-switch-bar-height-mobile: ($toggle-switch-bar-padding-mobile * 2) +
	$toggle-switch-button-width-mobile !default;

$toggle-switch-bar-width: 48px !default; // width of switch bar
$toggle-switch-bar-width-mobile: 40px !default; // width of switch bar
// must all be same units--end

$toggle-switch-bar-bg: $gray-500 !default;
$toggle-switch-bar-border-color: $toggle-switch-bar-bg !default;
$toggle-switch-bar-border-radius: 20px !default;
$toggle-switch-bar-border-width: 1px !default;
$toggle-switch-bar-font-size: 0.625rem !default;
$toggle-switch-bar-font-size-mobile: 0.625rem !default;
$toggle-switch-bar-icon-color: $white !default;
$toggle-switch-bar-focus-box-shadow: $component-focus-box-shadow !default;

$toggle-switch-button-bg: $white !default;
$toggle-switch-button-border-color: $toggle-switch-button-bg !default;
$toggle-switch-button-border-radius: 50% !default;
$toggle-switch-button-border-width: 1px !default;
$toggle-switch-button-font-size: $toggle-switch-bar-font-size !default; // 12px
$toggle-switch-button-font-size-mobile: $toggle-switch-bar-font-size-mobile !default; // 10px
$toggle-switch-button-icon-color: $gray-900 !default;

// Toggle Switch On
$toggle-switch-bar-on-bg: $component-active-bg !default;
$toggle-switch-bar-on-border-color: $toggle-switch-bar-on-bg !default;
$toggle-switch-bar-on-icon-color: $white !default;

$toggle-switch-button-on-bg: $white !default;
$toggle-switch-button-on-border-color: $white !default;
$toggle-switch-button-on-border-radius: $toggle-switch-button-border-radius !default;
$toggle-switch-button-on-icon-color: $primary !default;

// .toggle-switch-sm

$toggle-switch-sizes: () !default;
$toggle-switch-sizes: map-deep-merge(
	(
		toggle-switch-sm: (
			toggle-switch-check: (
				toggle-switch-bar: (
					after: (
						bottom: 0,
						height: 12px,
						left: 2px,
						top: 2px,
						width: 12px,
					),
					toggle-switch-icon: (
						font-size: 0.5rem,
						top: 0px,
					),
					toggle-switch-icon-off: (
						left: 13px,
					),
				),
				checked: (
					toggle-switch-bar: (
						after: (
							left: 16px,
						),
						button-icon: (
							left: 14px,
						),
					),
				),
			),
		),
	),
	$toggle-switch-sizes
);