// Deprecate Bootstrap 4 Input Group markup. Clay CSS wraps all form elements,
// buttons, and text inside `input-group-item`. It should be one item per
// `input-group-item`. We don't need these styles, but still making them
// available for backward compatibility.

.input-group {
	> .form-control,
	> .form-control-plaintext {
		flex: 1 1 0%;
		margin-bottom: 0;

		// https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size

		min-width: 0;

		// For focus state's z-index

		position: relative;

		+ .form-control {
			margin-left: math-sign($cadmin-input-border-width);
		}
	}

	// Bring the "active" form control to the top of surrounding elements

	> .form-control:focus {
		z-index: 3;
	}

	> .form-control {
		&:not(:last-child) {
			@include border-right-radius(0);
		}

		&:not(:first-child) {
			@include border-left-radius(0);
		}
	}
}

.input-group-prepend,
.input-group-append {
	> .btn + .btn,
	> .btn + .input-group-text,
	> .input-group-text + .input-group-text,
	> .input-group-text + .btn {
		margin-left: math-sign($cadmin-input-border-width);
	}

	.btn {
		z-index: 1;

		&:hover {
			z-index: $cadmin-zindex-input-group-hover;
		}
	}

	.btn,
	.form-control {
		position: relative;

		&:focus {
			z-index: $cadmin-zindex-input-group-focus;
		}
	}
}

// Input Group

.input-group {
	@include clay-input-group-variant($cadmin-input-group);
}

// Input Group Item

.input-group-item {
	@include clay-input-group-item-variant($cadmin-input-group-item);
}

.input-group-item-shrink {
	@include clay-input-group-item-variant($cadmin-input-group-item-shrink);
}

.input-group-item-focusable {
	@include clay-input-group-item-variant($cadmin-input-group-item-focusable);
}

// Input Group Text

.input-group-text {
	@include clay-input-group-text-variant($cadmin-input-group-text);
}

.input-group-text-secondary {
	@include clay-input-group-text-variant($cadmin-input-group-text-secondary);
}

// Input Group Stacked

.input-group-stacked-sm-down {
	@include clay-input-group-stacked($cadmin-input-group-stacked-sm-down);
}

// Input Group Sizes

%clay-input-group-lg {
	@include clay-input-group-variant($cadmin-input-group-lg);
}

.input-group-lg {
	@extend %clay-input-group-lg;
}

%clay-input-group-sm {
	@include clay-input-group-variant($cadmin-input-group-sm);

	&.clay-color {
		> .input-group-item > .input-group-text {
			@extend %clay-color-sm-input-group-text !optional;

			> .clay-color-btn {
				@extend %clay-color-sm-clay-color-btn !optional;
			}
		}

		> .input-group-item > .input-group-inset-item-before {
			@extend %clay-color-sm-input-group-inset-item-before !optional;
		}
	}

	.form-control {
		@extend %clay-form-control-sm !optional;
	}

	.form-control-tag-group,
	&.form-control-tag-group {
		@extend %clay-form-control-tag-group-sm !optional;
	}
}

.input-group-sm {
	@extend %clay-input-group-sm;
}

// Form Group with Input Group

.form-group-sm .input-group {
	@extend %clay-input-group-sm;
}

// Input Group Inset

.input-group-inset {
	@include clay-form-control-variant($cadmin-input-group-inset);

	~ .form-feedback-group {
		order: 13;
	}
}

.input-group-inset[readonly] {
	@include clay-form-control-variant($cadmin-input-group-inset-readonly);
}

.input-group {
	.input-group-inset-item {
		align-items: center;
		background-color: $cadmin-input-bg;
		border-bottom-width: $cadmin-input-border-bottom-width;
		border-color: $cadmin-input-border-color;
		border-left-width: $cadmin-input-border-left-width;
		border-right-width: $cadmin-input-border-right-width;
		border-style: solid;
		border-top-width: $cadmin-input-border-top-width;
		display: flex;
		// undo margin-bottom on `<label>`
		margin-bottom: 0;
		padding-left: $cadmin-input-group-inset-item-padding-left;
		padding-right: $cadmin-input-group-inset-item-padding-right;

		@include transition($cadmin-input-transition);

		.btn {
			@include clay-button-size($cadmin-input-group-inset-item-btn);

			@if ($cadmin-enable-c-inner) {
				.c-inner {
					.lexicon-icon {
						margin-top: 0;
					}
				}
			}
		}

		.btn-monospaced,
		.input-group-inset-icon {
			@include clay-button-variant(
				$cadmin-input-group-inset-item-btn-monospaced
			);
		}

		.form-file {
			height: 75%;

			.btn {
				@include clay-button-size(
					$cadmin-input-group-inset-form-file-btn
				);
			}
		}

		.sticker {
			margin-left: 12px;
			margin-right: 8px;
		}
	}

	.input-group-inset-icon {
		align-items: center;
		display: flex;
		justify-content: center;

		.lexicon-icon {
			margin-top: 0;
		}
	}

	.input-group-item .input-group-inset-before.form-control {
		@include border-left-radius(0);
		@include border-right-radius($cadmin-input-border-radius);

		border-left-width: 0;
		padding-left: 0;
	}

	.input-group-inset-item-before {
		@include border-left-radius($cadmin-input-border-radius);

		border-right-width: 0;
		color: $cadmin-input-group-inset-item-color;
		order: 3;
	}

	.input-group-append > .input-group-inset-item-before {
		@include border-left-radius(0);
	}

	.input-group-item .input-group-inset-after.form-control {
		@include border-right-radius(0);

		border-right-width: 0;
		padding-right: 0;
	}

	.input-group-inset-item-after {
		@include border-right-radius($cadmin-input-border-radius);

		border-left-width: 0;
		color: $cadmin-input-group-inset-item-color;
		order: 9;

		.input-group-prepend & {
			@include border-right-radius(0);

			z-index: 1;
		}
	}
}

// Input Group Prepend

.input-group {
	> .input-group-item {
		&.input-group-prepend {
			align-items: stretch;
			display: flex;
			margin-right: math-sign($cadmin-input-border-left-width);
		}

		&.input-group-prepend:not(:last-child) {
			> .btn,
			> .form-control,
			> .input-group-text {
				border-bottom-right-radius: 0;
				border-top-right-radius: 0;
			}

			> .btn + .btn {
				border-bottom-left-radius: 0;
				border-top-left-radius: 0;
			}
		}

		&.input-group-prepend + .input-group-prepend {
			margin-left: 0;

			> .btn,
			> .form-control,
			> .input-group-text {
				border-bottom-left-radius: 0;
				border-top-left-radius: 0;
			}
		}
	}
}

// Input Group Append

.input-group {
	> .input-group-item {
		&.input-group-append {
			align-items: stretch;
			display: flex;
			margin-right: math-sign($cadmin-input-border-left-width);
		}

		&.input-group-append:first-child {
			> .btn,
			> .form-control,
			> .input-group-text {
				border-bottom-right-radius: 0;
				border-top-right-radius: 0;
			}
		}

		&.input-group-append:not(:first-child) {
			> .btn,
			> .form-control,
			> .form-file .btn,
			> .input-group-text {
				border-bottom-left-radius: 0;
				border-top-left-radius: 0;
			}
		}

		&.input-group-append + .input-group-append,
		&.input-group-prepend + .input-group-append {
			margin-left: 0;
		}
	}
}

// Input Group Password

.input-group-password {
	.form-control[type='text'] ~ .input-group-inset-item {
		.input-password-label {
			display: none;
		}
	}

	.form-control[type='password'] ~ .input-group-inset-item {
		.input-text-label {
			display: none;
		}
	}
}