////
/// @group Forms
////

@mixin clay-form-control-focus() {
	background-color: $input-focus-bg;
	border-color: $input-focus-border-color;
	box-shadow: $input-focus-box-shadow;
	color: $input-focus-color;
	outline: 0;
}

/// A mixin to create Form Control variants. You can base your variant off Bootstrap's `.form-control` class or create your own base class (e.g., `<input class="form-control my-custom-form-control" type="text" />` or `<input class="my-custom-form-control" type="text" />`).
/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
/// @example
/// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
/// align-items: {String | Null},
/// bg: {Color | String | Null},
/// bg-clip: {String | Null},
/// bg-image: {String | List | Null},
/// bg-position: {String | List | Null},
/// bg-repeat: {String | List | Null},
/// bg-size: {Number | String | List | Null},
/// border-color: {Color | String | List | Null},
/// border-radius: {Number | String | List | Null},
/// border-style: {String | List | Null},
/// border-width: {Number | String | List | Null},
/// box-shadow: {String | List | Null},
/// color: {Color | String | Null},
/// cursor: {String | Null},
/// display: {String | Null},
/// flex-wrap: {String | Null},
/// font-size: {Number | String | Null},
/// font-weight: {Number | String | Null},
/// height: {Number | String | Null},
/// justify-content: {String | Null},
/// line-height: {Number | String | Null},
/// max-width: {Number | String | Null},
/// min-height: {Number | String | Null},
/// min-width: {Number | String | Null},
/// outline: {Number | String | Null},
/// padding-bottom: {Number | String | Null},
/// padding-left: {Number | String | Null},
/// padding-right: {Number | String | Null},
/// padding-top: {Number | String | Null},
/// text-align: {String | Null},
/// text-transform: {String | Null},
/// transition: {String | List | Null},
/// width: {Number | String | Null},
/// placeholder-color: {Color | String | Null},
/// placeholder-opacity: {Number | String | Null},
/// hover-bg: {Color | String | Null},
/// hover-border-color: {Color | String | List | Null},
/// hover-box-shadow: {String | List | Null},
/// hover-color: {Color | String | Null},
/// hover-placeholder-color: {Color | String | Null},
/// focus-bg: {Color | String | Null},
/// focus-bg-image: {String | List | Null},
/// focus-border-color: {Color | String | List | Null},
/// focus-box-shadow: {String | List | Null},
/// focus-color: {Color | String | Null},
/// focus-placeholder-color: {Color | String | Null},
/// readonly-bg: {Color | String | Null}, // deprecated after v2.18.0
/// readonly-bg-image: {String | List | Null}, // deprecated after v2.18.0
/// readonly-border-color: {Color | String | List | Null}, // deprecated after v2.18.0
/// readonly-box-shadow: {String | List | Null}, // deprecated after v2.18.0
/// readonly-color: {Color | String | Null}, // deprecated after v2.18.0
/// readonly-cursor: {String | Null}, // deprecated after v2.18.0
/// readonly-opacity: {Number | String | Null}, // deprecated after v2.18.0
/// readonly-placeholder-color: {Color | String | Null}, // deprecated after v2.18.0
/// disabled-bg: {Color | String | Null},
/// disabled-bg-image: {String | List | Null},
/// disabled-border-color: {Color | String | List | Null},
/// disabled-box-shadow: {String | List | Null},
/// disabled-color: {Color | String | Null},
/// disabled-cursor: {String | Null},
/// disabled-opacity: {Number | String | Null},
/// disabled-placeholder-color: {Color | String | Null},
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-form-control-variant($map) {
	$enabled: setter(map-get($map, enabled), true);

	$align-items: map-get($map, align-items);
	$bg: map-get($map, bg);
	$bg-clip: map-get($map, bg-clip);
	$bg-image: map-get($map, bg-image);
	$bg-position: map-get($map, bg-position);
	$bg-repeat: map-get($map, bg-repeat);
	$bg-size: map-get($map, bg-size);
	$border-color: map-get($map, border-color);
	$border-radius: map-get($map, border-radius);
	$border-style: map-get($map, border-style);
	$border-width: map-get($map, border-width);
	$box-shadow: map-get($map, box-shadow);
	$color: map-get($map, color);
	$cursor: map-get($map, cursor);
	$display: map-get($map, display);
	$flex-wrap: map-get($map, flex-wrap);
	$font-size: map-get($map, font-size);
	$font-weight: map-get($map, font-weight);
	$height: map-get($map, height);
	$justify-content: map-get($map, justify-content);
	$line-height: map-get($map, line-height);
	$max-width: map-get($map, max-width);
	$min-height: map-get($map, min-height);
	$min-width: map-get($map, min-width);
	$outline: map-get($map, outline);
	$padding-bottom: map-get($map, padding-bottom);
	$padding-left: map-get($map, padding-left);
	$padding-right: map-get($map, padding-right);
	$padding-top: map-get($map, padding-top);
	$text-align: map-get($map, text-align);
	$text-transform: map-get($map, text-transform);
	$transition: map-get($map, transition);
	$width: map-get($map, width);
	$placeholder-color: map-get($map, placeholder-color);
	$placeholder-opacity: map-get($map, placeholder-opacity);
	$selection-bg: map-get($map, selection-bg);
	$selection-color: map-get($map, selection-color);

	$hover-bg: map-get($map, hover-bg);
	$hover-border-color: map-get($map, hover-border-color);
	$hover-box-shadow: map-get($map, hover-box-shadow);
	$hover-color: map-get($map, hover-color);
	$hover-placeholder-color: map-get($map, hover-placeholder-color);

	$focus-bg: map-get($map, focus-bg);
	$focus-bg-image: map-get($map, focus-bg-image);
	$focus-border-color: map-get($map, focus-border-color);
	$focus-box-shadow: map-get($map, focus-box-shadow);
	$focus-color: map-get($map, focus-color);
	$focus-placeholder-color: map-get($map, focus-placeholder-color);

	// deprecated after v2.18.0 [readonly] can have hover focus styles, declare a separate selector and use `clay-form-control-variant` mixin (e.g., `.form-control[readonly] { @include clay-form-control-variant($the-readonly-map); }`).

	$readonly-bg: map-get($map, readonly-bg);
	$readonly-bg-image: map-get($map, readonly-bg-image);
	$readonly-border-color: map-get($map, readonly-border-color);
	$readonly-box-shadow: map-get($map, readonly-box-shadow);
	$readonly-color: map-get($map, readonly-color);
	$readonly-cursor: map-get($map, readonly-cursor);
	$readonly-opacity: map-get($map, readonly-opacity);
	$readonly-placeholder-color: map-get($map, readonly-placeholder-color);

	$disabled-bg: map-get($map, disabled-bg);
	$disabled-bg-image: map-get($map, disabled-bg-image);
	$disabled-border-color: map-get($map, disabled-border-color);
	$disabled-box-shadow: map-get($map, disabled-box-shadow);
	$disabled-color: map-get($map, disabled-color);
	$disabled-cursor: map-get($map, disabled-cursor);
	$disabled-opacity: map-get($map, disabled-opacity);
	$disabled-placeholder-color: map-get($map, disabled-placeholder-color);

	@if ($enabled) {
		align-items: $align-items;
		background-color: $bg;
		background-clip: $bg-clip;
		background-image: $bg-image;
		background-position: $bg-position;
		background-repeat: $bg-repeat;
		background-size: $bg-size;
		border-color: $border-color;
		border-radius: $border-radius;
		border-style: $border-style;
		border-width: $border-width;
		box-shadow: $box-shadow;
		color: $color;
		cursor: $cursor;
		display: $display;
		flex-wrap: $flex-wrap;
		font-size: $font-size;
		font-weight: $font-weight;
		height: $height;
		justify-content: $justify-content;
		line-height: $line-height;
		max-width: $max-width;
		min-height: $min-height;
		min-width: $min-width;
		outline: $outline;
		padding-bottom: $padding-bottom;
		padding-left: $padding-left;
		padding-right: $padding-right;
		padding-top: $padding-top;
		text-align: $text-align;
		text-transform: $text-transform;
		transition: $transition;
		width: $width;

		&::placeholder {
			color: $placeholder-color;
			opacity: $placeholder-opacity;
		}

		&::-moz-selection {
			background-color: $selection-bg;
			color: $selection-color;
		}

		&::selection {
			background-color: $selection-bg;
			color: $selection-color;
		}

		&:hover {
			background-color: $hover-bg;
			border-color: $hover-border-color;
			box-shadow: $hover-box-shadow;
			color: $hover-color;

			&::placeholder {
				color: $hover-placeholder-color;
			}
		}

		&:focus,
		&.focus {
			background-color: $focus-bg;
			background-image: $focus-bg-image;
			border-color: $focus-border-color;
			box-shadow: $focus-box-shadow;
			color: $focus-color;

			&::placeholder {
				color: $focus-placeholder-color;
			}
		}

		// @deprecated after v2.18.0 [readonly] can have hover focus styles, declare a separate selector and use `clay-form-control-variant` mixin (e.g., `.form-control[readonly] { @include clay-form-control-variant($the-readonly-map); }`).

		&[readonly] {
			background-color: $readonly-bg;
			background-image: $readonly-bg-image;
			border-color: $readonly-border-color;
			box-shadow: $readonly-box-shadow;
			color: $readonly-color;
			cursor: $readonly-cursor;
			opacity: $readonly-opacity;

			&::placeholder {
				color: $readonly-placeholder-color;
			}
		}

		&:disabled,
		&.disabled {
			background-color: $disabled-bg;
			background-image: $disabled-bg-image;
			border-color: $disabled-border-color;
			box-shadow: $disabled-box-shadow;
			color: $disabled-color;
			cursor: $disabled-cursor;
			opacity: $disabled-opacity;

			&::placeholder {
				color: $disabled-placeholder-color;
			}
		}
	}
}

