@clayui/css 3.40.1 → 3.44.0

package/src/scss/mixins/_forms.scss

@@ -205,26 +205,65 @@
 /// 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
-/// See Mixin `clay-css` for available keys to pass into the base selector
-/// enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
+/// 	// .form-control
+/// 	placeholder: (
+/// 		// .form-control::placeholder
+/// 	),
+/// 	selection: (
+/// 		// .form-control::-moz-selection, .form-control::selection
+/// 	),
+/// 	input-group-inset-item: (
+/// 		// .form-control ~ .input-group-inset-item
+/// 	),
+/// 	hover: (
+/// 		// .form-control:hover
+/// 		placeholder: (
+/// 			// .form-control:hover::placeholder
+/// 		),
+/// 		input-group-inset-item: (
+/// 			// .form-control:hover ~ .input-group-inset-item
+/// 		),
+/// 	),
+/// 	focus: (
+/// 		// .form-control:focus, .form-control.focus
+/// 		placeholder: (
+/// 			// .form-control:focus::placeholder,
+/// 			// .form-control.focus::placeholder
+/// 		),
+/// 		input-group-inset-item: (
+/// 			// .form-control:focus ~ .input-group-inset-item,
+/// 			// .form-control.focus ~ .input-group-inset-item
+/// 		),
+/// 	),
+/// 	disabled: (
+/// 		// .form-control:disabled, .form-control.disabled
+/// 		placeholder: (
+/// 			// .form-control:disabled::placeholder,
+/// 			// .form-control.disabled::placeholder
+/// 		),
+/// 		input-group-inset-item: (
+/// 			// .form-control:disabled ~ .input-group-inset-item,
+/// 			// .form-control.disabled ~ .input-group-inset-item
+/// 		),
+/// 	),
+/// )
+/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
 /// placeholder-color: {Color | String | Null}, // deprecated after 3.7.0
 /// placeholder-opacity: {Number | String | Null}, // deprecated after 3.7.0
-/// placeholder: {Map | Null}, // See Mixin `clay-css` for available keys
 /// selection-bg: {Color | String | Null}, // deprecated after 3.7.0
 /// selection-color: {Color | String | Null}, // deprecated after 3.7.0
-/// selection: {Map | Null}, // See Mixin `clay-css` for available keys
 /// hover-bg: {Color | String | Null}, // deprecated after 3.7.0
 /// hover-border-color: {Color | String | List | Null}, // deprecated after 3.7.0
 /// hover-box-shadow: {String | List | Null}, // deprecated after 3.7.0
 /// hover-color: {Color | String | Null}, // deprecated after 3.7.0
 /// hover-placeholder-color: {Color | String | Null}, // deprecated after 3.7.0
-/// hover: {Map | Null}, // See Mixin `clay-css` for available keys
 /// focus-bg: {Color | String | Null}, // deprecated after 3.7.0
 /// focus-bg-image: {String | List | Null}, // deprecated after 3.7.0
 /// focus-border-color: {Color | String | List | Null}, // deprecated after 3.7.0
 /// focus-box-shadow: {String | List | Null}, // deprecated after 3.7.0
 /// focus-color: {Color | String | Null}, // deprecated after 3.7.0
-/// focus: {Map | Null}, // See Mixin `clay-css` for available keys
 /// focus-placeholder-color: {Color | String | Null}, // deprecated after 3.7.0
 /// focus-placeholder: {Map | Null}, // See Mixin `clay-css` for available keys
 /// readonly-bg: {Color | String | Null}, // deprecated after v2.18.0
@@ -242,288 +281,325 @@
 /// disabled-color: {Color | String | Null}, // deprecated after 3.7.0
 /// disabled-cursor: {String | Null}, // deprecated after 3.7.0
 /// disabled-opacity: {Number | String | Null}, // deprecated after 3.7.0
-/// disabled: {Map | Null}, // See Mixin `clay-css` for available keys
 /// disabled-placeholder-color: {Color | String | Null}, // deprecated after 3.7.0
 /// disabled-placeholder: {Map | Null}, // See Mixin `clay-css` for available keys
