// Form element: Input

.form-input {
	width: 100%;
	height: $control-size;
	line-height: $line-height;
	border: 1px solid $lightgray-400;
	border-radius: 0.1rem;
	padding: 0 $unit-2;
	position: relative;
	outline: none;
	-webkit-appearance: none;

	&:focus {
		@include control-shadow();
		border-color: $primary-500;
	}

	&:invalid {
		border: 1px solid $red-500;
	}
}

.form-input--compact {
	height: $control-size-lg;
	line-height: 0.8rem;
	padding-top: 0.6rem;
}

textarea.form-input {
	height: auto;
	padding: $unit-2;
}

// Form element: Input groups
.input-group {
	display: flex;

	.input-group-addon {
		background: $lightgray-300;
		border: $border-width solid #dbdbdb;
		border-radius: $border-radius;
		line-height: 1.5rem;
		font-size: $font-size-sm;
		padding: 0 $control-padding-x;
		white-space: nowrap;

		&.addon-sm {
			font-size: $font-size-sm;
			padding: $control-padding-y-sm $control-padding-x-sm;
		}

		&.addon-lg {
			font-size: $font-size-lg;
			padding: $control-padding-y-lg $control-padding-x-lg;
		}
	}

	.form-input,
	.form-select {
		flex: 1 1 auto;
		width: 1%;
	}

	.input-group-btn {
		z-index: $zindex-0;
	}

	.form-input,
	.form-select,
	.input-group-addon,
	.input-group-btn {
		&:first-child:not(:last-child) {
			border-bottom-right-radius: 0;
			border-top-right-radius: 0;
		}

		&:not(:first-child):not(:last-child) {
			border-radius: 0;
			margin-left: -$border-width;
		}

		&:last-child:not(:first-child) {
			border-bottom-left-radius: 0;
			border-top-left-radius: 0;
			margin-left: -$border-width;
		}

		&:focus {
			z-index: $zindex-0 + 1;
		}
	}

	.form-select {
		width: auto;
	}

	&.input-inline {
		display: inline-flex;
	}
}