.form-text-input-with-affixes {
	display: inline-flex;
	flex-direction: column;
	width: 100%;

	&.no-wrap {
		flex-direction: row;
	}

	@include breakpoint( ">480px" ) {
		flex-direction: row;
	}

	input[type="email"],
	input[type="password"],
	input[type="url"],
	input[type="text"],
	input[type="number"] {
		flex-grow: 1;

		&:focus {
			// Fixes the right border of the box shadow displayed when this input element is focused which appears as
			// cut off when this input has a suffix, or is stuck to another element that has a higher stacking order
			// (fix found at http://stackoverflow.com/a/24728957)
			transform: scale( 1 );
		}
	}
}

@mixin no-prefix-wrap() {
	border-bottom-left-radius: 2px;
	border-right: none;
	border-top-right-radius: 0;
}

@mixin no-suffix-wrap() {
	border-bottom-left-radius: 0;
	border-left: none;
	border-top-right-radius: 2px;
}

.form-text-input-with-affixes__prefix,
.form-text-input-with-affixes__suffix {
	background: $gray-light;
	border: 1px solid lighten( $gray, 20% );
	color: darken( $gray, 20% );
	padding: 8px 14px;
	white-space: nowrap;
	flex: 1 0 auto;
	font-size: 16px;
	line-height: 1.5;
}

.form-text-input-with-affixes__prefix {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;

	@include breakpoint( "<480px" ) {
		:not( .no-wrap ) > & {
			border-bottom: none;
		}
	}

	.no-wrap > & {
		@include no-prefix-wrap();
	}

	@include breakpoint( ">480px" ) {
		@include no-prefix-wrap();
	}
}

.form-text-input-with-affixes__suffix {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;

	@include breakpoint( "<480px" ) {
		:not( .no-wrap ) > & {
			border-top: none;
		}
	}

	.no-wrap > & {
		@include no-suffix-wrap();
	}

	@include breakpoint( ">480px" ) {
		@include no-suffix-wrap();
	}
}