@component OpalTextInput {
	position: relative;
	display: inline-block;
	width: 400px;
	vertical-align: middle;

	@el textField,
		textareaHeight
	{
		display: block;
		box-sizing: border-box;
		padding: 6px 36px 6px 12px;
		width: 100%;
		border: 1px solid hsl(0,0%,68%);
		border-top-color: hsl(0,0%,66%);
		border-bottom-color: hsl(0,0%,78%);
		border-radius: 3px;
		background: #fff;
		box-shadow: inset 0 1px rgba(0,0,0,.1);
		color: #000;
		text-shadow: none;
		font: 16px/24px Verdana, Geneva, sans-serif;
		font-weight: normal;
		transition: border-color .1s linear;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
		-webkit-tap-highlight-color: transparent;
	}

	/* http://www.brianchu.com/blog/2013/11/02/creating-an-auto-growing-text-input/ */
	@el textareaContainer {
		position: relative;
	}
		@el textarea {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			height: 100%;
			white-space: normal;
			resize: none;
		}

		@el textareaHeight {
			visibility: hidden;
			white-space: pre-wrap;
			word-wrap: break-word;
			overflow-wrap: break-word;
		}

	@el startIcon,
		endIcon
	{
		position: absolute;
		top: 0;
		bottom: 0;
		display: block;
		margin: auto;
		width: 18px;
		height: 18px;
		color: hsl(0,0%,50%);
	}

	@el startIcon {
		left: 12px;
	}

	@el endIconSlot {
		display: none;

		@mod shown {
			display: block;
		}
	}
		@el endIcon {
			right: 12px;
		}

	@el btnClear {
		position: absolute;
		top: 0;
		right: 9px;
		bottom: 0;
		display: none;
		margin: auto;
		padding: 0;
		width: 24px;
		height: 24px;
		border: 0;
		background: transparent;
		color: hsl(0,0%,50%);
		cursor: pointer;
		transition: color .1s linear;

		@mod shown {
			display: block;
		}

		&:hover {
			color: #000;
		}

		&:focus {
			outline: none;

			body:not(._noFocusHighlight) & {
				outline: 1px solid hsl(208,94%,54%);
			}
		}

		&:active {
			transform: translateY(1px);
		}
	}
		@el btnClearIcon {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			display: block;
			margin: auto;
			width: 16px;
			height: 16px;
		}

	@el loader {
		position: absolute;
		top: 0;
		right: 12px;
		bottom: 0;
		margin: auto;
		border: 0;
		pointer-events: none;
	}

	&:hover {
		@el textField {
			border-color: hsl(0,0%,58%);
			border-top-color: hsl(0,0%,56%);
			border-bottom-color: hsl(0,0%,68%);
		}
	}

	@el textField {
		&:focus {
			outline: none;
			border-color: hsl(208,94%,54%);
		}
	}

	@mod multiline {
		&:not([auto_height=no]) {
			@el textField {
				overflow-y: hidden;
			}
		}
	}

	@mod startIcon {
		@el textField {
			padding-left: 36px;
		}
	}

	@mod valid {
		@el textField {
			&,
			&:focus {
				border-color: hsl(148,76%,40%);
			}
		}
	}

	@mod valid=no {
		@el textField {
			&,
			&:focus {
				border-color: hsl(348,92%,58%);
			}
		}
	}

	@mod disabled {
		opacity: .5;
		pointer-events: none;

		@el textField {
			background: hsl(0,0%,90%);
		}
	}

	/* Combinations */

	.OpalGroup > &:not(:first-child),
	.OpalGroup > *:not(:first-child) & {
		margin-right: -1px;

		.OpalTextInput__textField {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
	}

	.OpalGroup > &:not(:last-child),
	.OpalGroup > *:not(:last-child) & {
		.OpalTextInput__textField {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}
	}
}