@clayui/css 3.161.0 → 3.163.0

package/src/scss/atlas-custom-properties/variables/_toggle-switch.scss

@@ -1,438 +1,488 @@
-@if ($enable-atlas-custom-properties) {
-	$toggle-switch-cursor: $link-cursor;
-	$toggle-switch-font-weight: var(
-		--toggle-switch-font-weight,
-		$input-label-font-weight
-	);
-	$toggle-switch-transition:
-		background-color 100ms ease-in,
-		border-color 100ms ease-in,
-		box-shadow 150ms ease-in-out,
-		color 100ms ease-in,
-		left 100ms ease-in,
-		opacity 100ms ease-in,
-		right 100ms ease-in;
-
-	// must all be same units--start
-	$toggle-switch-bar-padding: var(--toggle-switch-bar-padding, 4px);
-	$toggle-switch-button-width: var(--toggle-switch-button-width, 16px);
-
-	$toggle-switch-bar-padding-mobile: var(
-		--toggle-switch-bar-padding-mobile,
-		4px
-	);
-	$toggle-switch-button-width-mobile: var(
-		--toggle-switch-button-width-mobile,
-		16px
-	);
-
-	$toggle-switch-bar-height: calc(
-		#{$toggle-switch-bar-padding} * 2 + #{$toggle-switch-button-width}
-	);
-
-	$toggle-switch-bar-height-mobile: calc(
-		#{$toggle-switch-bar-padding-mobile} *
-			2 +
-			#{$toggle-switch-button-width-mobile}
-	);
-
-	$toggle-switch-bar-width: var(--toggle-switch-bar-width, 48px);
-
-	$toggle-switch-bar-width-mobile: var(
-		--toggle-switch-bar-width-mobile,
-		40px
-	);
-	// must all be same units--end
-
-	$toggle-switch-bar-bg: var(--toggle-switch-bar-background-color, $gray-500);
-	$toggle-switch-bar-border-color: var(
-		--toggle-switch-bar-border-color,
-		$toggle-switch-bar-bg
-	);
-	$toggle-switch-bar-border-radius: var(
-		--toggle-switch-bar-border-radius,
-		20px
-	);
-	$toggle-switch-bar-border-width: var(--toggle-switch-bar-border-width, 1px);
-	$toggle-switch-bar-font-size: var(--toggle-switch-bar-font-size, 10px);
-	$toggle-switch-bar-icon-color: var(--toggle-switch-bar-icon-color, $white);
-
-	$toggle-switch-bar-focus-box-shadow: $custom-control-indicator-focus-box-shadow;
-
-	$toggle-switch-button-bg: var(
-		--toggle-switch-button-background-color,
-		$white
-	);
-	$toggle-switch-button-border-color: var(
-		--toggle-switch-button-border-color,
-		$toggle-switch-button-bg
-	);
-	$toggle-switch-button-border-radius: var(
-		--toggle-switch-button-border-radius,
-		50%
-	);
-	$toggle-switch-button-border-width: var(
-		--toggle-switch-button-border-width,
-		1px
-	);
-	$toggle-switch-button-font-size: var(
-		--toggle-switch-button-font-size,
-		$toggle-switch-bar-font-size
-	);
-	$toggle-switch-button-icon-color: var(
-		--toggle-switch-button-icon-color,
-		$gray-900
-	);
-
-	$toggle-switch-bar-font-size-mobile: var(
-		--toggle-switch-bar-font-size-mobile,
-		10px
-	);
-
-	$toggle-switch-button-font-size-mobile: var(
-		--toggle-switch-button-font-size-mobile,
-		$toggle-switch-bar-font-size-mobile
-	);
-
-	// Toggle Switch On
-
-	$toggle-switch-bar-on-bg: var(
-		--toggle-switch-bar-on-background-color,
-		$component-active-bg
-	);
-	$toggle-switch-bar-on-border-color: var(
-		--toggle-switch-bar-on-border-color,
-		$toggle-switch-bar-on-bg
-	);
-	$toggle-switch-bar-on-icon-color: var(
-		--toggle-switch-bar-on-icon-color,
-		$white
-	);
-
-	$toggle-switch-button-on-bg: var(
-		--toggle-switch-button-on-background-color,
-		$white
-	);
-	$toggle-switch-button-on-border-color: var(
-		--toggle-switch-button-on-border-color,
-		$white
-	);
-	$toggle-switch-button-on-border-radius: var(
-		--toggle-switch-button-on-border-radius,
-		$toggle-switch-button-border-radius
-	);
-	$toggle-switch-button-on-icon-color: var(
-		--toggle-switch-button-on-icon-color,
-		$primary
-	);
-
-	// Toggle Switch Disabled
-
-	$toggle-switch-disabled-cursor: $disabled-cursor;
-	$toggle-switch-disabled-opacity: var(--toggle-switch-disabled-opacity, 0.4);
-
-	// Toggle Switch Label
-
-	$toggle-switch-label-disabled-color: var(
-		--toggle-switch-label-disabled-color,
-		$input-label-disabled-color
-	);
-
-	// Toggle Switch Text
-
-	$toggle-switch-text-font-size: var(--toggle-switch-text-font-size, 12px);
-
-	$toggle-switch-text-disabled-color: var(
-		--toggle-switch-text-disabled-color,
-		$input-label-disabled-color
-	);
-
-	// .toggle-switch
-
-	$toggle-switch: ();
-	$toggle-switch: map-deep-merge(
-		(
-			breakpoint-down: sm,
-			cursor: $toggle-switch-cursor,
-			display: inline-block,
-			font-weight: $toggle-switch-font-weight,
-			max-width: 100%,
-			position: relative,
+$toggle-switch-cursor: $link-cursor !default;
+$toggle-switch-font-weight: var(
+	--toggle-switch-font-weight,
+	$input-label-font-weight
+) !default;
+$toggle-switch-transition:
+	background-color 100ms ease-in,
+	border-color 100ms ease-in,
+	box-shadow 150ms ease-in-out,
+	color 100ms ease-in,
+	left 100ms ease-in,
+	opacity 100ms ease-in,
+	right 100ms ease-in !default;
+
+// must all be same units--start
+$toggle-switch-bar-padding: var(--toggle-switch-bar-padding, 4px) !default;
+$toggle-switch-button-width: var(--toggle-switch-button-width, 16px) !default;
+
+$toggle-switch-bar-padding-mobile: var(
+	--toggle-switch-bar-padding-mobile,
+	4px
+) !default;
+$toggle-switch-button-width-mobile: var(
+	--toggle-switch-button-width-mobile,
+	16px
+) !default;
+
+$toggle-switch-bar-height: calc(
+	#{$toggle-switch-bar-padding} * 2 + #{$toggle-switch-button-width}
+) !default;
+
+$toggle-switch-bar-height-mobile: calc(
+	#{$toggle-switch-bar-padding-mobile} * 2 + #{$toggle-switch-button-width-mobile}
+) !default;
+
+$toggle-switch-bar-width: var(--toggle-switch-bar-width, 48px) !default;
+
+$toggle-switch-bar-width-mobile: var(
+	--toggle-switch-bar-width-mobile,
+	40px
+) !default;
+// must all be same units--end
+
+$toggle-switch-bar-bg: var(
+	--toggle-switch-bar-background-color,
+	$gray-500
+) !default;
+$toggle-switch-bar-border-color: var(
+	--toggle-switch-bar-border-color,
+	$toggle-switch-bar-bg
+) !default;
+$toggle-switch-bar-border-radius: var(
+	--toggle-switch-bar-border-radius,
+	20px
+) !default;
+$toggle-switch-bar-border-width: var(
+	--toggle-switch-bar-border-width,
+	1px
+) !default;
+$toggle-switch-bar-font-size: var(--toggle-switch-bar-font-size, 10px) !default;
+$toggle-switch-bar-icon-color: var(
+	--toggle-switch-bar-icon-color,
+	$white
+) !default;
+
+$toggle-switch-bar-focus-box-shadow: $custom-control-indicator-focus-box-shadow !default;
+
+$toggle-switch-button-bg: var(
+	--toggle-switch-button-background-color,
+	$white
+) !default;
+$toggle-switch-button-border-color: var(
+	--toggle-switch-button-border-color,
+	$toggle-switch-button-bg
+) !default;
+$toggle-switch-button-border-radius: var(
+	--toggle-switch-button-border-radius,
+	50%
+) !default;
+$toggle-switch-button-border-width: var(
+	--toggle-switch-button-border-width,
+	1px
+) !default;
+$toggle-switch-button-font-size: var(
+	--toggle-switch-button-font-size,
+	$toggle-switch-bar-font-size
+) !default;
+$toggle-switch-button-icon-color: var(
+	--toggle-switch-button-icon-color,
+	$gray-900
+) !default;
+
+$toggle-switch-bar-font-size-mobile: var(
+	--toggle-switch-bar-font-size-mobile,
+	10px
+) !default;
+
+$toggle-switch-button-font-size-mobile: var(
+	--toggle-switch-button-font-size-mobile,
+	$toggle-switch-bar-font-size-mobile
+) !default;
+
+// Toggle Switch On
+
+$toggle-switch-bar-on-bg: var(
+	--toggle-switch-bar-on-background-color,
+	$component-active-bg
+) !default;
+$toggle-switch-bar-on-border-color: var(
+	--toggle-switch-bar-on-border-color,
+	$toggle-switch-bar-on-bg
+) !default;
+$toggle-switch-bar-on-icon-color: var(
+	--toggle-switch-bar-on-icon-color,
+	$white
+) !default;
+
+$toggle-switch-button-on-bg: var(
+	--toggle-switch-button-on-background-color,
+	$white
+) !default;
+$toggle-switch-button-on-border-color: var(
+	--toggle-switch-button-on-border-color,
+	$white
+) !default;
+$toggle-switch-button-on-border-radius: var(
+	--toggle-switch-button-on-border-radius,
+	$toggle-switch-button-border-radius
+) !default;
+$toggle-switch-button-on-icon-color: var(
+	--toggle-switch-button-on-icon-color,
+	$primary
+) !default;
+
+// Toggle Switch Disabled
+
+$toggle-switch-disabled-cursor: $disabled-cursor !default;
+$toggle-switch-disabled-opacity: var(
+	--toggle-switch-disabled-opacity,
+	0.4
+) !default;
+
+// Toggle Switch Label
+
+$toggle-switch-label-disabled-color: var(
+	--toggle-switch-label-disabled-color,
+	$input-label-disabled-color
+) !default;
+
+// Toggle Switch Text
+
+$toggle-switch-text-font-size: var(
+	--toggle-switch-text-font-size,
+	12px
+) !default;
+
+$toggle-switch-text-disabled-color: var(
+	--toggle-switch-text-disabled-color,
+	$input-label-disabled-color
+) !default;
+
+// .toggle-switch
+
+$toggle-switch: () !default;
+$toggle-switch: map-deep-merge(
+	(
+		breakpoint-down: sm,
+		cursor: $toggle-switch-cursor,
+		display: inline-block,
+		font-weight: $toggle-switch-font-weight,
+		max-width: 100%,
+		position: relative,
+
+		disabled: (
+			cursor: $toggle-switch-disabled-cursor,
 
-			disabled: (
+			toggle-switch-label: (
+				color: $toggle-switch-label-disabled-color,
 				cursor: $toggle-switch-disabled-cursor,
+			),
 
-				toggle-switch-label: (
-					color: $toggle-switch-label-disabled-color,
-					cursor: $toggle-switch-disabled-cursor,
-				),
-
-				toggle-switch-text: (
-					color: $toggle-switch-text-disabled-color,
-				),
+			toggle-switch-text: (
+				color: $toggle-switch-text-disabled-color,
 			),
 		),
-		$toggle-switch
-	);
+	),
+	$toggle-switch
+);
+
+// .toggle-switch-check-bar
+
+$toggle-switch-check-bar: () !default;
+$toggle-switch-check-bar: map-merge(
+	(
+		display: inline-flex,
+		position: relative,
+	),
+	$toggle-switch-check-bar
+);
+
+// .toggle-switch-bar
+
+$toggle-switch-bar: () !default;
+$toggle-switch-bar: map-deep-merge(
+	(
+		toggle-switch-handle: (
+			display: block,
+			min-width: $toggle-switch-bar-width,
+			text-transform: uppercase,
+		),
+
+		toggle-switch-icon: (
+			font-size: $toggle-switch-bar-font-size,
 
-	// .toggle-switch-check-bar
+			lexicon-icon: (
+				margin-top: -0.2em,
+			),
+		),
 
-	$toggle-switch-check-bar: ();
-	$toggle-switch-check-bar: map-merge(
-		(
+		button-icon: (
+			font-size: $toggle-switch-button-font-size,
+		),
+	),
+	$toggle-switch-bar
+);
+
+// .toggle-switch-check
+
+$toggle-switch-check: () !default;
+$toggle-switch-check: map-deep-merge(
+	(
+		breakpoint-down: sm,
+
+		bottom: 0,
+		font-size: var(--togle-switch-check-font-size, 62.5%),
+		height: var(--togle-switch-check-height, $toggle-switch-bar-height),
+		opacity: 0,
+		position: absolute,
+		width: var(--togle-switch-check-width, $toggle-switch-bar-width),
+		z-index: 2,
+
+		toggle-switch-bar: (
 			display: inline-flex,
+			font-size: $toggle-switch-bar-font-size,
+			height: $toggle-switch-bar-height,
+			line-height: $toggle-switch-bar-height,
 			position: relative,
-		),
-		$toggle-switch-check-bar
-	);
+			text-indent: 0,
+			user-select: none,
+
+			before: (
+				background-color: $toggle-switch-bar-bg,
+				border-color: $toggle-switch-bar-border-color,
+				border-radius:
+					clay-enable-rounded($toggle-switch-bar-border-radius),
+				border-style: solid,
+				border-width: $toggle-switch-bar-border-width,
+				bottom: 0,
+				content: ' ',
+				display: block,
+				left: 0,
+				position: absolute,
+				top: 0,
+				transition: $toggle-switch-transition,
+				width: $toggle-switch-bar-width,
+			),
 
-	// .toggle-switch-bar
+			after: (
+				background-color: $toggle-switch-button-bg,
+				border-color: $toggle-switch-button-border-color,
+				border-radius:
+					clay-enable-rounded($toggle-switch-button-border-radius),
+				border-style: solid,
+				border-width: $toggle-switch-button-border-width,
+				bottom: $toggle-switch-bar-padding,
+				content: '',
+				display: block,
+				height: $toggle-switch-button-width,
+				left: $toggle-switch-bar-padding,
+				position: absolute,
+				top: $toggle-switch-bar-padding,
+				transition: $toggle-switch-transition,
+				width: $toggle-switch-button-width,
+			),
 
-	$toggle-switch-bar: ();
-	$toggle-switch-bar: map-deep-merge(
-		(
 			toggle-switch-handle: (
-				display: block,
-				min-width: $toggle-switch-bar-width,
-				text-transform: uppercase,
+				before: (
+					transition: $toggle-switch-transition,
+				),
+
+				after: (
+					content: attr(data-label-off),
+					margin-left:
+						clay-data-label-text-position(
+							$toggle-switch-bar-width,
+							$toggle-switch-bar-padding
+						),
+					transition: $toggle-switch-transition,
+					white-space: nowrap,
+				),
 			),
 
 			toggle-switch-icon: (
-				font-size: $toggle-switch-bar-font-size,
+				color: $toggle-switch-bar-icon-color,
+				left: $toggle-switch-bar-padding,
+				line-height: $toggle-switch-button-width,
+				position: absolute,
+				text-align: center,
+				text-indent: 0,
+				top: $toggle-switch-bar-padding,
+				transition: $toggle-switch-transition,
+				width: $toggle-switch-button-width,
+				z-index: 1,
+			),
 
-				lexicon-icon: (
-					margin-top: -0.2em,
-				),
+			toggle-switch-icon-on: (
+				left: $toggle-switch-bar-padding,
+				opacity: 0,
 			),
 
-			button-icon: (
-				font-size: $toggle-switch-button-font-size,
+			toggle-switch-icon-off: (
+				left:
+					calc(
+						#{$toggle-switch-bar-width} - #{$toggle-switch-bar-padding} -
+							#{$toggle-switch-button-width}
+					),
 			),
-		),
-		$toggle-switch-bar
-	);
 
-	// .toggle-switch-check
+			button-icon: (
+				color: $toggle-switch-button-icon-color,
+			),
 
-	$toggle-switch-check: ();
-	$toggle-switch-check: map-deep-merge(
-		(
-			breakpoint-down: sm,
+			button-icon-on: (
+				opacity: 0,
+			),
+		),
 
-			bottom: 0,
-			font-size: var(--togle-switch-check-font-size, 62.5%),
-			height: var(--togle-switch-check-height, $toggle-switch-bar-height),
-			opacity: 0,
-			position: absolute,
-			width: var(--togle-switch-check-width, $toggle-switch-bar-width),
-			z-index: 2,
+		focus: (
+			toggle-switch-bar: (
+				before: (
+					box-shadow: $toggle-switch-bar-focus-box-shadow,
+				),
+			),
+		),
 
+		disabled: (
 			toggle-switch-bar: (
-				display: inline-flex,
-				font-size: $toggle-switch-bar-font-size,
-				height: $toggle-switch-bar-height,
-				line-height: $toggle-switch-bar-height,
-				position: relative,
-				text-indent: 0,
-				user-select: none,
+				cursor: $toggle-switch-disabled-cursor,
+				opacity: $toggle-switch-disabled-opacity,
+			),
+		),
 
+		checked: (
+			toggle-switch-bar: (
 				before: (
-					background-color: $toggle-switch-bar-bg,
-					border-color: $toggle-switch-bar-border-color,
+					background-color: $toggle-switch-bar-on-bg,
+					border-color: $toggle-switch-bar-on-border-color,
 					border-radius:
 						clay-enable-rounded($toggle-switch-bar-border-radius),
 					border-style: solid,
 					border-width: $toggle-switch-bar-border-width,
-					bottom: 0,
-					content: ' ',
-					display: block,
-					left: 0,
-					position: absolute,
-					top: 0,
-					transition: $toggle-switch-transition,
-					width: $toggle-switch-bar-width,
 				),
 
 				after: (
-					background-color: $toggle-switch-button-bg,
-					border-color: $toggle-switch-button-border-color,
+					background-color: $toggle-switch-button-on-bg,
+					border-color: $toggle-switch-button-on-border-color,
 					border-radius:
 						clay-enable-rounded(
-							$toggle-switch-button-border-radius
+							$toggle-switch-button-on-border-radius
 						),
 					border-style: solid,
 					border-width: $toggle-switch-button-border-width,
-					bottom: $toggle-switch-bar-padding,
-					content: '',
-					display: block,
-					height: $toggle-switch-button-width,
-					left: $toggle-switch-bar-padding,
-					position: absolute,
-					top: $toggle-switch-bar-padding,
-					transition: $toggle-switch-transition,
-					width: $toggle-switch-button-width,
+					left:
+						calc(
+							#{$toggle-switch-bar-width} - #{$toggle-switch-bar-padding} -
+								#{$toggle-switch-button-width}
+						),
 				),
 
 				toggle-switch-handle: (
-					before: (
-						transition: $toggle-switch-transition,
-					),
-
 					after: (
-						content: attr(data-label-off),
-						margin-left:
-							clay-data-label-text-position(
-								$toggle-switch-bar-width,
-								$toggle-switch-bar-padding
-							),
-						transition: $toggle-switch-transition,
-						white-space: nowrap,
+						content: attr(data-label-on),
 					),
 				),
 
 				toggle-switch-icon: (
-					color: $toggle-switch-bar-icon-color,
-					left: $toggle-switch-bar-padding,
-					line-height: $toggle-switch-button-width,
-					position: absolute,
-					text-align: center,
-					text-indent: 0,
-					top: $toggle-switch-bar-padding,
-					transition: $toggle-switch-transition,
-					width: $toggle-switch-button-width,
-					z-index: 1,
+					color: $toggle-switch-bar-on-icon-color,
 				),
 
 				toggle-switch-icon-on: (
-					left: $toggle-switch-bar-padding,
-					opacity: 0,
+					opacity: 1,
 				),
 
 				toggle-switch-icon-off: (
+					opacity: 0,
+				),
+
+				button-icon: (
+					color: $toggle-switch-button-on-icon-color,
 					left:
 						calc(
-							#{$toggle-switch-bar-width} -
-								#{$toggle-switch-bar-padding} -
+							#{$toggle-switch-bar-width} - #{$toggle-switch-bar-padding} -
 								#{$toggle-switch-button-width}
 						),
 				),
 
-				button-icon: (
-					color: $toggle-switch-button-icon-color,
+				button-icon-on: (
+					opacity: 1,
 				),
 
-				button-icon-on: (
+				button-icon-off: (
 					opacity: 0,
 				),
 			),
+		),
 
-			focus: (
-				toggle-switch-bar: (
-					before: (
-						box-shadow: $toggle-switch-bar-focus-box-shadow,
-					),
+		mobile: (
+			height: $toggle-switch-bar-height-mobile,
+			width: $toggle-switch-bar-width-mobile,
+
+			toggle-switch-bar: (
+				height: $toggle-switch-bar-height-mobile,
+				line-height: $toggle-switch-bar-height-mobile,
+				text-indent: 0,
+
+				before: (
+					width: $toggle-switch-bar-width-mobile,
 				),
-			),
 
-			disabled: (
-				toggle-switch-bar: (
-					cursor: $toggle-switch-disabled-cursor,
-					opacity: $toggle-switch-disabled-opacity,
+				after: (
+					bottom: $toggle-switch-bar-padding-mobile,
+					height: $toggle-switch-button-width-mobile,
+					left: $toggle-switch-bar-padding-mobile,
+					top: $toggle-switch-bar-padding-mobile,
+					width: $toggle-switch-button-width-mobile,
 				),
-			),
 
-			checked: (
-				toggle-switch-bar: (
-					before: (
-						background-color: $toggle-switch-bar-on-bg,
-						border-color: $toggle-switch-bar-on-border-color,
-						border-radius:
-							clay-enable-rounded(
-								$toggle-switch-bar-border-radius
-							),
-						border-style: solid,
-						border-width: $toggle-switch-bar-border-width,
-					),
+				toggle-switch-handle: (
+					min-width: $toggle-switch-bar-width-mobile,
 
 					after: (
-						background-color: $toggle-switch-button-on-bg,
-						border-color: $toggle-switch-button-on-border-color,
-						border-radius:
-							clay-enable-rounded(
-								$toggle-switch-button-on-border-radius
-							),
-						border-style: solid,
-						border-width: $toggle-switch-button-border-width,
-						left:
-							calc(
-								#{$toggle-switch-bar-width} -
-									#{$toggle-switch-bar-padding} -
-									#{$toggle-switch-button-width}
+						margin-left:
+							clay-data-label-text-position(
+								$toggle-switch-bar-width-mobile,
+								$toggle-switch-bar-padding-mobile
 							),
 					),
+				),
 
-					toggle-switch-handle: (
-						after: (
-							content: attr(data-label-on),
-						),
-					),
-
-					toggle-switch-icon: (
-						color: $toggle-switch-bar-on-icon-color,
-					),
-
-					toggle-switch-icon-on: (
-						opacity: 1,
-					),
-
-					toggle-switch-icon-off: (
-						opacity: 0,
-					),
+				toggle-switch-icon: (
+					font-size: $toggle-switch-bar-font-size-mobile,
+					left: $toggle-switch-bar-padding-mobile,
+					line-height: $toggle-switch-button-width-mobile,
+					top: $toggle-switch-bar-padding-mobile,
+					width: $toggle-switch-button-width-mobile,
+				),
 
-					button-icon: (
-						color: $toggle-switch-button-on-icon-color,
-						left:
-							calc(
-								#{$toggle-switch-bar-width} -
-									#{$toggle-switch-bar-padding} -
-									#{$toggle-switch-button-width}
-							),
-					),
+				toggle-switch-icon-on: (
+					left: $toggle-switch-bar-padding-mobile,
+				),
 
-					button-icon-on: (
-						opacity: 1,
-					),
+				toggle-switch-icon-off: (
+					left:
+						calc(
+							#{$toggle-switch-bar-width-mobile} - #{$toggle-switch-bar-padding-mobile} -
+								#{$toggle-switch-button-width-mobile}
+						),
+				),
 
-					button-icon-off: (
-						opacity: 0,
-					),
+				button-icon: (
+					font-size: $toggle-switch-button-font-size-mobile,
 				),
 			),
 
-			mobile: (
-				height: $toggle-switch-bar-height-mobile,
-				width: $toggle-switch-bar-width-mobile,
-
+			checked: (
 				toggle-switch-bar: (
-					height: $toggle-switch-bar-height-mobile,
-					line-height: $toggle-switch-bar-height-mobile,
-					text-indent: 0,
-
-					before: (
-						width: $toggle-switch-bar-width-mobile,
-					),
-
 					after: (
-						bottom: $toggle-switch-bar-padding-mobile,
-						height: $toggle-switch-button-width-mobile,
-						left: $toggle-switch-bar-padding-mobile,
-						top: $toggle-switch-bar-padding-mobile,
-						width: $toggle-switch-button-width-mobile,
+						left:
+							calc(
+								#{$toggle-switch-bar-width-mobile} - #{$toggle-switch-bar-padding-mobile} -
+									#{$toggle-switch-button-width-mobile}
+							),
 					),
 
 					toggle-switch-handle: (
-						min-width: $toggle-switch-bar-width-mobile,
-
 						after: (
 							margin-left:
 								clay-data-label-text-position(
@@ -442,265 +492,211 @@
 						),
 					),
 
-					toggle-switch-icon: (
-						font-size: $toggle-switch-bar-font-size-mobile,
-						left: $toggle-switch-bar-padding-mobile,
-						line-height: $toggle-switch-button-width-mobile,
-						top: $toggle-switch-bar-padding-mobile,
-						width: $toggle-switch-button-width-mobile,
-					),
-
-					toggle-switch-icon-on: (
-						left: $toggle-switch-bar-padding-mobile,
-					),
-
-					toggle-switch-icon-off: (
+					button-icon: (
 						left:
 							calc(
-								#{$toggle-switch-bar-width-mobile} -
-									#{$toggle-switch-bar-padding-mobile} -
+								#{$toggle-switch-bar-width-mobile} - #{$toggle-switch-bar-padding-mobile} -
 									#{$toggle-switch-button-width-mobile}
 							),
 					),
-
-					button-icon: (
-						font-size: $toggle-switch-button-font-size-mobile,
-					),
-				),
-
-				checked: (
-					toggle-switch-bar: (
-						after: (
-							left:
-								calc(
-									#{$toggle-switch-bar-width-mobile} -
-										#{$toggle-switch-bar-padding-mobile} -
-										#{$toggle-switch-button-width-mobile}
-								),
-						),
-
-						toggle-switch-handle: (
-							after: (
-								margin-left:
-									clay-data-label-text-position(
-										$toggle-switch-bar-width-mobile,
-										$toggle-switch-bar-padding-mobile
-									),
-							),
-						),
-
-						button-icon: (
-							left:
-								calc(
-									#{$toggle-switch-bar-width-mobile} -
-										#{$toggle-switch-bar-padding-mobile} -
-										#{$toggle-switch-button-width-mobile}
-								),
-						),
-					),
-				),
-
-				toggle-switch-text-left: (
-					line-height: $toggle-switch-bar-height-mobile,
-				),
-
-				toggle-switch-text-right: (
-					line-height: $toggle-switch-bar-height-mobile,
 				),
 			),
-		),
-		$toggle-switch-check
-	);
 
-	// .toggle-switch-label
+			toggle-switch-text-left: (
+				line-height: $toggle-switch-bar-height-mobile,
+			),
 
-	$toggle-switch-label: ();
-	$toggle-switch-label: map-merge(
-		(
-			display: block,
-			margin-bottom: var(--toggle-switch-label-margin-bottom, 2px),
+			toggle-switch-text-right: (
+				line-height: $toggle-switch-bar-height-mobile,
+			),
 		),
-		$toggle-switch-label
-	);
-
-	// .toggle-switch-text
-
-	$toggle-switch-text: ();
-	$toggle-switch-text: map-merge(
-		(
-			display: block,
-			font-size:
-				var(
-					--toggle-switch-text-font-size,
-					$toggle-switch-text-font-size
+	),
+	$toggle-switch-check
+);
+
+// .toggle-switch-label
+
+$toggle-switch-label: () !default;
+$toggle-switch-label: map-merge(
+	(
+		display: block,
+		margin-bottom: var(--toggle-switch-label-margin-bottom, 2px),
+	),
+	$toggle-switch-label
+);
+
+// .toggle-switch-text
+
+$toggle-switch-text: () !default;
+$toggle-switch-text: map-merge(
+	(
+		display: block,
+		font-size:
+			var(--toggle-switch-text-font-size, $toggle-switch-text-font-size),
+	),
+	$toggle-switch-text
+);
+
+// .toggle-switch-text-left
+
+$toggle-switch-text-left: () !default;
+$toggle-switch-text-left: map-deep-merge(
+	(
+		display: inline-flex,
+		line-height: $toggle-switch-bar-height,
+		margin-right: 8px,
+	),
+	$toggle-switch-text-left
+);
+
+// .toggle-switch-text-right
+
+$toggle-switch-text-right: () !default;
+$toggle-switch-text-right: map-merge(
+	(
+		display: inline-flex,
+		line-height: $toggle-switch-bar-height,
+		margin-left: 8px,
+	),
+	$toggle-switch-text-right
+);
+
+// .simple-toggle-switch
+
+$simple-toggle-switch-label-line-height: 1 !default;
+$simple-toggle-switch-label-spacer-x: 8px !default;
+
+$simple-toggle-switch: () !default;
+$simple-toggle-switch: map-deep-merge(
+	(
+		breakpoint-down: sm,
+
+		align-items: center,
+		display: inline-flex,
+
+		toggle-switch-label: (
+			line-height: $simple-toggle-switch-label-line-height,
+			margin-bottom: 0,
+			max-width:
+				calc(
+					100% - #{clay-data-label-text-position(
+							$toggle-switch-bar-width,
+							$toggle-switch-bar-padding
+						)}
 				),
 		),
-		$toggle-switch-text
-	);
-
-	// .toggle-switch-text-left
-
-	$toggle-switch-text-left: ();
-	$toggle-switch-text-left: map-deep-merge(
-		(
-			display: inline-flex,
-			line-height: $toggle-switch-bar-height,
-			margin-right: 8px,
-		),
-		$toggle-switch-text-left
-	);
-
-	// .toggle-switch-text-right
-
-	$toggle-switch-text-right: ();
-	$toggle-switch-text-right: map-merge(
-		(
-			display: inline-flex,
-			line-height: $toggle-switch-bar-height,
-			margin-left: 8px,
-		),
-		$toggle-switch-text-right
-	);
-
-	// .simple-toggle-switch
-
-	$simple-toggle-switch-label-line-height: 1;
-	$simple-toggle-switch-label-spacer-x: 8px;
-
-	$simple-toggle-switch: ();
-	$simple-toggle-switch: map-deep-merge(
-		(
-			breakpoint-down: sm,
-
-			align-items: center,
-			display: inline-flex,
 
+		mobile: (
 			toggle-switch-label: (
-				line-height: $simple-toggle-switch-label-line-height,
-				margin-bottom: 0,
 				max-width:
 					calc(
-						100% -
-							#{clay-data-label-text-position(
-								$toggle-switch-bar-width,
-								$toggle-switch-bar-padding
+						100% - #{clay-data-label-text-position(
+								$toggle-switch-bar-width-mobile,
+								$toggle-switch-bar-padding-mobile
 							)}
 					),
 			),
-
-			mobile: (
-				toggle-switch-label: (
-					max-width:
-						calc(
-							100% -
-								#{clay-data-label-text-position(
-									$toggle-switch-bar-width-mobile,
-									$toggle-switch-bar-padding-mobile
-								)}
-						),
-				),
-			),
 		),
-		$simple-toggle-switch
-	);
+	),
+	$simple-toggle-switch
+);
 
-	// .simple-toggle-switch-reverse
+// .simple-toggle-switch-reverse
 
-	$simple-toggle-switch-reverse: ();
-	$simple-toggle-switch-reverse: map-deep-merge(
-		(
-			breakpoint-down: sm,
+$simple-toggle-switch-reverse: () !default;
+$simple-toggle-switch-reverse: map-deep-merge(
+	(
+		breakpoint-down: sm,
 
-			toggle-switch-label: (
-				margin-right: $simple-toggle-switch-label-spacer-x,
-			),
+		toggle-switch-label: (
+			margin-right: $simple-toggle-switch-label-spacer-x,
+		),
+
+		toggle-switch-check-bar: (
+			order: 5,
+		),
 
-			toggle-switch-check-bar: (
+		toggle-switch-check: (
+			toggle-switch-bar: (
 				order: 5,
 			),
+		),
+	),
+	$simple-toggle-switch-reverse
+);
 
-			toggle-switch-check: (
-				toggle-switch-bar: (
-					order: 5,
+// .toggle-switch-sm
+
+$toggle-switch-sizes: () !default;
+$toggle-switch-sizes: map-deep-merge(
+	(
+		toggle-switch-sm: (
+			simple-toggle-switch: (
+				toggle-switch-label: (
+					max-width: calc(100% - 34px),
 				),
 			),
-		),
-		$simple-toggle-switch-reverse
-	);
-
-	// .toggle-switch-sm
-
-	$toggle-switch-sizes: ();
-	$toggle-switch-sizes: map-deep-merge(
-		(
-			toggle-switch-sm: (
-				simple-toggle-switch: (
-					toggle-switch-label: (
-						max-width: calc(100% - 34px),
-					),
-				),
 
-				toggle-switch-check: (
-					height: 16px,
-					width: 30px,
+			toggle-switch-check: (
+				height: 16px,
+				width: 30px,
 
-					toggle-switch-bar: (
-						height: 16px,
-						line-height: 16px,
+				toggle-switch-bar: (
+					height: 16px,
+					line-height: 16px,
 
-						before: (
-							width: 30px,
-						),
+					before: (
+						width: 30px,
+					),
 
-						after: (
-							bottom: 0,
-							height: 12px,
-							left: 2px,
-							top: 2px,
-							width: 12px,
-						),
+					after: (
+						bottom: 0,
+						height: 12px,
+						left: 2px,
+						top: 2px,
+						width: 12px,
+					),
 
-						toggle-switch-handle: (
-							min-width: 30px,
+					toggle-switch-handle: (
+						min-width: 30px,
 
-							after: (
-								margin-left: 34px,
-							),
+						after: (
+							margin-left: 34px,
 						),
+					),
 
-						toggle-switch-icon: (
-							font-size: 8px,
-							height: 16px,
-							left: 0,
-							line-height: 16px,
-							top: 0px,
-							width: 16px,
-						),
+					toggle-switch-icon: (
+						font-size: 8px,
+						height: 16px,
+						left: 0,
+						line-height: 16px,
+						top: 0px,
+						width: 16px,
+					),
 
-						toggle-switch-icon-off: (
-							left: 13px,
-						),
+					toggle-switch-icon-off: (
+						left: 13px,
 					),
+				),
 
-					checked: (
-						toggle-switch-bar: (
-							after: (
-								left: 16px,
-							),
+				checked: (
+					toggle-switch-bar: (
+						after: (
+							left: 16px,
+						),
 
-							button-icon: (
-								left: 14px,
-							),
+						button-icon: (
+							left: 14px,
 						),
 					),
 				),
+			),
 
-				toggle-switch-label: (
-					font-size: 12px,
-					max-width: calc(100% - 38px),
-				),
+			toggle-switch-label: (
+				font-size: 12px,
+				max-width: calc(100% - 38px),
 			),
 		),
-		$toggle-switch-sizes
-	);
-}
+	),
+	$toggle-switch-sizes
+);