/// A mixin to create Select Form Control variants. You can base your variant off Bootstrap's `select.form-control` selector or create your own base class (e.g., `<select class="form-control my-custom-form-control"></select>` or `<select class="my-custom-form-control"></select>`).
/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
/// @example
/// appearance: {String | Null},
/// bg: {Color | String | Null},
/// bg-clip: {String | Null},
/// bg-image: {String | List | Null},
/// bg-position: {String | List | Null},
/// bg-repeat: {String | List | Null},
/// bg-size: {Number | String | List | Null},
/// border-color: {Color | String | List | Null},
/// border-radius: {Number | String | List | Null},
/// border-style: {String | List | Null},
/// border-width: {Number | String | List | Null},
/// box-shadow: {String | List | Null},
/// color: {Color | String | Null},
/// cursor: {String | Null},
/// display: {String | Null},
/// font-size: {Number | String | Null},
/// font-weight: {Number | String | Null},
/// height: {Number | String | Null},
/// line-height: {Number | String | Null},
/// min-width: {Number | String | Null},
/// outline: {Number | String | Null},
/// padding-bottom: {Number | String | Null},
/// padding-left: {Number | String | Null},
/// padding-right: {Number | String | Null},
/// padding-top: {Number | String | Null},
/// transition: {String | List | Null},
/// width: {Number | String | Null},
/// hover-bg: {Color | String | Null},
/// hover-border-color: {Color | String | List | Null},
/// hover-box-shadow: {String | List | Null},
/// hover-color: {Color | String | Null},
/// focus-bg: {Color | String | Null},
/// focus-bg-image: {String | List | Null},
/// focus-border-color: {Color | String | List | Null},
/// focus-box-shadow: {String | List | Null},
/// focus-color: {Color | String | Null},
/// disabled-bg: {Color | String | Null},
/// disabled-bg-image: {String | List | Null},
/// disabled-border-color: {Color | String | List | Null},
/// disabled-box-shadow: {String | List | Null},
/// disabled-color: {Color | String | Null},
/// disabled-cursor: {String | Null},
/// disabled-opacity: {Number | String | Null},
/// @todo
/// - Add @example
/// - Add @link to documentation

