@clayui/css 3.54.0 → 3.57.0

package/src/scss/mixins/_forms.scss

@@ -1220,12 +1220,108 @@
 /// A mixin to create Clay Range variants.
 /// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
 /// @example
-/// color: {Color | String | Null},
-/// display: {String | Null},
-/// padding-bottom: {Number | String | Null},
-/// position: {String | Null},
-/// vertical-align: {String | Null},
-/// width: {Number | String | List | Null},
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
+/// 	// .clay-range-input
+/// 	tooltip: (
+/// 		// .clay-range-input .tooltip
+/// 	),
+/// 	tooltip-inner: (
+/// 		// .clay-range-input .tooltip-inner
+/// 	),
+/// 	tooltip-arrow: (
+/// 		// .clay-range-input .tooltip-arrow
+/// 	),
+/// 	clay-tooltip-bottom: (
+/// 		// .clay-range-input .clay-tooltip-bottom
+/// 		tooltip-arrow: (
+/// 			// .clay-range-input .clay-tooltip-bottom .tooltip-arrow
+/// 		),
+/// 	),
+/// 	clay-tooltip-top: (
+/// 		// .clay-range-input .clay-tooltip-top
+/// 		tooltip-arrow: (
+/// 			// .clay-range-input .clay-tooltip-top .tooltip-arrow
+/// 		),
+/// 	),
+/// 	clay-range-track: (
+/// 		// .clay-range-input .clay-range-track
+/// 	),
+/// 	clay-range-progress: (
+/// 		// .clay-range-input .clay-range-progress
+/// 	),
+/// 	clay-range-thumb: (
+/// 		// This styles the shared styles between ::-moz-range-thumb, ::-ms-thumb, and ::-webkit-slider-thumb
+/// 		// .clay-range-input .clay-range-thumb
+/// 	),
+/// 	form-control-range: (
+/// 		moz-range-thumb: (
+/// 			// .clay-range-input .form-control-range::-moz-range-thumb
+/// 		),
+/// 		ms-thumb: (
+/// 			// .clay-range-input .form-control-range::-ms-thumb
+/// 		),
+/// 		webkit-slider-thumb: (
+/// 			// .clay-range-input .form-control-range::-webkit-slider-thumb
+/// 		),
+/// 		hover: (
+/// 			// .clay-range-input .form-control-range:hover
+/// 			clay-range-track: (
+/// 				// .clay-range-input .form-control-range:hover ~ .clay-range-track
+/// 			),
+/// 			clay-range-progress: (
+/// 				// .clay-range-input .form-control-range:hover ~ .clay-range-progress
+/// 			),
+/// 			clay-range-thumb: (
+/// 				// This styles :hover::-moz-range-thumb, :hover::-ms-thumb, and :hover::-webkit-slider-thumb
+/// 				// .clay-range-input .form-control-range:hover ~ .clay-range-progress .clay-range-thumb
+/// 			),
+/// 		),
+/// 		focus: (
+/// 			// .clay-range-input .form-control-range:focus
+/// 			clay-range-track: (
+/// 				// .clay-range-input .form-control-range:focus ~ .clay-range-track
+/// 			),
+/// 			clay-range-progress: (
+/// 				// .clay-range-input .form-control-range:focus ~ .clay-range-progress
+/// 			),
+/// 			clay-range-thumb: (
+/// 				// This styles :focus::-moz-range-thumb, :focus::-ms-thumb, and :focus::-webkit-slider-thumb
+/// 				// .clay-range-input .form-control-range:focus ~ .clay-range-progress .clay-range-thumb
+/// 			),
+/// 		),
+/// 		disabled: (
+/// 			// .clay-range-input .form-control-range:disabled
+/// 			clay-range-track: (
+/// 				// .clay-range-input .form-control-range:focus ~ .clay-range-track
+/// 			),
+/// 			clay-range-progress: (
+/// 				// .clay-range-input .form-control-range:focus ~ .clay-range-progress
+/// 			),
+/// 			clay-range-thumb: (
+/// 				// This styles :disabled::-moz-range-thumb, :disabled::-ms-thumb, and :disabled::-webkit-slider-thumb
+/// 				// .clay-range-input .form-control-range:focus ~ .clay-range-progress .clay-range-thumb
+/// 			),
+/// 		),
+/// 		before-after: (
+/// 			// .clay-range-input::before, .clay-range-input::after
+/// 		),
+/// 		data-label-min-max: (
+/// 			// .clay-range-input[data-label-min], .clay-range-input[data-label-max]
+/// 		),
+/// 		data-label-min: (
+/// 			before: (
+/// 				// .clay-range-input[data-label-min]::before
+/// 			),
+/// 		),
+/// 		data-label-max: (
+/// 			after: (
+/// 				// .clay-range-input[data-label-max]::after
+/// 			),
+/// 		),
+/// 	),
+/// )
+/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
 /// thumb-bg: {Color | String | Null},
 /// thumb-bg-image: {String | List | Null},
 /// thumb-border-radius: {Number | String | List | Null},
