.input-group {
	.btn-unstyled {
		color: inherit;
	}
}

// Input Group Item

.input-group-item {
	display: flex;
	flex-grow: 1;
	flex-wrap: wrap;
	margin-left: $input-group-item-margin-left;
	width: 1%;
	word-wrap: break-word;

	&:first-child {
		margin-left: 0;
	}

	> .btn {
		align-self: flex-start;
	}

	> .dropdown {
		display: flex;
		flex-wrap: wrap;
		word-wrap: break-word;
		width: 100%;
	}
}

.input-group-item-shrink {
	flex-grow: 0;
	width: auto;
}

// Input Group Prepend

.input-group-prepend {
	align-items: stretch;
	margin-right: -$input-border-left-width;

	+ .input-group-prepend,
	+ .input-group-append,
	+ .input-group-item:not(.input-group-append) {
		margin-left: 0;
	}

	+ .input-group-item:not(.input-group-append) .form-control {
		@include border-left-radius(0);
	}
}

.input-group > .input-group-prepend {
	&:not(:first-child) > .form-control {
		@include border-left-radius(0);
	}

	> .form-control {
		@include border-right-radius(0);
	}
}

.input-group-item:not(.input-group-prepend) + .input-group-prepend {
	.btn {
		@include border-left-radius($btn-border-radius);
	}

	.form-control,
	.input-group-text {
		@include border-left-radius($input-border-radius);
	}
}

// Input Group Append

.input-group-append {
	align-items: stretch;
	margin-left: -$input-border-right-width;
}

.input-group > .input-group-append {
	> .form-control {
		@include border-left-radius(0);
	}
}

// Input Group Prepend and Append

.input-group-prepend,
.input-group-append {
	.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 Prepend and Append Rounded Corners

.input-group > .input-group-prepend > .form-file .btn,
.input-group > .input-group-append:not(:last-child) > .form-file .btn,
.input-group > .input-group-append:last-child > .form-file:not(:last-child) .btn {
	@include border-right-radius(0);
}

.input-group > .input-group-append > .form-file .btn,
.input-group > .input-group-prepend:not(:first-child) > .form-file .btn,
.input-group > .input-group-prepend:first-child > .form-file:not(:first-child) .btn {
	@include border-left-radius(0);
}

// Input Group Text

.input-group-text {
	align-items: center;
	border-bottom-width: $input-border-bottom-width;
	border-left-width: $input-border-left-width;
	border-right-width: $input-border-right-width;
	border-top-width: $input-border-top-width;
	color: $input-group-addon-color;
	display: flex;
	font-weight: $input-group-addon-font-weight;
	height: $input-height;
	justify-content: center;
	min-width: $input-group-addon-min-width;
	padding-bottom: $input-group-addon-padding-y;
	padding-left: $input-group-addon-padding-x;
	padding-right: $input-group-addon-padding-x;
	padding-top: $input-group-addon-padding-y;

	@include clay-scale-component {
		height: $input-height-mobile;
	}

	label {
		color: $input-group-addon-color;
	}

	.custom-control,
	.form-check {
		margin-bottom: 0;
	}

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

.input-group-text-secondary {
	background-color: $input-group-secondary-addon-bg;
	border-color: $input-group-secondary-addon-border-color;
	border-width: $input-group-secondary-addon-border-width;
	color: $input-group-secondary-addon-color;
	z-index: 2;

	label {
		color: $input-group-secondary-addon-color;
	}
}

// Input Group Inset

.input-group-item.focus {
	@include border-radius($input-border-radius);

	box-shadow: $input-focus-box-shadow;

	.form-control,
	.form-control[readonly] ~ .input-group-inset-item,
	.input-group-inset-item {
		background-color: $input-focus-bg;
		border-color: $input-focus-border-color;
	}
}

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

	z-index: 1;
}

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

.input-group-inset {
	flex-grow: 1;
	order: 5;
	width: 1%;

	&[readonly] {
		&:focus {
			~ .input-group-inset-item {
				background-color: $input-readonly-focus-bg;
				border-color: $input-readonly-focus-border-color;
				color: $input-readonly-focus-color;
			}
		}

		~ .input-group-inset-item {
			background-color: $input-readonly-bg;
			border-color: $input-readonly-border-color;
			color: $input-readonly-color;
			cursor: $input-readonly-cursor;
		}
	}

	&:focus {
		box-shadow: none;

		~ .input-group-inset-item {
			background-color: $input-focus-bg;
			border-color: $input-focus-border-color;
		}
	}

	&:disabled {
		~ .input-group-inset-item {
			background-color: $input-disabled-bg;
			border-color: $input-disabled-border-color;
		}
	}

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

.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;
	margin-bottom: 0; // undo margin-bottom on `<label>`
	padding-left: $input-group-inset-item-padding-left;
	padding-right: $input-group-inset-item-padding-right;
	transition: $input-transition;

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

	.form-file {
		height: 75%;

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

.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 & {
		@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 Stacked

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

// Input Group Sizes

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

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

		.form-control,
		.form-file .btn {
			font-size: $input-font-size-lg;
			height: $input-height-lg;
			line-height: $input-line-height-lg;
			padding-bottom: $input-padding-y-lg;
			padding-left: $input-padding-x-lg;
			padding-right: $input-padding-x-lg;
			padding-top: $input-padding-y-lg;

			@include clay-scale-component {
				height: $input-height-lg-mobile;
			}
		}

		.form-control-plaintext {
			font-size: $input-font-size-lg;
			height: $input-height-lg;
			line-height: $input-line-height-lg;
			padding-bottom: $input-padding-y-lg;
			padding-top: $input-padding-y-lg;

			@include clay-scale-component {
				height: $input-height-lg-mobile;
			}
		}

		.input-group-text {
			font-size: $input-font-size-lg;
			height: $input-height-lg;
			min-width: $input-group-addon-min-width-lg;
			padding-bottom: $input-group-addon-padding-y-lg;
			padding-left: $input-group-addon-padding-x-lg;
			padding-right: $input-group-addon-padding-x-lg;
			padding-top: $input-group-addon-padding-y-lg;
		}
	}

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

		.form-file {
			height: 75%;

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

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

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

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

		.form-control,
		.form-file .btn {
			font-size: $input-font-size-sm;
			height: $input-height-sm;
			line-height: $input-line-height-sm;
			padding-bottom: $input-padding-y-sm;
			padding-left: $input-padding-x-sm;
			padding-right: $input-padding-x-sm;
			padding-top: $input-padding-y-sm;

			@include clay-scale-component {
				height: $input-height-sm-mobile;
			}
		}

		.form-control-plaintext {
			font-size: $input-font-size-sm;
			height: $input-height-sm;
			line-height: $input-line-height-sm;
			padding-bottom: $input-padding-y-sm;
			padding-top: $input-padding-y-sm;

			@include clay-scale-component {
				height: $input-height-sm-mobile;
			}
		}

		.input-group-text {
			font-size: $input-font-size-sm;
			height: $input-height-sm;
			min-width: $input-group-addon-min-width-sm;
			padding-bottom: $input-group-addon-padding-y-sm;
			padding-left: $input-group-addon-padding-x-sm;
			padding-right: $input-group-addon-padding-x-sm;
			padding-top: $input-group-addon-padding-y-sm;
		}
	}

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

		.form-file {
			height: 75%;

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

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

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

// Form Group with Input Group

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