@import '../constants';



/* (1) BUTTON (neutral) */
button,             .neutral > button,
input[type=button], .neutral > input[type=button],
input[type=submit], .neutral > input[type=submit],
button.neutral,
input[type=button].neutral,
input[type=submit].neutral{

	display: inline-block;
	position: relative;

	padding: .5em 1em;

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

	background:     #fff center center no-repeat;
	text-transform: uppercase;
	font-weight:    normal;
	font-family:    inherit;


	color: $primary-color;

	cursor: pointer;

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

	&:hover, &[data-active='1']{
		color: #fff;
		border-color: $form-neutral-color;
		background-color: $form-neutral-color;
	}
}

/* (1) valid */
button.valid,             .valid > button,
input[type=button].valid, .valid > input[type=button],
input[type=submit].valid, .valid > input[type=submit]{

	color: $form-valid-color;

	&:hover, &[data-active='1']{
		color:          #fff;
		border-color:     $form-valid-color;
		background-color: $form-valid-color;
	}

}

/* (1) invalid */
button.invalid,             .invalid > button,
input[type=button].invalid, .invalid > input[type=button],
input[type=submit].invalid, .invalid > input[type=submit]{

	color: $form-invalid-color;

	&:hover, &[data-active='1']{
		color:          #fff;
		border-color:     $form-invalid-color;
		background-color: $form-invalid-color;
	}

}

/* (1) search */
button.search,             .search > button,
input[type=button].search, .search > input[type=button],
input[type=submit].search, .search > input[type=submit]{

	color: $form-search-color;

	&:hover, &[data-active='1']{
		color:          #fff;
		border-color:     $form-search-color;
		background-color: $form-search-color;
	}

}

/* (1) valid grey */
button:disabled,
button.grey,             .grey > button,
input[type=button].grey, .grey > input[type=button],
input[type=submit].grey, .grey > input[type=submit]{

	color: $form-grey-color;

	&:hover, &[data-active='1']{
		color:          #fff;
		border-color:     $form-grey-color;
		background-color: $form-grey-color;
	}

	cursor: default;
}