@mixin clay-select-variant($map) {
	$appearance: map-get($map, appearance);
	$bg: map-get($map, bg);
	$bg-clip: map-get($map, bg-clip);
	$bg-image: map-get($map, bg-image);
	$bg-position: map-get($map, bg-position);
	$bg-repeat: map-get($map, bg-repeat);
	$bg-size: map-get($map, bg-size);
	$border-color: map-get($map, border-color);
	$border-radius: map-get($map, border-radius);
	$border-style: map-get($map, border-style);
	$border-width: map-get($map, border-width);
	$box-shadow: map-get($map, box-shadow);
	$color: map-get($map, color);
	$cursor: map-get($map, cursor);
	$display: map-get($map, display);
	$font-size: map-get($map, font-size);
	$font-weight: map-get($map, font-weight);
	$height: map-get($map, height);
	$line-height: map-get($map, line-height);
	$min-width: map-get($map, min-width);
	$outline: map-get($map, outline);
	$padding-bottom: map-get($map, padding-bottom);
	$padding-left: map-get($map, padding-left);
	$padding-right: map-get($map, padding-right);
	$padding-top: map-get($map, padding-top);
	$transition: map-get($map, transition);
	$width: map-get($map, width);

	$hover-bg: map-get($map, hover-bg);
	$hover-border-color: map-get($map, hover-border-color);
	$hover-box-shadow: map-get($map, hover-box-shadow);
	$hover-color: map-get($map, hover-color);

	$focus-bg: map-get($map, focus-bg);
	$focus-bg-image: map-get($map, focus-bg-image);
	$focus-border-color: map-get($map, focus-border-color);
	$focus-box-shadow: map-get($map, focus-box-shadow);
	$focus-color: map-get($map, focus-color);

	$disabled-bg: map-get($map, disabled-bg);
	$disabled-bg-image: map-get($map, disabled-bg-image);
	$disabled-border-color: map-get($map, disabled-border-color);
	$disabled-box-shadow: map-get($map, disabled-box-shadow);
	$disabled-color: map-get($map, disabled-color);
	$disabled-cursor: map-get($map, disabled-cursor);
	$disabled-opacity: map-get($map, disabled-opacity);

	background-clip: $bg-clip;
	border-color: $border-color;
	border-radius: $border-radius;
	border-style: $border-style;
	border-width: $border-width;
	box-shadow: $box-shadow;
	color: $color;
	cursor: $cursor;
	display: $display;
	font-size: $font-size;
	font-weight: $font-weight;
	line-height: $line-height;
	min-width: $min-width;
	outline: $outline;
	transition: $transition;
	width: $width;

	&:not([multiple]):not([size]) {
		-moz-appearance: $appearance;
		-webkit-appearance: $appearance;

		@if ($appearance) {
			&::-ms-expand {
				display: none;
			}
		}

		background-color: $bg;
		background-image: $bg-image;
		background-position: $bg-position;
		background-repeat: $bg-repeat;
		background-size: $bg-size;
		height: $height;
		padding-bottom: $padding-bottom;
		padding-left: $padding-left;
		padding-right: $padding-right;
		padding-top: $padding-top;

		&:hover {
			background-color: $hover-bg;
		}

		&:focus {
			background-color: $focus-bg;
			background-image: $focus-bg-image;
		}

		&:disabled {
			background-color: $disabled-bg;
			background-image: $disabled-bg-image;
		}
	}

	&:hover {
		border-color: $hover-border-color;
		box-shadow: $hover-box-shadow;
		color: $hover-color;
	}

	&:focus {
		border-color: $focus-border-color;
		box-shadow: $focus-box-shadow;
		color: $focus-color;

		&::-ms-value {
			// Suppress the nested default white text on blue background highlight given to
			// the selected option text when the (still closed) <select> receives focus
			// in IE and (under certain conditions) Edge, as it looks bad and cannot be made to
			// match the appearance of the native widget.
			// See https://github.com/twbs/bootstrap/issues/19398.

			background-color: $bg;
			color: $color;
		}
	}

	&:disabled {
		border-color: $disabled-border-color;
		box-shadow: $disabled-box-shadow;
		color: $disabled-color;
		cursor: $disabled-cursor;
		opacity: $disabled-opacity;

		> option {
			@media (-webkit-min-device-pixel-ratio: 0) { // Webkit only
				color: $disabled-color;
			}
		}
	}

	option {
		cursor: $input-select-cursor;
	}
}