-/// @todo
-/// - Add @example
-/// - Add @link to documentation
 
 @mixin clay-form-control-variant($map) {
-	$enabled: setter(map-get($map, enabled), true);
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
+
+		$base: setter($map, ());
+		$base: map-merge(
+			$map,
+			(
+				background-color:
+					setter(map-get($map, bg), map-get($map, background-color)),
+				background-clip:
+					setter(
+						map-get($map, bg-clip),
+						map-get($map, background-clip)
+					),
+				background-image:
+					setter(
+						map-get($map, bg-image),
+						map-get($map, background-image)
+					),
+				background-position:
+					setter(
+						map-get($map, bg-position),
+						map-get($map, background-position)
+					),
+				background-repeat:
+					setter(
+						map-get($map, bg-repeat),
+						map-get($map, background-repeat)
+					),
+				background-size:
+					setter(
+						map-get($map, bg-size),
+						map-get($map, background-size)
+					),
+			)
+		);
 
-	$base: setter($map, ());
-	$base: map-merge(
-		$map,
-		(
-			background-color:
-				setter(map-get($map, bg), map-get($map, background-color)),
-			background-clip:
-				setter(map-get($map, bg-clip), map-get($map, background-clip)),
-			background-image:
-				setter(map-get($map, bg-image), map-get($map, background-image)),
-			background-position:
-				setter(
-					map-get($map, bg-position),
-					map-get($map, background-position)
-				),
-			background-repeat:
-				setter(
-					map-get($map, bg-repeat),
-					map-get($map, background-repeat)
-				),
-			background-size:
-				setter(map-get($map, bg-size), map-get($map, background-size)),
-		)
-	);
+		$placeholder: setter(map-get($map, placeholder), ());
+		$placeholder: map-deep-merge(
+			$placeholder,
+			(
+				color:
+					setter(
+						map-get($map, placeholder-color),
+						map-get($placeholder, color)
+					),
+				opacity:
+					setter(
+						map-get($map, placeholder-opacity),
+						map-get($placeholder, opacity)
+					),
+			)
+		);
 
-	$placeholder: setter(map-get($map, placeholder), ());
-	$placeholder: map-deep-merge(
-		$placeholder,
-		(
-			color:
-				setter(
-					map-get($map, placeholder-color),
-					map-get($placeholder, color)
-				),
-			opacity:
-				setter(
-					map-get($map, placeholder-opacity),
-					map-get($placeholder, opacity)
-				),
-		)
-	);
+		$selection: setter(map-get($map, selection), ());
+		$selection: map-deep-merge(
+			$selection,
+			(
+				background-color:
+					setter(
+						map-get($map, selection-bg),
+						map-get($selection, background-color)
+					),
+				color:
+					setter(
+						map-get($map, selection-color),
+						map-get($selection, color)
+					),
+			)
+		);
 
-	$selection: setter(map-get($map, selection), ());
-	$selection: map-deep-merge(
-		$selection,
-		(
-			background-color:
-				setter(
-					map-get($map, selection-bg),
-					map-get($selection, background-color)
-				),
-			color:
-				setter(
-					map-get($map, selection-color),
-					map-get($selection, color)
-				),
-		)
-	);
+		$hover: setter(map-get($map, hover), ());
+		$hover: map-deep-merge(
+			$hover,
+			(
+				background-color:
+					setter(
+						map-get($map, hover-bg),
+						map-get($hover, background-color)
+					),
+				border-color:
+					setter(
+						map-get($map, hover-border-color),
+						map-get($hover, border-color)
+					),
+				box-shadow:
+					setter(
+						map-get($map, hover-box-shadow),
+						map-get($hover, box-shadow)
+					),
+				color:
+					setter(map-get($map, hover-color), map-get($hover, color)),
+			)
+		);
 
-	$hover: setter(map-get($map, hover), ());
-	$hover: map-deep-merge(
-		$hover,
-		(
-			background-color:
-				setter(
-					map-get($map, hover-bg),
-					map-get($hover, background-color)
-				),
-			border-color:
-				setter(
-					map-get($map, hover-border-color),
-					map-get($hover, border-color)
-				),
-			box-shadow:
-				setter(
-					map-get($map, hover-box-shadow),
-					map-get($hover, box-shadow)
-				),
-			color: setter(map-get($map, hover-color), map-get($hover, color)),
-		)
-	);
+		$old-hover-placeholder: setter(map-get($map, hover-placeholder), ());
+		$hover-placeholder: setter(map-get($hover, placeholder), ());
+		$hover-placeholder: map-deep-merge(
+			$hover-placeholder,
+			$old-hover-placeholder
+		);
+		$hover-placeholder: map-deep-merge(
+			$hover-placeholder,
+			(
+				color:
+					setter(
+						map-get($map, hover-placeholder-color),
+						map-get($hover-placeholder, color)
+					),
+			)
+		);
 
-	$old-hover-placeholder: setter(map-get($map, hover-placeholder), ());
-	$hover-placeholder: setter(map-get($hover, placeholder), ());
-	$hover-placeholder: map-deep-merge(
-		$hover-placeholder,
-		$old-hover-placeholder
-	);
-	$hover-placeholder: map-deep-merge(
-		$hover-placeholder,
-		(
-			color:
-				setter(
-					map-get($map, hover-placeholder-color),
-					map-get($hover-placeholder, color)
-				),
-		)
-	);
+		$focus: setter(map-get($map, focus), ());
+		$focus: map-deep-merge(
+			$focus,
+			(
+				background-color:
+					setter(
+						map-get($map, focus-bg),
+						map-get($focus, background-color)
+					),
+				background-image:
+					setter(
+						map-get($map, focus-bg-image),
+						map-get($focus, background-image)
+					),
+				border-color:
+					setter(
+						map-get($map, focus-border-color),
+						map-get($focus, border-color)
+					),
+				box-shadow:
+					setter(
+						map-get($map, focus-box-shadow),
+						map-get($focus, box-shadow)
+					),
+				color:
+					setter(map-get($map, focus-color), map-get($focus, color)),
+			)
+		);
 
-	$focus: setter(map-get($map, focus), ());
-	$focus: map-deep-merge(
-		$focus,
-		(
-			background-color:
-				setter(
-					map-get($map, focus-bg),
-					map-get($focus, background-color)
-				),
-			background-image:
-				setter(
-					map-get($map, focus-bg-image),
-					map-get($focus, background-image)
-				),
-			border-color:
-				setter(
-					map-get($map, focus-border-color),
-					map-get($focus, border-color)
-				),
-			box-shadow:
-				setter(
-					map-get($map, focus-box-shadow),
-					map-get($focus, box-shadow)
-				),
-			color: setter(map-get($map, focus-color), map-get($focus, color)),
-		)
-	);
+		$old-focus-placeholder: setter(map-get($map, focus-placeholder), ());
+		$focus-placeholder: setter(map-get($focus, placeholder), ());
+		$focus-placeholder: map-deep-merge(
+			$focus-placeholder,
+			$old-focus-placeholder
+		);
+		$focus-placeholder: map-deep-merge(
+			$focus-placeholder,
+			(
+				color:
+					setter(
+						map-get($map, focus-placeholder-color),
+						map-get($focus-placeholder, color)
+					),
+			)
+		);
 
-	$old-focus-placeholder: setter(map-get($map, focus-placeholder), ());
-	$focus-placeholder: setter(map-get($focus, placeholder), ());
-	$focus-placeholder: map-deep-merge(
-		$focus-placeholder,
-		$old-focus-placeholder
-	);
-	$focus-placeholder: map-deep-merge(
-		$focus-placeholder,
-		(
-			color:
-				setter(
-					map-get($map, focus-placeholder-color),
-					map-get($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: setter(map-get($map, disabled), ());
+		$disabled: map-deep-merge(
+			$disabled,
+			(
+				background-color:
+					setter(
+						map-get($map, disabled-bg),
+						map-get($disabled, background-color)
+					),
+				background-image:
+					setter(
+						map-get($map, disabled-bg-image),
+						map-get($disabled, background-image)
+					),
+				border-color:
+					setter(
+						map-get($map, disabled-border-color),
+						map-get($disabled, border-color)
+					),
+				box-shadow:
+					setter(
+						map-get($map, disabled-box-shadow),
+						map-get($disabled, box-shadow)
+					),
+				color:
+					setter(
+						map-get($map, disabled-color),
+						map-get($disabled, color)
+					),
+				cursor:
+					setter(
+						map-get($map, disabled-cursor),
+						map-get($disabled, cursor)
+					),
+				opacity:
+					setter(
+						map-get($map, disabled-opacity),
+						map-get($disabled, opacity)
+					),
+			)
+		);
 
-	// 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); }`).
+		$old-disabled-placeholder: setter(
+			map-get($map, disabled-placeholder),
+			()
+		);
+		$disabled-placeholder: setter(map-get($disabled, placeholder), ());
+		$disabled-placeholder: map-deep-merge(
+			$disabled-placeholder,
+			$old-disabled-placeholder
+		);
+		$disabled-placeholder: map-deep-merge(
+			$disabled-placeholder,
+			(
+				color:
+					setter(
+						map-get($map, disabled-placeholder-color),
+						map-get($disabled-placeholder, color)
+					),
+			)
+		);
 
-	$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);
+		@if ($enabled) {
+			@include clay-css($base);
 
-	$disabled: setter(map-get($map, disabled), ());
-	$disabled: map-deep-merge(
-		$disabled,
-		(
-			background-color:
-				setter(
-					map-get($map, disabled-bg),
-					map-get($disabled, background-color)
-				),
-			background-image:
-				setter(
-					map-get($map, disabled-bg-image),
-					map-get($disabled, background-image)
-				),
-			border-color:
-				setter(
-					map-get($map, disabled-border-color),
-					map-get($disabled, border-color)
-				),
-			box-shadow:
-				setter(
-					map-get($map, disabled-box-shadow),
-					map-get($disabled, box-shadow)
-				),
-			color:
-				setter(map-get($map, disabled-color), map-get($disabled, color)),
-			cursor:
-				setter(
-					map-get($map, disabled-cursor),
-					map-get($disabled, cursor)
-				),
-			opacity:
-				setter(
-					map-get($map, disabled-opacity),
-					map-get($disabled, opacity)
-				),
-		)
-	);
-
-	$old-disabled-placeholder: setter(map-get($map, disabled-placeholder), ());
-	$disabled-placeholder: setter(map-get($disabled, placeholder), ());
-	$disabled-placeholder: map-deep-merge(
-		$disabled-placeholder,
-		$old-disabled-placeholder
-	);
-	$disabled-placeholder: map-deep-merge(
-		$disabled-placeholder,
-		(
-			color:
-				setter(
-					map-get($map, disabled-placeholder-color),
-					map-get($disabled-placeholder, color)
-				),
-		)
-	);
+			&::placeholder {
+				// opacity: 1, override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
 
-	@if ($enabled) {
-		@include clay-css($base);
+				@include clay-css($placeholder);
+			}
 
-		&::placeholder {
-			// opacity: 1, override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
+			&::-moz-selection,
+			&::selection {
+				@include clay-css($selection);
+			}
 
-			@include clay-css($placeholder);
-		}
+			~ .input-group-inset-item {
+				@include clay-css(map-deep-get($map, input-group-inset-item));
+			}
 
-		&::-moz-selection,
-		&::selection {
-			@include clay-css($selection);
-		}
+			&:hover {
+				@include clay-css($hover);
 
-		&:hover {
-			@include clay-css($hover);
+				&::placeholder {
+					@include clay-css($hover-placeholder);
+				}
 
-			&::placeholder {
-				@include clay-css($hover-placeholder);
+				~ .input-group-inset-item {
+					@include clay-css(
+						map-deep-get($map, hover, input-group-inset-item)
+					);
+				}
 			}
-		}
 
-		&:focus,
-		&.focus {
-			@include clay-css($focus);
+			&:focus,
+			&.focus {
+				@include clay-css($focus);
 
-			&::placeholder {
-				@include clay-css($focus-placeholder);
+				&::placeholder {
+					@include clay-css($focus-placeholder);
+				}
+
+				~ .input-group-inset-item {
+					@include clay-css(
+						map-deep-get($map, focus, input-group-inset-item)
+					);
+				}
 			}
-		}
 
-		// @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); }`).
+			// @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;
+			&[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;
+				&::placeholder {
+					color: $readonly-placeholder-color;
+				}
 			}
-		}
 
-		// Disabled
-		// HTML5 says that controls under a fieldset > legend:first-child won't be
-		// disabled if the fieldset is disabled. Due to implementation difficulty, we
-		// don't honor that edge case; we style them as disabled anyway.
+			// Disabled
+			// HTML5 says that controls under a fieldset > legend:first-child won't be
+			// disabled if the fieldset is disabled. Due to implementation difficulty, we
+			// don't honor that edge case; we style them as disabled anyway.
 
-		&:disabled,
-		&.disabled {
-			// `opacity: 1;` iOS fix for unreadable disabled content;
-			// see https://github.com/twbs/bootstrap/issues/11655.
+			&:disabled,
+			&.disabled {
+				// `opacity: 1;` iOS fix for unreadable disabled content;
+				// see https://github.com/twbs/bootstrap/issues/11655.
 
-			@include clay-css($disabled);
+				@include clay-css($disabled);
 
-			&::placeholder {
-				@include clay-css($disabled-placeholder);
+				&::placeholder {
+					@include clay-css($disabled-placeholder);
+				}
+
+				~ .input-group-inset-item {
+					@include clay-css(
+						map-deep-get($map, disabled, input-group-inset-item)
+					);
+				}
 			}
 		}
 	}
@@ -532,18 +608,62 @@
 /// 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
-/// See Mixin `clay-css` for available keys to pass into the base selector
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
+/// 	// select.form-control
+/// 	hover: (
+/// 		// select.form-control:hover
+/// 		option: (
+/// 			// select.form-control:hover > option
+/// 			checked: (
+/// 				// select.form-control:hover > option:checked
+/// 			),
+/// 		),
+/// 	),
+/// 	focus: (
+/// 		// select.form-control:focus,
+/// 		// select.form-control.focus
+/// 		option: (
+/// 			// select.form-control:focus > option,
+/// 			// select.form-control.focus > option
+/// 			checked: (
+/// 				// select.form-control:focus > option:checked,
+/// 				// select.form-control.focus > option:checked
+/// 			),
+/// 		),
+/// 	),
+/// 	disabled: (
+/// 		// select.form-control:disabled,
+/// 		// select.form-control.disabled
+/// 		option: (
+/// 			// select.form-control:disabled > option,
+/// 			// select.form-control.disabled > option
+/// 			checked: (
+/// 				// select.form-control:disabled > option:checked,
+/// 				// select.form-control.disabled > option:checked
+/// 			),
+/// 		),
+/// 	),
+/// 	option: (
+/// 		// select.form-control option
+/// 		checked: (
+/// 			// select.form-control option:checked
+/// 		),
+/// 	),
+/// 	firefox-only: (
+/// 		// Same selectors as above scoped only for firefox browsers
+/// 	),
+/// )
+/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
 /// hover-bg: {Color | String | Null}, // deprecated after 3.7.0
 /// hover-border-color: {Color | String | List | Null}, // deprecated after 3.7.0
 /// hover-box-shadow: {String | List | Null}, // deprecated after 3.7.0
 /// hover-color: {Color | String | Null}, // deprecated after 3.7.0
-/// hover: {Map | Null}, // See Mixin `clay-css` for available keys
 /// focus-bg: {Color | String | Null}, // deprecated after 3.7.0
 /// focus-bg-image: {String | List | Null}, // deprecated after 3.7.0
 /// focus-border-color: {Color | String | List | Null}, // deprecated after 3.7.0
 /// focus-box-shadow: {String | List | Null}, // deprecated after 3.7.0
 /// focus-color: {Color | String | Null}, // deprecated after 3.7.0
-/// focus: {Map | Null}, // See Mixin `clay-css` for available keys
 /// disabled-bg: {Color | String | Null}, // deprecated after 3.7.0
 /// disabled-bg-image: {String | List | Null}, // deprecated after 3.7.0
 /// disabled-border-color: {Color | String | List | Null}, // deprecated after 3.7.0
@@ -551,7 +671,6 @@
 /// disabled-color: {Color | String | Null}, // deprecated after 3.7.0
 /// disabled-cursor: {String | Null}, // deprecated after 3.7.0
 /// disabled-opacity: {Number | String | Null}, // deprecated after 3.7.0
-/// disabled: {Map | Null}, // See Mixin `clay-css` for available keys
 /// @todo
 /// - Add @example
 /// - Add @link to documentation
@@ -702,11 +821,27 @@
 
 		&:hover {
 			@include clay-css($hover);
+
+			> option {
+				@include clay-css(map-get($hover, option));
+
+				&:checked {
+					@include clay-css(map-deep-get($hover, option, checked));
+				}
+			}
 		}
 
 		&:focus,
 		&.focus {
 			@include clay-css($focus);
+
+			> option {
+				@include clay-css(map-get($focus, option));
+
+				&:checked {
+					@include clay-css(map-deep-get($focus, option, checked));
+				}
+			}
 		}
 
 		&:disabled,
@@ -715,11 +850,367 @@
 
 			> option {
 				@include clay-css($disabled-option);
+
+				&:checked {
+					@include clay-css(map-get($disabled-option, checked));
+				}
 			}
 		}
 
 		option {
 			@include clay-css($option);
+
+			&:checked {
+				@include clay-css(map-get($option, checked));
+			}
+		}
+
+		@if (map-get($map, firefox-only)) {
+			@-moz-document url-prefix() {
+				@include clay-css(map-get($map, firefox-only));
+
+				&:hover {
+					@include clay-css(map-deep-get($map, firefox-only, hover));
+
+					> option {
+						@include clay-css(
+							map-deep-get($map, firefox-only, hover, option)
+						);
+
+						&:checked {
+							@include clay-css(
+								map-deep-get(
+									$map,
+									firefox-only,
+									hover,
+									option,
+									checked
+								)
+							);
+						}
+					}
+				}
+
+				&:focus,
+				&.focus {
+					@include clay-css(map-deep-get($map, firefox-only, focus));
+
+					> option {
+						@include clay-css(
+							map-deep-get($map, firefox-only, focus, option)
+						);
+
+						&:checked {
+							@include clay-css(
+								map-deep-get(
+									$map,
+									firefox-only,
+									focus,
+									option,
+									checked
+								)
+							);
+						}
+					}
+				}
+
+				&:disabled,
+				&.disabled {
+					@include clay-css(
+						map-deep-get($map, firefox-only, disabled)
+					);
+
+					> option {
+						@include clay-css(
+							map-deep-get($map, firefox-only, disabled, option)
+						);
+
+						&:checked {
+							@include clay-css(
+								map-deep-get(
+									$map,
+									firefox-only,
+									disabled,
+									option,
+									checked
+								)
+							);
+						}
+					}
+				}
+
+				option {
+					@include clay-css(map-deep-get($map, firefox-only, option));
+
+					&:checked {
+						@include clay-css(
+							map-deep-get($map, firefox-only, option, checked)
+						);
+					}
+				}
+			}
+		}
+	}
+}
+
+/// A mixin to create Form Validation variants (e.g., `.has-error`).
+/// @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
+/// 	label: (
+/// 		// .has-error label
+/// 	),
+/// 	custom-control-label: (
+/// 		// .has-error .custom-control-label, .has-error .form-check-label
+/// 	),
+/// 	form-control: (
+/// 		// .has-error .form-control
+/// 		readonly: (
+/// 			// .has-error .form-control[readonly]
+/// 		),
+/// 	),
+/// 	form-feedback-group: (
+/// 		// .has-error .form-feedback-group
+/// 	),
+/// 	form-feedback-item: (
+/// 		// .has-error .form-feedback-item
+/// 	),
+/// 	form-feedback-indicator: (
+/// 		// .has-error .form-feedback-indicator
+/// 	),
+/// 	form-feedback-text: (
+/// 		// .has-error .form-feedback-text
+/// 	),
+/// 	select: (
+/// 		// N/A
+/// 		form-control: (
+/// 			// .has-error select.form-control
+/// 			multiple: (
+/// 				// .has-error select.form-control[multiple]
+/// 			),
+/// 			size: (
+/// 				// .has-error select.form-control[size]
+/// 			),
+/// 		),
+/// 	),
+/// 	input-group-item: (
+/// 		// .has-error .input-group-item
+/// 		hover: (
+/// 			// .has-error .input-group-item:hover
+/// 			input-group-inset: (
+/// 				// .has-error .input-group-item:hover .input-group-inset
+/// 				input-group-inset-item: (
+/// 					// .has-error .input-group-item:hover .input-group-inset ~ .input-group-inset-item
+/// 				),
+/// 			),
+/// 		),
+/// 		focus: (
+/// 			// .has-error .input-group-item.focus
+/// 			input-group-inset: (
+/// 				// .has-error .input-group-item.focus .input-group-inset
+/// 				input-group-inset-item: (
+/// 					// .has-error .input-group-item.focus .input-group-inset ~ .input-group-inset-item
+/// 				),
+/// 			),
+/// 		),
+/// 		input-group-inset: (
+/// 			// .has-error .input-group-inset
+/// 			input-group-inset-item: (
+/// 				// .has-error .input-group-inset ~ .input-group-inset-item
+/// 			),
+/// 			hover: (
+/// 				// .has-error .input-group-inset:hover
+/// 				input-group-inset-item: (
+/// 					// .has-error .input-group-inset:hover ~ .input-group-inset-item
+/// 				),
+/// 			),
+/// 			focus: (
+/// 				// .has-error .input-group-inset:focus
+/// 				input-group-inset-item: (
+/// 					// .has-error .input-group-inset:focus ~ .input-group-inset-item
+/// 				),
+/// 			),
+/// 		),
+/// 	),
+/// )
+
+@mixin clay-form-validation-variant($map) {
+	$enabled: setter(map-get($map, enabled), true);
+
+	@if ($enabled) {
+		@include clay-css($map);
+
+		label {
+			@include clay-css(map-get($map, label));
+		}
+
+		.custom-control-label,
+		.form-check-label {
+			@include clay-css(map-get($map, custom-control-label));
+		}
+
+		.form-control {
+			@include clay-form-control-variant(map-get($map, form-control));
+		}
+
+		.form-control[readonly] {
+			@include clay-form-control-variant(
+				map-deep-get($map, form-control, readonly)
+			);
+		}
+
+		.form-feedback-group {
+			@include clay-css(map-get($map, form-feedback-group));
+		}
+
+		.form-feedback-item {
+			@include clay-css(map-get($map, form-feedback-item));
+		}
+
+		.form-feedback-indicator {
+			@include clay-css(map-get($map, form-feedback-indicator));
+		}
+
+		.form-feedback-text {
+			@include clay-css(map-get($map, form-feedback-text));
+		}
+
+		select.form-control {
+			@include clay-select-variant(
+				map-deep-get($map, select, form-control)
+			);
+
+			&[size] {
+				@include clay-select-variant(
+					map-deep-get($map, select, form-control, size)
+				);
+			}
+
+			&[multiple] {
+				@include clay-select-variant(
+					map-deep-get($map, select, form-control, multiple)
+				);
+			}
+		}
+
+		.input-group-item {
+			@include clay-css(map-get($map, input-group-item));
+
+			&:hover {
+				.input-group-inset {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							input-group-item,
+							hover,
+							input-group-inset
+						)
+					);
+
+					~ .input-group-inset-item {
+						@include clay-css(
+							map-deep-get(
+								$map,
+								input-group-item,
+								hover,
+								input-group-inset,
+								input-group-inset-item
+							)
+						);
+					}
+				}
+			}
+
+			&.focus {
+				@include clay-css(map-deep-get($map, input-group-item, focus));
+
+				.input-group-inset {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							input-group-item,
+							focus,
+							input-group-inset
+						)
+					);
+
+					~ .input-group-inset-item {
+						@include clay-css(
+							map-deep-get(
+								$map,
+								input-group-item,
+								focus,
+								input-group-inset,
+								input-group-inset-item
+							)
+						);
+					}
+				}
+			}
+
+			.input-group-inset {
+				@include clay-css(
+					map-deep-get($map, input-group-item, input-group-inset)
+				);
+
+				~ .input-group-inset-item {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							input-group-item,
+							input-group-inset,
+							input-group-inset-item
+						)
+					);
+				}
+
+				&:hover {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							input-group-item,
+							input-group-inset,
+							hover
+						)
+					);
+
+					~ .input-group-inset-item {
+						@include clay-css(
+							map-deep-get(
+								$map,
+								input-group-item,
+								input-group-inset,
+								hover,
+								input-group-inset-item
+							)
+						);
+					}
+				}
+
+				&:focus {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							input-group-item,
+							input-group-inset,
+							focus
+						)
+					);
+
+					~ .input-group-inset-item {
+						@include clay-css(
+							map-deep-get(
+								$map,
+								input-group-item,
+								input-group-inset,
+								focus,
+								input-group-inset-item
+							)
+						);
+					}
+				}
+			}
 		}
 	}
 }