// Component settings: Input
// ------------------------------------------

$c-input: (
	'color':				palette(text),
	'bgcolor':			palette(light),
	'border':				palette(neutral, medium),
	'focus':				palette(neutral, dark),
	'error':				palette(feedback, action),
	'border-size':	1px,
);

// ------------------------------------------


.c-input {
	@include font-size(s);
	width: 100%;
	padding: (space(1) - map-get($c-input, 'border-size')) space(2);
	color: map-get($c-input, 'color');
	background-color: map-get($c-input, 'bgcolor');
	border: map-get($c-input, 'border-size') solid map-get($c-input, 'border');
	outline: none;

	.has-error & {
		box-shadow: 0 0 7px -3px map-get($c-input, 'error');
		border-color: map-get($c-input, 'error');
	}

	&:focus {
		box-shadow: 0 0 7px -3px map-get($c-input, 'focus');
		border-color: map-get($c-input, 'focus');
	}

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