/// 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},
/// thumb-bg: {Color | String | Null},
/// thumb-bg-image: {String | List | Null},
/// thumb-border-radius: {Number | String | List | Null},
/// thumb-border-color: {Color | String | List | Null},
/// thumb-border-style: {String | List | Null},
/// thumb-border-width: {Number | String | List | Null},
/// thumb-box-shadow: {String | List | Null},
/// thumb-height: {Number | String | Null},
/// thumb-width: {Number | String | Null},
/// track-bg: {Color | String | Null},
/// track-bg-image: {String | List | Null},
/// track-border-color: {Color | String | List | Null},
/// track-border-radius: {Number | String | List | Null},
/// track-border-style: {String | List | Null},
/// track-border-width: {Number | String | List | Null},
/// track-height: {Number | String | Null},
/// track-margin-top: {Number | String | Null},
/// track-position: {String | Null},
/// track-top: {Number | String | Null},
/// track-width: {Number | String | Null},
/// progress-bg: {Color | String | Null},
/// progress-bg-image: {String | List | Null},
/// progress-border-color: {Color | String | Null},
/// progress-border-radius: {Number | String | List | Null},
/// progress-border-style: {String | List | Null},
/// progress-border-width: {Number | String | Null},
/// progress-height: {Number | String | Null},
/// progress-margin-top: {Number | String | Null},
/// progress-position: {String | Null},
/// progress-top: {Number | String | Null},
/// progress-width: {Number | String | Null},
/// tooltip-bg: {Color | String | Null},
/// tooltip-color: {Color | String | Null},
/// tooltip-line-height: {Number | String | Null},
/// tooltip-padding: {Number | String | List | Null},
/// tooltip-padding-bottom: {Number | String | Null},
/// tooltip-padding-left: {Number | String | Null},
/// tooltip-padding-right: {Number | String | Null},
/// tooltip-padding-top: {Number | String | Null},
/// tooltip-spacer-x: {Number | String | Null},
/// tooltip-spacer-y: {Number | String | Null},
/// tooltip-transition: {String | List | Null},
/// tooltip-visibility: {String | Null},
/// tooltip-white-space: {String | Null},
/// tooltip-arrow-border-color: {Color | String | List | Null},
/// tooltip-arrow-border-style: {String | List | Null},
/// tooltip-arrow-border-width: {Number | String | List | Null},
/// tooltip-arrow-offset: {Number | String | Null},
/// tooltip-arrow-size: {Number | String | Null},
/// form-control-appearance: {String | Null},
/// form-control-bg: {Color | String | Null},
/// form-control-height: {Number | String | Null},
/// form-control-position: {String | Null},
/// form-control-z-index: {Number | String | Null},
/// data-label-font-size: {Number | String | Null},
/// data-label-font-weight: {Number | String | Null},
/// data-label-line-height: {Number | String | Null},
/// data-label-margin-top: {Number | String | Null},
/// data-label-position: {String | Null},
/// data-label-spacer: {Number | String | Null},
/// data-label-text-align: {String | Null},
/// data-label-top: {Number | String | Null},
/// data-label-width: {Number | String | Null},
/// data-label-before-content: {Number | String | Null},
/// data-label-before-left: {Number | String | Null},
/// data-label-after-content: {Number | String | Null},
/// data-label-after-right: {Number | String | Null},
/// hover-cursor: {String | Null},
/// hover-thumb-bg: {Color | String | Null},
/// focus-outline: {Number | String | List | Null},
/// focus-thumb-box-shadow: {String | List | Null},
/// disabled-color: {Color | String | Null},
/// disabled-cursor: {String | Null},
/// disabled-thumb-bg: {Color | String | Null},
/// disabled-thumb-box-shadow: {String | List | Null},
/// disabled-progress-bg: {Color | String | Null},
/// 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-radius: map-get($map, thumb-border-radius);
	$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-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 / 2);
	}

	$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 / 2);
	}

	$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 / 2;
	}

	@if ($thumb-width and $tooltip-spacer-x == null) {
		$tooltip-spacer-x: $thumb-width / 2;
	}

	$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;
	}

	.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;
	}

	.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-tooltip-bottom {
		margin-top: $tooltip-spacer-y;
		padding-top: $tooltip-arrow-offset;
		top: 100%;
		transform: translateX(-50%);

		.tooltip-arrow {
			margin-left: math-sign($tooltip-arrow-offset);
		}
	}

	.clay-tooltip-top {
		bottom: 100%;
		margin-bottom: $tooltip-spacer-y;
		padding-bottom: $tooltip-arrow-offset;
		transform: translateX(-50%);

		.tooltip-arrow {
			margin-left: math-sign($tooltip-arrow-offset);
		}
	}

	.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;
	}

	.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;
	}

	.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;
		width: $thumb-width;

		position: absolute;
		margin-top: math-sign($thumb-height / 2);
		right: math-sign($thumb-width / 2);
		top: 50%;
	}

	.form-control-range {
		content: '#{$thumb-width}';
		-moz-appearance: $form-control-appearance;
		-webkit-appearance: $form-control-appearance;
		appearance: $form-control-appearance;
		background-color: $form-control-bg;
		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;
			}
		}

		&::-moz-range-thumb {
			-moz-appearance: none;
			appearance: none;
			border-width: 0;
			height: 1px;
			width: 1px;
		}

		&::-moz-range-track {
			-moz-appearance: none;
			appearance: none;
			height: 100%;
		}

		// IE Edge

		&::-ms-fill-lower {
			background-color: transparent;
		}

		&::-ms-fill-upper {
			background-color: transparent;
		}

		&::-ms-thumb {
			appearance: none;
			background-color: transparent;
			border-width: 0;
			height: 10px;
			width: 10px;
		}

		&::-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 {
			-webkit-appearance: none;
			appearance: none;
			height: 1px;
			width: 1px;
		}

		&:hover {
			cursor: $hover-cursor;

			~ .clay-range-progress {
				.clay-range-thumb {
					background-color: $hover-thumb-bg;
				}

				.tooltip {
					visibility: visible;
					opacity: 1;
				}
			}
		}

		&:focus,
		&.focus {
			outline: $focus-outline;

			~ .clay-range-progress {
				.clay-range-thumb {
					box-shadow: $focus-thumb-box-shadow;
				}

				.tooltip {
					visibility: visible;
					opacity: 1;
				}
			}
		}

		&:disabled {
			color: $disabled-color;
			cursor: $disabled-cursor;

			~ .clay-range-track {
				background-color: $disabled-track-bg;
			}

			~ .clay-range-progress {
				background-color: $disabled-progress-bg;

				.clay-range-thumb {
					background-color: $disabled-thumb-bg;
					box-shadow: $disabled-thumb-box-shadow;
				}
			}
		}
	}

	&[data-label-min],
	&[data-label-max] {
		margin-bottom: $data-label-spacer;
	}

	&[data-label-min]::before {
		content: $data-label-before-content;
		left: $data-label-before-left;
	}

	&[data-label-max]::after {
		content: $data-label-after-content;
		right: $data-label-after-right;
	}

	&::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;
	}
}