@import '../constants';



/* (1) INPUT (neutral) */
input[type=text],     .neutral > input[type=text],
input[type=mail],     .neutral > input[type=mail],
input[type=password], .neutral > input[type=password],
select,               .neutral > select,
input[type=text].neutral,
input[type=mail].neutral,
input[type=password].neutral,
select.neutral{

	display: inline-block;
	margin: 1em;
	padding: .5em 1em;

	border-radius: 3px;
	border: 1px solid $form-neutral-color;

	background-color: #fff;

	font-family: inherit;

	color: lighten($primary-color, 15%);

	transition: border .2s ease-in-out,
				color .2s ease-in-out;

	&:focus, &:hover{
		border-color: darken($form-neutral-color, 10%);
		color: $primary-color;
	}

}


/* (2) SELECT (neutral) */
select{
	width: 100%;
	display: block;
	background: #fff;

	option{
		padding: .5em;
	}
}


/* (1)(2) valid */
.valid > input[type=text],
.valid > input[type=mail],
.valid > input[type=password],
.valid > select,
input.valid[type=text],
input.valid[type=mail],
input.valid[type=password],
select.valid{

	border-color: darken($form-valid-color, 0%);


	&:focus, &:hover{
		border-color: darken($form-valid-color, 10%);
	}

}

/* (1)(2) invalid */
.invalid > input[type=text],
.invalid > input[type=mail],
.invalid > input[type=password],
.invalid > select,
input.invalid[type=text],
input.invalid[type=mail],
input.invalid[type=password],
select.invalid{

	border-color: darken($form-invalid-color, 0%);


	&:focus, &:hover{
		border-color: darken($form-invalid-color, 10%);
	}

}

/* (1)(2) search */
.search > input[type=text],
.search > input[type=mail],
.search > input[type=password],
.search > select,
input.search[type=text],
input.search[type=mail],
input.search[type=password]{

	border-color: darken($form-search-color, 0%);


	&:focus, &:hover{
		border-color: darken($form-search-color, 10%);
	}

}

/* (1)(2) grey */
.grey > input[type=text],
.grey > input[type=mail],
.grey > input[type=password],
.grey > select,
input.grey[type=text],
input.grey[type=mail],
input.grey[type=password]{

	border-color: darken($form-grey-color, 0%);


	&:focus, &:hover{
		border-color: darken($form-grey-color, 10%);
	}

}