// 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,
	> .custom-select,
	> .custom-file {
		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,
		+ .custom-select,
		+ .custom-file {
			margin-left: math-sign($input-border-width);
		}
	}

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

	> .form-control:focus,
	> .custom-select:focus,
	> .custom-file .custom-file-input:focus ~ .custom-file-label {
		z-index: 3;
	}

	// Bring the custom file input above the label
	> .custom-file .custom-file-input:focus {
		z-index: 4;
	}

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

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

	// Custom file inputs have more complex markup, thus requiring different
	// border-radius overrides.

	> .custom-file {
		align-items: center;
		display: flex;

		&:not(:last-child) .custom-file-label,
		&:not(:last-child) .custom-file-label::after {
			@include border-right-radius(0);
		}

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

.input-group-lg > .custom-select {
	@include border-radius($input-border-radius-lg);

	font-size: $input-font-size-lg;
	height: $input-height-lg;
	line-height: $input-line-height-lg;
	padding: $input-padding-y-lg $input-padding-x-lg;
}

.input-group-sm > .custom-select {
	@include border-radius($input-border-radius-sm);

	font-size: $input-font-size-sm;
	height: $input-height-sm;
	line-height: $input-line-height-sm;
	padding: $input-padding-y-sm $input-padding-x-sm;
}

.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
	padding-right: $custom-select-padding-x + $custom-select-indicator-padding;
}

.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($input-border-width);
	}

	.btn {
		z-index: 1;

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

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

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

// Input Group

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

// Input Group Item

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

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

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

// Input Group Text

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

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

// Input Group Stacked

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

// Input Group Sizes

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

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

%clay-input-group-sm {
	@include clay-input-group-variant($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($input-group-inset);

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

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

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

		@include transition($input-transition);

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

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

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

		.form-file {
			height: 75%;

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

		.sticker {
			margin-left: 0.75rem;
			margin-right: 0.5rem;
		}
	}

	.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($input-border-radius);

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

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

		border-right-width: 0;
		color: $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($input-border-radius);

		border-left-width: 0;
		color: $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($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($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;
		}
	}
}