////
/// @group inputGroups
////

/// A mixin that stacks an `.input-group` that uses an `.input-group-item` at a specific `max-width` breakpoint. This sets the `.input-group-item` width to 100% and `.input-group-item-shrink` width to auto at the `max-width` breakpoint.
/// @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
/// breakpoint: {String | Null}, // This uses Bootstrap 4's breakpoint up to calculate breakpoint down. Use `breakpoint-down` instead. // Default: md
/// See Mixin `clay-css` for available keys to pass into the base selector
/// item: {Map | Null}, // See Mixin `clay-css` for available keys
/// item-shrink: {Map | Null}, // See Mixin `clay-css` for available keys
/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
/// breakpoint-down: {String, Null}, // The Bootstrap 4 Breakpoint {xs | sm | md | lg | xl}
/// item-margin-bottom: {Number | String | Null}, // deprecated after 3.9.0
/// item-margin-left: {Number | String | Null}, // deprecated after 3.9.0
/// item-margin-right: {Number | String | Null}, // deprecated after 3.9.0
/// item-margin-top: {Number | String | Null}, // deprecated after 3.9.0
/// shrink-margin-bottom: {Number | String | Null}, // deprecated after 3.9.0
/// shrink-margin-left: {Number | String | Null}, // deprecated after 3.9.0
/// shrink-margin-right: {Number | String | Null}, // deprecated after 3.9.0
/// shrink-margin-top: {Number | String | Null}, // deprecated after 3.9.0

@mixin clay-input-group-stacked($map) {
	$enabled: setter(map-get($map, enabled), true);

	$breakpoint: setter(map-get($map, breakpoint), md);
	$breakpoint-down: clay-breakpoint-prev($breakpoint);

	$item: setter(map-get($map, item), ());
	$item: map-merge(
		$item,
		(
			margin-bottom:
				setter(
					map-get($map, item-margin-bottom),
					map-get($item, margin-bottom)
				),
			margin-left:
				setter(
					map-get($map, item-margin-left),
					map-get($item, margin-left)
				),
			margin-right:
				setter(
					map-get($map, item-margin-right),
					map-get($item, margin-right)
				),
			margin-top:
				setter(
					map-get($map, item-margin-top),
					map-get($item, margin-top)
				),
			width: setter(map-get($item, width), 100%),
		)
	);

	$item-shrink: setter(map-get($map, item-shrink), ());
	$item-shrink: map-merge(
		$item-shrink,
		(
			margin-bottom:
				setter(
					map-get($map, shrink-margin-bottom),
					map-get($item-shrink, margin-bottom)
				),
			margin-left:
				setter(
					map-get($map, shrink-margin-left),
					map-get($item-shrink, margin-left)
				),
			margin-right:
				setter(
					map-get($map, shrink-margin-right),
					map-get($item-shrink, margin-right)
				),
			margin-top:
				setter(
					map-get($map, shrink-margin-top),
					map-get($item-shrink, margin-top)
				),
			width: setter(map-get($item-shrink, width), auto),
		)
	);

	@if ($enabled) {
		@include media-breakpoint-down($breakpoint-down) {
			@include clay-css($map);

			> .input-group-item {
				@include clay-css($item);
			}

			> .input-group-item-shrink {
				@include clay-css($item-shrink);
			}
		}
	}
}

/// A mixin to create `input-group-item` variants
/// @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
/// 	// .input-group-text
/// 	label: (
/// 		// .input-group-text label
/// 	),
/// 	custom-control: (
/// 		// .input-group-text .custom-control
/// 		//     @include clay-custom-control-variant();
/// 	),
/// 	form-check: (
/// 		// .input-group-text .form-check
/// 		input: (
/// 			// .input-group-text .form-check input[type='radio'],
/// 			// .input-group-text .form-check input[type='checkbox']
/// 		),
/// 	),
/// 	lexicon-icon: (
/// 		// .input-group-text .lexicon-icon
/// 	),
/// 	media-breakpoint-down: (
/// 		xs: (
/// 			// @include media-breakpoint-down(xs) {
/// 			//      @include clay-input-group-text-variant();
/// 			// }
/// 		),
/// 		sm: (
/// 			// @include media-breakpoint-down(sm) {
/// 			//      @include clay-input-group-text-variant();
/// 			// }
/// 		),
/// 		md: (
/// 			// @include media-breakpoint-down(md) {
/// 			//      @include clay-input-group-text-variant();
/// 			// }
/// 		),
/// 		lg: (
/// 			// @include media-breakpoint-down(lg) {
/// 			//      @include clay-input-group-text-variant();
/// 			// }
/// 		),
/// 	),
/// )
/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
/// bg: {Color | String | Null}, // deprecated after 3.9.0

