$c-input-border-size: 2px;


.c-input {
	@include font-size(s);
	@include border-radius(s);
	width: 100%;
	padding: (space(1) - $c-input-border-size) space(2);
	color: palette(neutral, 800);
	background-color: palette(neutral, 0);
	border: $c-input-border-size solid palette(neutral, 900);
	outline: none;

	.has-error & {
		box-shadow: 0 0 7px -3px palette(feedback, warning);
		border-color: palette(feedback, warning);
	}

	&:focus {
		box-shadow: 0 0 7px -3px palette(feedback, focus);
		border-color: palette(feedback, focus);
	}

	@at-root textarea#{&} {
		display: block;
		padding: space(2);
		min-height: space(20) - double($c-input-border-size);
		line-height: space(3);
		resize: vertical;
	}
}