@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

@TextField-size-height: @size-standard-height;
@TextField-color-font: @color-neutral-9;

.@{prefix}-TextField, .@{prefix}-TextFieldPlain {
	.box-sizing();

	background-color: @color-white;
	border-radius: @size-borderRadius;
	border: @border-standardBorder;
	color: @TextField-color-font;
	font-size: @fontSize;
	margin: 0;
	padding: 1px @size-S 0 @size-S;
	width: 100%;

	&:focus {
		border: @size-borderWidthFocused solid @color-primary;
		outline: none;
		border-color: @color-primary;
	}

	&&-is-single-line {
		vertical-align: middle;
		height: @size-standard-height;
	}

	&&-is-multi-line {
		vertical-align: top;
		resize: both;
		padding-top: 4px; // Handle padding appropriately for `textarea`s
	}

	&&-is-disabled {
		cursor: not-allowed;
		background-color: #f4f2f2; // TODO: use a gray from `variables.less`
		color: #a6a3a3; // TODO: use a gray from `variables.less`
	}
}