@mixin clay-input-group-text-variant($map) {
	@if (type-of($map) == 'map') {
		$enabled: setter(map-get($map, enabled), true);

		$base: map-merge(
			$map,
			(
				background-color:
					setter(map-get($map, bg), map-get($map, background-color)),
			)
		);

		@if ($enabled) {
			@include clay-css($base);

			label {
				@include clay-css(map-deep-get($map, label));
			}

			.custom-control {
				@include clay-custom-control-variant(
					map-deep-get($map, custom-control)
				);
			}

			.form-check {
				@include clay-css(map-deep-get($map, form-check));

				input[type='radio'],
				input[type='checkbox'] {
					@include clay-css(map-deep-get($map, form-check, input));
				}
			}

			.lexicon-icon {
				@include clay-css(map-deep-get($map, lexicon-icon));
			}

			@if (map-get($map, media-breakpoint-down)) {
				@each $breakpoint
					in map-keys(map-get($map, media-breakpoint-down))
				{
					$media-breakpoint-down: map-deep-get(
						$map,
						media-breakpoint-down,
						$breakpoint
					);

					@if ($breakpoint) {
						@include media-breakpoint-down($breakpoint) {
							@include clay-input-group-text-variant(
								$media-breakpoint-down
							);
						}
					}
				}
			}
		}
	}
}

/// A mixin to create `input-group-item` variants
/// @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
/// 	// .input-group-item
/// 	focus: (
/// 		// .input-group-item.focus
/// 		//     @include clay-input-group-item-variant();
/// 	),
/// 	first-child: (
/// 		// .input-group-item:first-child
/// 	),
/// 	input-group-prepend: (
/// 		// .input-group-item.input-group-prepend
/// 	),
/// 	input-group-append: (
/// 		// .input-group-item.input-group-append
/// 	),
/// 	btn: (
/// 		// .input-group-item > .btn
/// 		//     @include clay-button-variant();
/// 	),
/// 	btn-monospaced: (
/// 		// .input-group-item > .btn-monospaced
/// 		//     @include clay-button-variant();
/// 	),
/// 	dropdown: (
/// 		// .input-group-item > .dropdown
/// 	),
/// 	form-control: (
/// 		// .input-group-item > .form-control
/// 		//     @include clay-form-control-variant();
/// 		label: (
/// 			// .input-group-item > .form-control .label
/// 			//     @include clay-label-variant();
/// 		),
/// 	),
/// 	form-file: (
/// 		// .input-group-item > .form-file
/// 		btn: (
/// 			// .input-group-item > .form-file .btn
/// 			//     @include clay-button-variant();
/// 		),
/// 	),
/// 	textarea: (
/// 		// .input-group-item > textarea.form-control,
/// 		// .input-group-item > .form-control-textarea
/// 		//     @include clay-form-control-variant();
/// 	),
/// 	form-control-plaintext: (
/// 		// .input-group-item > .form-control-plaintext
/// 		//     @include clay-form-control-variant();
/// 	),
/// 	input-group-text: (
/// 		// .input-group-item > .input-group-text
/// 		//     @include clay-input-group-text-variant();
/// 	),
/// 	input-group-inset-item: (
/// 		// .input-group-item > .input-group-inset-item
/// 		btn: (
/// 			// .input-group-item > .input-group-inset-item > .btn
/// 			//     @include clay-button-variant();
/// 		),
/// 		btn-monospaced: (
/// 			// .input-group-item > .input-group-inset-item > .btn-monospaced
/// 			//     @include clay-button-variant();
/// 		),
/// 		form-file: (
/// 			// .input-group-item > .input-group-inset-item > .form-file
/// 			btn: (
/// 				// .input-group-item > .input-group-inset-item > .form-file .btn
/// 				//     @include clay-button-variant();
/// 			),
/// 		),
/// 	),
/// 	form-control-inset: (
/// 		// .input-group-item .form-control-inset
/// 	),
/// )

