$c-input-border: 2px;


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

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

	&:focus {
		box-shadow: 0 0 7px -3px rgba(palette(action, 500), 0.75);
		border-color: palette(action, 500);
	}

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


.c-input--center {
	text-align: center;
}