@@ -1305,436 +1401,982 @@
 /// disabled-track-bg: {Color | String | Null},
 
 @mixin clay-range-input-variant($map) {
-	$color: map-get($map, color);
-	$display: map-get($map, display);
-	$padding-bottom: map-get($map, padding-bottom);
-	$position: map-get($map, position);
-	$vertical-align: map-get($map, vertical-align);
-	$width: map-get($map, width);
-
-	$thumb-bg: map-get($map, thumb-bg);
-	$thumb-bg-image: map-get($map, thumb-bg-image);
-	$thumb-border-color: map-get($map, thumb-border-color);
-	$thumb-border-style: map-get($map, thumb-border-style);
-	$thumb-border-width: map-get($map, thumb-border-width);
-
-	$thumb-border-radius: map-get($map, thumb-border-radius);
-	$thumb-box-shadow: map-get($map, thumb-box-shadow);
-	$thumb-height: map-get($map, thumb-height);
-	$thumb-width: map-get($map, thumb-width);
-
-	$track-bg: map-get($map, track-bg);
-	$track-bg-image: map-get($map, track-bg-image);
-	$track-border-color: map-get($map, track-border-color);
-	$track-border-radius: map-get($map, track-border-radius);
-	$track-border-style: map-get($map, track-border-style);
-	$track-border-width: map-get($map, track-border-width);
-	$track-height: map-get($map, track-height);
-	$track-margin-top: map-get($map, track-margin-top);
-	$track-position: map-get($map, track-position);
-	$track-top: map-get($map, track-top);
-	$track-width: map-get($map, track-width);
-
-	@if ($track-height and $track-margin-top == null) {
-		$track-margin-top: math-sign($track-height * 0.5);
-	}
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
 
-	$progress-bg: map-get($map, progress-bg);
-	$progress-bg-image: map-get($map, progress-bg-image);
-	$progress-border-color: map-get($map, progress-border-color);
-	$progress-border-radius: map-get($map, progress-border-radius);
-	$progress-border-style: map-get($map, progress-border-style);
-	$progress-border-width: map-get($map, progress-border-width);
-	$progress-height: setter(map-get($map, progress-height), $track-height);
-	$progress-margin-top: map-get($map, progress-margin-top);
-	$progress-position: map-get($map, progress-position);
-	$progress-top: map-get($map, progress-top);
-	$progress-width: map-get($map, progress-width);
-
-	@if ($progress-height and $progress-margin-top == null) {
-		$progress-margin-top: math-sign($progress-height * 0.5);
-	}
+		$clay-range-thumb: setter(map-get($map, clay-range-thumb), ());
+		$clay-range-thumb: map-merge(
+			$clay-range-thumb,
+			(
+				background-color:
+					setter(
+						map-get($map, thumb-bg),
+						map-get($clay-range-thumb, background-color)
+					),
+				background-image:
+					setter(
+						map-get($map, thumb-bg-image),
+						map-get($clay-range-thumb, background-image)
+					),
+				border-color:
+					setter(
+						map-get($map, thumb-border-color),
+						map-get($clay-range-thumb, border-color)
+					),
+				border-style:
+					setter(
+						map-get($map, thumb-border-style),
+						map-get($clay-range-thumb, border-style)
+					),
+				border-width:
+					setter(
+						map-get($map, thumb-border-width),
+						map-get($clay-range-thumb, border-width)
+					),
+				border-radius:
+					setter(
+						map-get($map, thumb-border-radius),
+						map-get($clay-range-thumb, border-radius)
+					),
+				box-shadow:
+					setter(
+						map-get($map, thumb-box-shadow),
+						map-get($clay-range-thumb, box-shadow)
+					),
+				height:
+					setter(
+						map-get($map, thumb-height),
+						map-get($clay-range-thumb, height)
+					),
+				position:
+					setter(map-get($clay-range-thumb, position), absolute),
+				top: setter(map-get($clay-range-thumb, top), 50%),
+				visibility:
+					setter(map-get($clay-range-thumb, visibility), hidden),
+				width:
+					setter(
+						map-get($map, thumb-width),
+						map-get($clay-range-thumb, width)
+					),
+			)
+		);
 
-	$tooltip-bg: map-get($map, tooltip-bg);
-	$tooltip-color: map-get($map, tooltip-color);
-	$tooltip-line-height: map-get($map, tooltip-line-height);
-	$tooltip-padding: map-get($map, tooltip-padding);
-	$tooltip-padding-bottom: map-get($map, tooltip-padding-bottom);
-	$tooltip-padding-left: map-get($map, tooltip-padding-left);
-	$tooltip-padding-right: map-get($map, tooltip-padding-right);
-	$tooltip-padding-top: map-get($map, tooltip-padding-top);
-	$tooltip-spacer-x: map-get($map, tooltip-spacer-x);
-	$tooltip-spacer-y: map-get($map, tooltip-spacer-y);
-	$tooltip-transition: map-get($map, tooltip-transition);
-	$tooltip-visibility: map-get($map, tooltip-visibility);
-	$tooltip-white-space: map-get($map, tooltip-white-space);
-
-	$tooltip-arrow-border-color: map-get($map, tooltip-arrow-border-color);
-	$tooltip-arrow-border-style: map-get($map, tooltip-arrow-border-style);
-	$tooltip-arrow-border-width: map-get($map, tooltip-arrow-border-width);
-	$tooltip-arrow-offset: map-get($map, tooltip-arrow-offset);
-	$tooltip-arrow-size: map-get($map, tooltip-arrow-size);
-
-	@if ($tooltip-arrow-size != null) {
-		$tooltip-arrow-offset: $tooltip-arrow-size * 0.5;
-	}
+		$clay-range-thumb: map-merge(
+			$clay-range-thumb,
+			(
+				margin-top:
+					setter(
+						map-get($clay-range-thumb, margin-top),
+						calc(#{map-get($clay-range-thumb, height)} * -0.5)
+					),
+				right:
+					setter(
+						map-get($clay-range-thumb, right),
+						calc(#{map-get($clay-range-thumb, width)} * -0.5)
+					),
+			)
+		);
 
-	@if ($thumb-width and $tooltip-spacer-x == null) {
-		$tooltip-spacer-x: $thumb-width * 0.5;
-	}
+		$moz-range-thumb: setter(map-get($map, moz-range-thumb), ());
+		$moz-range-thumb: map-merge(
+			$moz-range-thumb,
+			(
+				appearance: setter(map-get($moz-range-thumb, appearance), none),
+				background-color: map-get($clay-range-thumb, background-color),
+				background-image: map-get($clay-range-thumb, background-image),
+				border-color: map-get($clay-range-thumb, border-color),
+				border-radius: map-get($clay-range-thumb, border-radius),
+				border-style: map-get($clay-range-thumb, border-style),
+				border-width: map-get($clay-range-thumb, border-width),
+				box-shadow: map-get($clay-range-thumb, box-shadow),
+				height: map-get($clay-range-thumb, height),
+				margin-top: map-get($clay-range-thumb, margin-top),
+				position: setter(map-get($moz-range-thumb, position), relative),
+				top: map-get($clay-range-thumb, top),
+				width: map-get($clay-range-thumb, width),
+			)
+		);
 
-	$form-control-appearance: map-get($map, form-control-appearance);
-	$form-control-bg: map-get($map, form-control-bg);
-	$form-control-height: map-get($map, form-control-height);
-	$form-control-position: map-get($map, form-control-position);
-	$form-control-z-index: map-get($map, form-control-z-index);
-
-	$data-label-font-size: map-get($map, data-label-font-size);
-	$data-label-font-weight: map-get($map, data-label-font-weight);
-	$data-label-line-height: map-get($map, data-label-line-height);
-	$data-label-margin-top: map-get($map, data-label-margin-top);
-	$data-label-position: map-get($map, data-label-position);
-	$data-label-spacer: map-get($map, data-label-spacer);
-	$data-label-text-align: map-get($map, data-label-text-align);
-	$data-label-top: map-get($map, data-label-top);
-	$data-label-width: map-get($map, data-label-width);
-
-	$data-label-before-content: map-get($map, data-label-before-content);
-	$data-label-before-left: map-get($map, data-label-before-left);
-
-	$data-label-after-content: map-get($map, data-label-after-content);
-	$data-label-after-right: map-get($map, data-label-after-right);
-
-	$hover-cursor: map-get($map, hover-cursor);
-	$hover-thumb-bg: map-get($map, hover-thumb-bg);
-
-	$focus-outline: map-get($map, focus-outline);
-	$focus-thumb-box-shadow: map-get($map, focus-thumb-box-shadow);
-
-	$disabled-color: map-get($map, disabled-color);
-	$disabled-cursor: map-get($map, disabled-cursor);
-	$disabled-thumb-bg: map-get($map, disabled-thumb-bg);
-	$disabled-thumb-box-shadow: map-get($map, disabled-thumb-box-shadow);
-	$disabled-progress-bg: map-get($map, disabled-progress-bg);
-	$disabled-track-bg: map-get($map, disabled-track-bg);
-
-	color: $color;
-	display: $display;
-	padding-bottom: $padding-bottom;
-	position: $position;
-	vertical-align: $vertical-align;
-	width: $width;
-
-	.tooltip {
-		line-height: $tooltip-line-height;
-		margin-left: $tooltip-spacer-x;
-		transition: $tooltip-transition;
-		visibility: $tooltip-visibility;
-		white-space: $tooltip-white-space;
-	}
+		$ms-thumb: setter(map-get($map, ms-thumb), ());
+		$ms-thumb: map-merge(
+			$ms-thumb,
+			(
+				appearance: setter(map-get($ms-thumb, appearance), none),
+				background-color: map-get($ms-thumb, background-color),
+				background-image: map-get($ms-thumb, background-image),
+				border-color: map-get($ms-thumb, border-color),
+				border-radius: map-get($ms-thumb, border-radius),
+				border-style: map-get($ms-thumb, border-style),
+				border-width: map-get($ms-thumb, border-width),
+				box-shadow: map-get($ms-thumb, box-shadow),
+				height: map-get($ms-thumb, height),
+				width: map-get($ms-thumb, width),
+			)
+		);
 
-	.tooltip-inner {
-		background-color: $tooltip-bg;
-		color: $tooltip-color;
-		padding: $tooltip-padding;
-		padding-bottom: $tooltip-padding-bottom;
-		padding-left: $tooltip-padding-left;
-		padding-right: $tooltip-padding-right;
-		padding-top: $tooltip-padding-top;
-	}
+		$webkit-slider-thumb: setter(map-get($map, webkit-slider-thumb), ());
+		$webkit-slider-thumb: map-merge(
+			$webkit-slider-thumb,
+			(
+				appearance:
+					setter(map-get($webkit-slider-thumb, appearance), none),
+				background-color: map-get($clay-range-thumb, background-color),
+				background-image: map-get($clay-range-thumb, background-image),
+				border-color: map-get($clay-range-thumb, border-color),
+				border-radius: map-get($clay-range-thumb, border-radius),
+				border-style: map-get($clay-range-thumb, border-style),
+				border-width: map-get($clay-range-thumb, border-width),
+				box-shadow: map-get($clay-range-thumb, box-shadow),
+				height: map-get($clay-range-thumb, height),
+				margin-top: map-get($clay-range-thumb, margin-top),
+				position:
+					setter(map-get($webkit-slider-thumb, position), relative),
+				top: map-get($clay-range-thumb, top),
+				width: map-get($clay-range-thumb, width),
+			)
+		);
 
-	.tooltip-arrow {
-		background-color: $tooltip-bg;
-		border-color: $tooltip-arrow-border-color;
-		border-style: $tooltip-arrow-border-style;
-		border-width: $tooltip-arrow-border-width;
-		height: $tooltip-arrow-size;
-		width: $tooltip-arrow-size;
-	}
+		$clay-range-track: setter(map-get($map, clay-range-track), ());
+		$clay-range-track: map-merge(
+			$clay-range-track,
+			(
+				background-color:
+					setter(
+						map-get($map, track-bg),
+						map-get($clay-range-track, background-color)
+					),
+				background-image:
+					setter(
+						map-get($map, track-bg-image),
+						map-get($clay-range-track, background-image)
+					),
+				border-color:
+					setter(
+						map-get($map, track-border-color),
+						map-get($clay-range-track, border-color)
+					),
+				border-radius:
+					setter(
+						map-get($map, track-border-radius),
+						map-get($clay-range-track, border-radius)
+					),
+				border-style:
+					setter(
+						map-get($map, track-border-style),
+						map-get($clay-range-track, border-style)
+					),
+				border-width:
+					setter(
+						map-get($map, track-border-width),
+						map-get($clay-range-track, border-width)
+					),
+				height:
+					setter(
+						map-get($map, track-height),
+						map-get($clay-range-track, height)
+					),
+				margin-top:
+					setter(
+						map-get($map, track-margin-top),
+						map-get($clay-range-track, margin-top)
+					),
+				position:
+					setter(
+						map-get($map, track-position),
+						map-get($clay-range-track, position)
+					),
+				top:
+					setter(
+						map-get($map, track-top),
+						map-get($clay-range-track, top)
+					),
+				width:
+					setter(
+						map-get($map, track-width),
+						map-get($clay-range-track, width)
+					),
+			)
+		);
 
-	.clay-tooltip-bottom {
-		margin-top: $tooltip-spacer-y;
-		padding-top: $tooltip-arrow-offset;
-		top: 100%;
-		transform: translateX(-50%);
+		$clay-range-track: map-merge(
+			$clay-range-track,
+			(
+				margin-top:
+					setter(
+						map-get($clay-range-track, margin-top),
+						calc(#{map-get($clay-range-track, height)} * -0.5)
+					),
+			)
+		);
 
-		.tooltip-arrow {
-			margin-left: math-sign($tooltip-arrow-offset);
-		}
-	}
+		$clay-range-progress: setter(map-get($map, clay-range-progress), ());
+		$clay-range-progress: map-merge(
+			$clay-range-progress,
+			(
+				background-color:
+					setter(
+						map-get($map, progress-bg),
+						map-get($clay-range-progress, background-color)
+					),
+				background-image:
+					setter(
+						map-get($map, progress-bg-image),
+						map-get($clay-range-progress, background-image)
+					),
+				border-color:
+					setter(
+						map-get($map, progress-border-color),
+						map-get($clay-range-progress, border-color)
+					),
+				border-radius:
+					setter(
+						map-get($map, progress-border-radius),
+						map-get($clay-range-progress, border-radius)
+					),
+				border-style:
+					setter(
+						map-get($map, progress-border-style),
+						map-get($clay-range-progress, border-style)
+					),
+				border-width:
+					setter(
+						map-get($map, progress-border-width),
+						map-get($clay-range-progress, border-width)
+					),
+				height:
+					setter(
+						map-get($map, progress-height),
+						map-get($clay-range-progress, height),
+						map-get($clay-range-track, height)
+					),
+				margin-top:
+					setter(
+						map-get($map, progress-margin-top),
+						map-get($clay-range-progress, margin-top),
+						map-get($clay-range-track, margin-top)
+					),
+				position:
+					setter(
+						map-get($map, progress-position),
+						map-get($clay-range-progress, position)
+					),
+				top:
+					setter(
+						map-get($map, progress-top),
+						map-get($clay-range-progress, top)
+					),
+				width:
+					setter(
+						map-get($map, progress-width),
+						map-get($clay-range-progress, width)
+					),
+			)
+		);
 
-	.clay-tooltip-top {
-		bottom: 100%;
-		margin-bottom: $tooltip-spacer-y;
-		padding-bottom: $tooltip-arrow-offset;
-		transform: translateX(-50%);
+		$clay-range-progress: map-merge(
+			$clay-range-progress,
+			(
+				margin-top:
+					setter(
+						map-get($clay-range-progress, margin-top),
+						calc(#{map-get($clay-range-progress, height)} * -0.5)
+					),
+			)
+		);
 
-		.tooltip-arrow {
-			margin-left: math-sign($tooltip-arrow-offset);
-		}
-	}
+		$tooltip: setter(map-get($map, tooltip), ());
+		$tooltip: map-merge(
+			$tooltip,
+			(
+				line-height:
+					setter(
+						map-get($map, tooltip-line-height),
+						map-get($tooltip, line-height)
+					),
+				margin-left:
+					setter(
+						map-get($map, tooltip-spacer-x),
+						map-get($tooltip, margin-left),
+						calc(#{map-get($clay-range-thumb, width)} * 0.5)
+					),
+				transition:
+					setter(
+						map-get($map, tooltip-transition),
+						map-get($tooltip, transition)
+					),
+				visibility:
+					setter(
+						map-get($map, tooltip-visibility),
+						map-get($tooltip, visibility)
+					),
+				white-space:
+					setter(
+						map-get($map, tooltip-white-space),
+						map-get($tooltip, white-space)
+					),
+			)
+		);
 
-	.clay-range-track {
-		background-color: $track-bg;
-		border-color: $track-border-color;
-		border-radius: $track-border-radius;
-		border-style: $track-border-style;
-		border-width: $track-border-width;
-		height: $track-height;
-		margin-top: $track-margin-top;
-		position: $track-position;
-		top: $track-top;
-		width: $track-width;
-	}
+		$tooltip-inner: setter(map-get($map, tooltip-inner), ());
+		$tooltip-inner: map-merge(
+			$tooltip-inner,
+			(
+				background-color:
+					setter(
+						map-get($map, tooltip-bg),
+						map-get($tooltip-inner, background-color)
+					),
+				color:
+					setter(
+						map-get($map, tooltip-color),
+						map-get($tooltip-inner, color)
+					),
+				padding:
+					setter(
+						map-get($map, tooltip-padding),
+						map-get($tooltip-inner, padding)
+					),
+				padding-bottom:
+					setter(
+						map-get($map, tooltip-padding-bottom),
+						map-get($tooltip-inner, padding-bottom)
+					),
+				padding-left:
+					setter(
+						map-get($map, tooltip-padding-left),
+						map-get($tooltip-inner, padding-left)
+					),
+				padding-right:
+					setter(
+						map-get($map, tooltip-padding-right),
+						map-get($tooltip-inner, padding-right)
+					),
+				padding-top:
+					setter(
+						map-get($map, tooltip-padding-top),
+						map-get($tooltip-inner, padding-top)
+					),
+			)
+		);
 
-	.clay-range-progress {
-		background-color: $progress-bg;
-		background-image: $progress-bg-image;
-		border-color: $progress-border-color;
-		border-radius: $progress-border-radius;
-		border-style: $progress-border-style;
-		border-width: $progress-border-width;
-		height: $progress-height;
-		margin-top: $progress-margin-top;
-		position: $progress-position;
-		top: $progress-top;
-		width: $progress-width;
-	}
+		$tooltip-arrow: setter(map-get($map, tooltip-arrow), ());
+		$tooltip-arrow: map-merge(
+			$tooltip-arrow,
+			(
+				border-color:
+					setter(
+						map-get($map, tooltip-arrow-border-color),
+						map-get($tooltip-arrow, border-color)
+					),
+				border-style:
+					setter(
+						map-get($map, tooltip-arrow-border-style),
+						map-get($tooltip-arrow, border-style)
+					),
+				border-width:
+					setter(
+						map-get($map, tooltip-arrow-border-width),
+						map-get($tooltip-arrow, border-width)
+					),
+				height:
+					setter(
+						map-get($map, tooltip-arrow-size),
+						map-get($tooltip-arrow, height)
+					),
+				width:
+					setter(
+						map-get($map, tooltip-arrow-size),
+						map-get($tooltip-arrow, width)
+					),
+			)
+		);
 
-	.clay-range-thumb {
-		background-color: $thumb-bg;
-		background-image: $thumb-bg-image;
-		border-color: $thumb-border-color;
-		border-radius: $thumb-border-radius;
-		border-style: $thumb-border-style;
-		border-width: $thumb-border-width;
-		box-shadow: $thumb-box-shadow;
-		height: $thumb-height;
-		margin-top: math-sign($thumb-height * 0.5);
-		position: absolute;
-		right: math-sign($thumb-width * 0.5);
-		top: 50%;
-		visibility: hidden;
-		width: $thumb-width;
-	}
+		$clay-tooltip-bottom: setter(map-get($map, clay-tooltip-bottom), ());
+		$clay-tooltip-bottom: map-merge(
+			$clay-tooltip-bottom,
+			(
+				margin-top:
+					setter(
+						map-get($map, tooltip-spacer-y),
+						map-get($clay-tooltip-bottom, margin-top)
+					),
+				padding-top:
+					setter(
+						map-get($map, tooltip-arrow-offset),
+						map-get($clay-tooltip-bottom, padding-top),
+						calc(#{map-get($tooltip-arrow, height)} * 0.5)
+					),
+				top: setter(map-get($clay-tooltip-bottom, top), 100%),
+				transform:
+					setter(
+						map-get($clay-tooltip-bottom, transform),
+						translateX(-50%)
+					),
+			)
+		);
 
-	.form-control-range {
-		-moz-appearance: $form-control-appearance;
-		-webkit-appearance: $form-control-appearance;
-		appearance: $form-control-appearance;
-		background-color: $form-control-bg;
-		content: '#{$thumb-width}';
-		height: $form-control-height;
-		margin: 0;
-		padding: 0;
-		position: $form-control-position;
-		z-index: $form-control-z-index;
-
-		// Firefox
-
-		&::-moz-focus-outer {
-			@if ($focus-outline == 0) {
-				border-width: 0;
-			}
-		}
+		$clay-tooltip-bottom-tooltip-arrow: setter(
+			map-deep-get($map, clay-tooltip-bottom, tooltip-arrow),
+			()
+		);
+		$clay-tooltip-bottom-tooltip-arrow: map-merge(
+			$clay-tooltip-bottom-tooltip-arrow,
+			(
+				margin-left:
+					setter(
+						map-get(
+							$clay-tooltip-bottom-tooltip-arrow,
+							margin-left
+						),
+						calc(#{map-get($tooltip-arrow, width)} * -0.5)
+					),
+			)
+		);
 
-		&::-moz-range-thumb {
-			-moz-appearance: none;
-			appearance: none;
-			background-color: $thumb-bg;
-			background-image: $thumb-bg-image;
-			border-color: $thumb-border-color;
-			border-style: $thumb-border-style;
-			border-radius: $thumb-border-radius;
-			border-width: $thumb-border-width;
-			box-shadow: $thumb-box-shadow;
-			height: $thumb-height;
-			margin-top: math-sign($thumb-height * 0.5);
-			position: relative;
-			top: 50%;
-			width: $thumb-width;
-		}
+		$clay-tooltip-top: setter(map-get($map, clay-tooltip-top), ());
+		$clay-tooltip-top: map-merge(
+			$clay-tooltip-top,
+			(
+				bottom: setter(map-get($clay-tooltip-top, bottom), 100%),
+				margin-bottom:
+					setter(
+						map-get($map, tooltip-spacer-y),
+						map-get($clay-tooltip-top, margin-bottom)
+					),
+				padding-bottom:
+					setter(
+						map-get($map, tooltip-arrow-offset),
+						map-get($clay-tooltip-top, padding-bottom),
+						calc(#{map-get($tooltip-arrow, height)} * 0.5)
+					),
+				transform:
+					setter(
+						map-get($clay-tooltip-top, transform),
+						translateX(-50%)
+					),
+			)
+		);
 
-		&::-moz-range-track {
-			-moz-appearance: none;
-			appearance: none;
-			height: 100%;
-		}
+		$clay-tooltip-top-tooltip-arrow: setter(
+			map-deep-get($map, clay-tooltip-top, tooltip-arrow),
+			()
+		);
+		$clay-tooltip-top-tooltip-arrow: map-merge(
+			$clay-tooltip-top-tooltip-arrow,
+			(
+				margin-left:
+					setter(
+						map-get($clay-tooltip-top-tooltip-arrow, margin-left),
+						calc(#{map-get($tooltip-arrow, width)} * -0.5)
+					),
+			)
+		);
+
+		$form-control-range: setter(map-get($map, form-control-range), ());
+		$form-control-range: map-merge(
+			$form-control-range,
+			(
+				appearance:
+					setter(
+						map-get($map, form-control-appearance),
+						map-get($form-control-range, appearance)
+					),
+				background-color:
+					setter(
+						map-get($map, form-control-bg),
+						map-get($form-control-range, background-color)
+					),
+				content:
+					setter(
+						map-get($form-control-range, content),
+						'#{map-get($clay-range-thumb, width)}'
+					),
+				height:
+					setter(
+						map-get($map, form-control-height),
+						map-get($form-control-range, height)
+					),
+				position:
+					setter(
+						map-get($map, form-control-position),
+						map-get($form-control-range, position)
+					),
+				z-index:
+					setter(
+						map-get($map, form-control-z-index),
+						map-get($form-control-range, z-index)
+					),
+			)
+		);
 
-		// IE Edge
+		$data-label-min-max: setter(map-get($map, data-label-min-max), ());
+		$data-label-min-max: map-merge(
+			$data-label-min-max,
+			(
+				margin-bottom:
+					setter(
+						map-get($map, data-label-spacer),
+						map-get($data-label-min-max, margin-bottom)
+					),
+			)
+		);
 
-		&::-ms-fill-lower {
-			background-color: transparent;
-		}
+		$before-after: setter(map-get($map, before-after), ());
+		$before-after: map-merge(
+			$before-after,
+			(
+				font-size:
+					setter(
+						map-get($map, data-label-font-size),
+						map-get($before-after, font-size)
+					),
+				font-weight:
+					setter(
+						map-get($map, data-label-font-weight),
+						map-get($before-after, font-weight)
+					),
+				line-height:
+					setter(
+						map-get($map, data-label-line-height),
+						map-get($before-after, line-height)
+					),
+				margin-top:
+					setter(
+						map-get($map, data-label-margin-top),
+						map-get($before-after, margin-top)
+					),
+				position:
+					setter(
+						map-get($map, data-label-position),
+						map-get($before-after, position)
+					),
+				text-align:
+					setter(
+						map-get($map, data-label-text-align),
+						map-get($before-after, text-align)
+					),
+				top:
+					setter(
+						map-get($map, data-label-top),
+						map-get($before-after, top)
+					),
+				width:
+					setter(
+						map-get($map, data-label-width),
+						map-get($before-after, width)
+					),
+			)
+		);
 
-		&::-ms-fill-upper {
-			background-color: transparent;
-		}
+		$data-label-min-before: setter(
+			map-deep-get($map, data-label-min, before),
+			()
+		);
+		$data-label-min-before: map-merge(
+			$data-label-min-before,
+			(
+				content:
+					setter(
+						map-get($map, data-label-before-content),
+						map-get($data-label-min-before, content)
+					),
+				left:
+					setter(
+						map-get($map, data-label-before-left),
+						map-get($data-label-min-before, left)
+					),
+			)
+		);
 
-		&::-ms-thumb {
-			appearance: none;
-			background-color: $thumb-bg;
-			background-image: $thumb-bg-image;
-			border-color: $thumb-border-color;
-			border-radius: $thumb-border-radius;
-			border-style: $thumb-border-style;
-			border-width: $thumb-border-width;
-			box-shadow: $thumb-box-shadow;
-			height: $thumb-height;
-			width: $thumb-width;
-		}
+		$data-label-max-after: setter(
+			map-deep-get($map, data-label-max, after),
+			()
+		);
+		$data-label-max-after: map-merge(
+			$data-label-max-after,
+			(
+				content:
+					setter(
+						map-get($map, data-label-after-content),
+						map-get($data-label-max-after, content)
+					),
+				right:
+					setter(
+						map-get($map, data-label-after-right),
+						map-get($data-label-max-after, right)
+					),
+			)
+		);
 
-		&::-ms-tooltip {
-			display: none;
-		}
+		$hover: setter(map-deep-get($map, form-control-range, hover), ());
+		$hover: map-merge(
+			$hover,
+			(
+				cursor:
+					setter(
+						map-get($map, hover-cursor),
+						map-get($hover, cursor)
+					),
+			)
+		);
 
-		&::-ms-track {
-			background-color: transparent;
-			border-color: transparent;
-			border-style: solid;
-			border-width: 0;
-			color: transparent;
-			height: 100%;
-		}
+		$hover-clay-range-thumb: setter(
+			map-deep-get($map, hover, clay-range-thumb),
+			()
+		);
+		$hover-clay-range-thumb: map-merge(
+			$hover-clay-range-thumb,
+			(
+				background-color:
+					setter(
+						map-get($map, hover-thumb-bg),
+						map-get($hover-clay-range-thumb, background-color)
+					),
+			)
+		);
+		$focus: setter(map-deep-get($map, form-control-range, focus), ());
+		$focus: map-merge(
+			$focus,
+			(
+				outline:
+					setter(
+						map-get($map, focus-outline),
+						map-get($focus, outline)
+					),
+			)
+		);
 
-		// Webkit
+		$focus-clay-range-thumb: setter(
+			map-deep-get($map, focus, clay-range-thumb),
+			()
+		);
+		$focus-clay-range-thumb: map-merge(
+			$focus-clay-range-thumb,
+			(
+				box-shadow:
+					setter(
+						map-get($map, focus-thumb-box-shadow),
+						map-get($focus-clay-range-thumb, box-shadow)
+					),
+			)
+		);
 
-		&::-webkit-slider-runnable-track {
-			-webkit-appearance: none;
-			appearance: none;
-			height: 100%;
-		}
+		$disabled: setter(map-deep-get($map, form-control-range, disabled), ());
+		$disabled: map-merge(
+			$disabled,
+			(
+				color:
+					setter(
+						map-get($map, disabled-color),
+						map-get($disabled, color)
+					),
+				cursor:
+					setter(
+						map-get($map, disabled-cursor),
+						map-get($disabled, cursor)
+					),
+			)
+		);
 
-		&::-webkit-slider-thumb {
-			-webkit-appearance: none;
-			appearance: none;
-			background-color: $thumb-bg;
-			background-image: $thumb-bg-image;
-			border-color: $thumb-border-color;
-			border-radius: $thumb-border-radius;
-			border-style: $thumb-border-style;
-			border-width: $thumb-border-width;
-			box-shadow: $thumb-box-shadow;
-			height: $thumb-height;
-			margin-top: math-sign($thumb-height * 0.5);
-			position: relative;
-			top: 50%;
-			width: $thumb-width;
-		}
+		$disabled-clay-range-thumb: setter(
+			map-deep-get($map, disabled, clay-range-thumb),
+			()
+		);
+		$disabled-clay-range-thumb: map-merge(
+			$disabled-clay-range-thumb,
+			(
+				background-color:
+					setter(
+						map-get($map, disabled-thumb-bg),
+						map-get($disabled-clay-range-thumb, background-color)
+					),
+				box-shadow:
+					setter(
+						map-get($map, disabled-thumb-box-shadow),
+						map-get($disabled-clay-range-thumb, box-shadow)
+					),
+			)
+		);
 
-		&:hover {
-			cursor: $hover-cursor;
+		$disabled-clay-range-track: setter(
+			map-deep-get($map, form-control-range, disabled, clay-range-track),
+			()
+		);
+		$disabled-clay-range-track: map-merge(
+			$disabled-clay-range-track,
+			(
+				background-color:
+					setter(
+						map-get($map, disabled-track-bg),
+						map-get($disabled-clay-range-track, background-color)
+					),
+			)
+		);
 
-			~ .clay-range-progress {
-				.clay-range-thumb {
-					background-color: $hover-thumb-bg;
-				}
+		$disabled-clay-range-progress: setter(
+			map-deep-get(
+				$map,
+				form-control-range,
+				disabled,
+				clay-range-progress
+			),
+			()
+		);
+		$disabled-clay-range-progress: map-merge(
+			$disabled-clay-range-progress,
+			(
+				background-color:
+					setter(
+						map-get($map, disabled-progress-bg),
+						map-get($disabled-clay-range-progress, background-color)
+					),
+			)
+		);
 
-				.tooltip {
-					visibility: visible;
-					opacity: 1;
-				}
-			}
+		@if ($enabled) {
+			@include clay-css($map);
 
-			&::-moz-range-thumb {
-				background-color: $hover-thumb-bg;
+			.tooltip {
+				@include clay-css($tooltip);
 			}
 
-			&::-ms-thumb {
-				background-color: $hover-thumb-bg;
+			.tooltip-inner {
+				@include clay-css($tooltip-inner);
 			}
 
-			&::-webkit-slider-thumb {
-				background-color: $hover-thumb-bg;
+			.tooltip-arrow {
+				@include clay-css($tooltip-arrow);
 			}
-		}
 
-		&:focus,
-		&.focus {
-			outline: $focus-outline;
+			.clay-tooltip-bottom {
+				@include clay-css($clay-tooltip-bottom);
 
-			~ .clay-range-progress {
-				.clay-range-thumb {
-					box-shadow: $focus-thumb-box-shadow;
+				.tooltip-arrow {
+					@include clay-css($clay-tooltip-bottom-tooltip-arrow);
 				}
+			}
 
-				.tooltip {
-					visibility: visible;
-					opacity: 1;
+			.clay-tooltip-top {
+				@include clay-css($clay-tooltip-top);
+
+				.tooltip-arrow {
+					@include clay-css($clay-tooltip-top-tooltip-arrow);
 				}
 			}
 
-			&::-moz-range-thumb {
-				box-shadow: $focus-thumb-box-shadow;
+			.clay-range-track {
+				@include clay-css($clay-range-track);
 			}
 
-			&::-ms-thumb {
-				box-shadow: $focus-thumb-box-shadow;
+			.clay-range-progress {
+				@include clay-css($clay-range-progress);
 			}
 
-			&::-webkit-slider-thumb {
-				box-shadow: $focus-thumb-box-shadow;
+			.clay-range-thumb {
+				@include clay-css($clay-range-thumb);
 			}
-		}
 
-		&:disabled {
-			color: $disabled-color;
-			cursor: $disabled-cursor;
+			.form-control-range {
+				@include clay-css($form-control-range);
 
-			~ .clay-range-track {
-				background-color: $disabled-track-bg;
-			}
+				// Firefox
 
-			~ .clay-range-progress {
-				background-color: $disabled-progress-bg;
+				&::-moz-focus-outer {
+					@if (map-get($focus, outline) == 0) {
+						border-width: 0;
+					}
+				}
 
-				.clay-range-thumb {
-					background-color: $disabled-thumb-bg;
-					box-shadow: $disabled-thumb-box-shadow;
+				&::-moz-range-thumb {
+					@include clay-css($moz-range-thumb);
 				}
-			}
 
-			&::-moz-range-thumb {
-				background-color: $disabled-thumb-bg;
-				box-shadow: $disabled-thumb-box-shadow;
-			}
+				&::-moz-range-track {
+					-moz-appearance: none;
+					appearance: none;
+					height: 100%;
+				}
 
-			&::-ms-thumb {
-				background-color: $disabled-thumb-bg;
-				box-shadow: $disabled-thumb-box-shadow;
-			}
+				// IE Edge
+
+				&::-ms-fill-lower {
+					background-color: transparent;
+				}
+
+				&::-ms-fill-upper {
+					background-color: transparent;
+				}
+
+				&::-ms-thumb {
+					@include clay-css($ms-thumb);
+				}
+
+				&::-ms-tooltip {
+					display: none;
+				}
+
+				&::-ms-track {
+					background-color: transparent;
+					border-color: transparent;
+					border-style: solid;
+					border-width: 0;
+					color: transparent;
+					height: 100%;
+				}
+
+				// Webkit
+
+				&::-webkit-slider-runnable-track {
+					-webkit-appearance: none;
+					appearance: none;
+					height: 100%;
+				}
+
+				&::-webkit-slider-thumb {
+					@include clay-css($webkit-slider-thumb);
+				}
+
+				&:hover {
+					@include clay-css($hover);
+
+					~ .clay-range-track {
+						@include clay-css(
+							map-deep-get(
+								$map,
+								form-control-range,
+								hover,
+								clay-range-track
+							)
+						);
+					}
+
+					~ .clay-range-progress {
+						@include clay-css(
+							map-deep-get(
+								$map,
+								form-control-range,
+								hover,
+								clay-range-progress
+							)
+						);
+
+						.clay-range-thumb {
+							@include clay-css($hover-clay-range-thumb);
+						}
+
+						.tooltip {
+							visibility: visible;
+							opacity: 1;
+						}
+					}
+
+					&::-moz-range-thumb {
+						@include clay-css($hover-clay-range-thumb);
+					}
+
+					&::-ms-thumb {
+						@include clay-css($hover-clay-range-thumb);
+					}
+
+					&::-webkit-slider-thumb {
+						@include clay-css($hover-clay-range-thumb);
+					}
+				}
+
+				&:focus,
+				&.focus {
+					@include clay-css($focus);
+
+					~ .clay-range-track {
+						@include clay-css(
+							map-deep-get(
+								$map,
+								form-control-range,
+								focus,
+								clay-range-track
+							)
+						);
+					}
+
+					~ .clay-range-progress {
+						@include clay-css(
+							map-deep-get(
+								$map,
+								form-control-range,
+								focus,
+								clay-range-progress
+							)
+						);
+
+						.clay-range-thumb {
+							@include clay-css($focus-clay-range-thumb);
+						}
+
+						.tooltip {
+							visibility: visible;
+							opacity: 1;
+						}
+					}
+
+					&::-moz-range-thumb {
+						@include clay-css($focus-clay-range-thumb);
+					}
+
+					&::-ms-thumb {
+						@include clay-css($focus-clay-range-thumb);
+					}
+
+					&::-webkit-slider-thumb {
+						@include clay-css($focus-clay-range-thumb);
+					}
+				}
 
-			&::-webkit-slider-thumb {
-				background-color: $disabled-thumb-bg;
-				box-shadow: $disabled-thumb-box-shadow;
+				&:disabled {
+					@include clay-css($disabled);
+
+					~ .clay-range-track {
+						@include clay-css($disabled-clay-range-track);
+					}
+
+					~ .clay-range-progress {
+						@include clay-css($disabled-clay-range-progress);
+
+						.clay-range-thumb {
+							@include clay-css($disabled-clay-range-thumb);
+						}
+					}
+
+					&::-moz-range-thumb {
+						@include clay-css($disabled-clay-range-thumb);
+					}
+
+					&::-ms-thumb {
+						@include clay-css($disabled-clay-range-thumb);
+					}
+
+					&::-webkit-slider-thumb {
+						@include clay-css($disabled-clay-range-thumb);
+					}
+				}
 			}
-		}
-	}
 
-	&[data-label-min],
-	&[data-label-max] {
-		margin-bottom: $data-label-spacer;
-	}
+			&[data-label-min],
+			&[data-label-max] {
+				@include clay-css($data-label-min-max);
+			}
 
-	&[data-label-min]::before {
-		content: $data-label-before-content;
-		left: $data-label-before-left;
-	}
+			&[data-label-min]::before {
+				@include clay-css($data-label-min-before);
+			}
 
-	&[data-label-max]::after {
-		content: $data-label-after-content;
-		right: $data-label-after-right;
-	}
+			&[data-label-max]::after {
+				@include clay-css($data-label-max-after);
+			}
 
-	&::after,
-	&::before {
-		font-size: $data-label-font-size;
-		font-weight: $data-label-font-weight;
-		line-height: $data-label-line-height;
-		margin-top: $data-label-margin-top;
-		position: $data-label-position;
-		text-align: $data-label-text-align;
-		top: $data-label-top;
-		width: $data-label-width;
+			&::after,
+			&::before {
+				@include clay-css($before-after);
+			}
+		}
 	}
 }