@mixin clay-input-group-item-variant($map) {
	@if (type-of($map) == 'map') {
		$enabled: setter(map-get($map, enabled), true);

		@if ($enabled) {
			@include clay-css($map);

			&.focus {
				@include clay-input-group-item-variant(
					map-deep-get($map, focus)
				);
			}

			&:first-child {
				@include clay-css(map-deep-get($map, first-child));
			}

			&.input-group-prepend {
				@include clay-css(map-deep-get($map, input-group-prepend));
			}

			&.input-group-append {
				@include clay-css(map-deep-get($map, input-group-append));
			}

			> .btn {
				@include clay-button-variant(map-deep-get($map, btn));
			}

			> .btn-monospaced {
				@include clay-button-variant(
					map-deep-get($map, btn-monospaced)
				);
			}

			> .dropdown {
				@include clay-css(map-deep-get($map, dropdown));
			}

			> .form-control {
				@include clay-form-control-variant(
					map-deep-get($map, form-control)
				);
			}

			> .form-file {
				@include clay-css(map-deep-get($map, form-file));

				.btn {
					@include clay-button-variant(
						map-deep-get($map, form-file, btn)
					);
				}
			}

			> textarea.form-control,
			> .form-control-textarea {
				@include clay-form-control-variant(
					map-deep-get($map, textarea)
				);
			}

			> .form-control-plaintext {
				@include clay-form-control-variant(
					map-deep-get($map, form-control-plaintext)
				);
			}

			> .input-group-text {
				@include clay-input-group-text-variant(
					map-deep-get($map, input-group-text)
				);
			}

			> .input-group-inset-item {
				@include clay-css(map-deep-get($map, input-group-inset-item));

				> .btn {
					@include clay-button-variant(
						map-deep-get($map, input-group-inset-item, btn)
					);
				}

				> .btn-monospaced {
					@include clay-button-variant(
						map-deep-get(
							$map,
							input-group-inset-item,
							btn-monospaced
						)
					);
				}

				> .form-file {
					@include clay-css(map-deep-get($map, form-file));

					.btn {
						@include clay-button-variant(
							map-deep-get($map, form-file, btn)
						);
					}
				}
			}

			.form-control-inset {
				@include clay-form-control-variant(
					map-deep-get($map, form-control-inset)
				);
			}
		}
	}
}

/// A mixin to create `input-group` variants
/// @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
/// 	// .input-group
/// 	input-group-item: (
/// 		// .input-group > .input-group-item
/// 		//     @include clay-input-group-item-variant();
/// 	),
/// 	input-group-item-shrink: (
/// 		// .input-group > .input-group-item-shrink
/// 		//     @include clay-input-group-item-variant();
/// 	),
/// 	btn-primary: (
/// 		// .input-group .btn-primary
/// 		//     @include clay-button-variant();
/// 	),
/// 	btn-secondary: (
/// 		// .input-group .btn-secondary
/// 		//     @include clay-button-variant();
/// 	),
/// 	btn-unstyled: (
/// 		// .input-group .btn-unstyled
/// 		//     @include clay-button-variant();
/// 	),
/// 	media-breakpoint-down: (
/// 		xs: (
/// 			// @include media-breakpoint-down(xs) {
/// 			//     @include clay-input-group-variant();
/// 			// }
/// 		),
/// 		sm: (
/// 			// @include media-breakpoint-down(sm) {
/// 			//     @include clay-input-group-variant();
/// 			// }
/// 		),
/// 		md: (
/// 			// @include media-breakpoint-down(md) {
/// 			//     @include clay-input-group-variant();
/// 			// }
/// 		),
/// 		lg: (
/// 			// @include media-breakpoint-down(lg) {
/// 			//     @include clay-input-group-variant();
/// 			// }
/// 		),
/// 	),
/// )

@mixin clay-input-group-variant($map) {
	@if (type-of($map) == 'map') {
		$enabled: setter(map-get($map, enabled), true);

		@if ($enabled) {
			@include clay-css($map);

			> .input-group-item {
				@include clay-input-group-item-variant(
					map-deep-get($map, input-group-item)
				);
			}

			> .input-group-item-shrink {
				@include clay-input-group-item-variant(
					map-deep-get($map, input-group-item-shrink)
				);
			}

			.btn-primary {
				@include clay-button-variant(map-deep-get($map, btn-primary));
			}

			.btn-secondary {
				@include clay-button-variant(map-deep-get($map, btn-secondary));
			}

			.btn-unstyled {
				@include clay-button-variant(map-deep-get($map, btn-unstyled));
			}

			@if (map-get($map, media-breakpoint-down)) {
				@each $breakpoint
					in map-keys(map-get($map, media-breakpoint-down))
				{
					$media-breakpoint-down: map-deep-get(
						$map,
						media-breakpoint-down,
						$breakpoint
					);

					@if ($breakpoint) {
						@include media-breakpoint-down($breakpoint) {
							@include clay-input-group-variant(
								$media-breakpoint-down
							);
						}
					}
				}
			}
		}
	}
}
