@import (reference) "global";
/* Text Area */
@textAreaResize: vertical;
@textAreaLineHeight: 1.2857;
@textAreaMinHeight: 8em;
@textAreaMaxHeight: 24em;
@textAreaBackground: #FFFFFF;
@textAreaBorder: 1px solid @borderColor;
@transition: background-color @defaultDuration @defaultEasing,
box-shadow @defaultDuration @defaultEasing,
border-color @defaultDuration @defaultEasing;
@textAreaTransition: @transition;

@textAreaFocusBackground: #FFFFFF;
@textAreaFocusBorderColor: #85B7D9;
@textAreaFocusColor: rgba(0, 0, 0, 0.95);
@textAreaFocusBoxShadow: none;
@textAreaFocusBorderRadius: @defaultBorderRadius;

@textAreaErrorColor: #9F3A38;
@textAreaBorderColor: #E0B4B4;
@textAreaBackgroundColor: #FFF6F6;
@textAreaErrorFocusColor: rgba(255, 80, 80, 0.7);

.ui.input.textarea {
	width: 100%;

	&.error {
		textarea {
			background: @textAreaBackgroundColor;
			border-color: @textAreaBorderColor;
			color: @textAreaErrorColor;
			box-shadow: none;
		}
	}
}

textarea {
	margin: 0em;
	-webkit-appearance: none;
	tap-highlight-color: rgba(255, 255, 255, 0);
	padding: 0.78571429em 1em;
	background: #FFFFFF;
	border: 1px solid rgba(34, 36, 38, 0.15);
	outline: none;
	border-radius: @border-radius;
	box-shadow: 0em 0em 0em 0em transparent inset;
	-webkit-transition: color 0.1s ease, border-color 0.1s ease;
	transition: color 0.1s ease, border-color 0.1s ease;
	font-size: 1em;
	line-height: 1.2857;
	resize: vertical;
	vertical-align: top;
	width: 100%;
}

textarea:not([rows]) {
	height: 100%;
	min-height: 1em;
}

textarea:focus {
	color: @textAreaFocusColor;
	border-color: @textAreaFocusBorderColor;
	border-radius: @textAreaFocusBorderRadius;
	background: @textAreaFocusBackground;
	box-shadow: @textAreaFocusBoxShadow;
	-webkit-appearance: none;
}

textarea {
	vertical-align: top;
}
