@import 'constants';

/* (1) Champs de texte */
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;
	}

}


select{
	width: 100%;
	display: block;
	background: #fff;

	option{
		padding: .5em;
	}
}


// Champs valides
.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%);
	}

}

// Champs neutres
.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%);
	}

}

// Champs neutres
.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%);
	}

}



/* (2) Boutons */
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;
	}
}

// Boutons grisés
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;
}

// Boutons valides
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;
	}

}

// Boutons invalides
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;
	}

}

// Boutons recherche
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;
	}

}


// Boutons quand action validee
.invalid > button.active,
button.invalid.active,
button.active{
	background-color: #fff;
	background-image: url('/src/static/container/active@#{$rd-form-invalid-color}.svg') !important;
	background-size: 1em auto;

	color: transparent !important;
}


button.valid.active,
.valid > button.active{
	background-image: url('/src/static/container/active@#{$rd-form-valid-color}.svg')   !important;
}
button.neutral.active,
.neutral > button.active{
	background-image: url('/src/static/container/active@#{$rd-form-neutral-color}.svg') !important;
}
button.search.active,
.search > button.active{
	background-image: url('/src/static/container/active@#{$rd-form-search-color}.svg')  !important;
}


// Liens
a{
	color: inherit;
	text-decoration: none;

	&:after{
		content: '';
		display: block;

		width: 0%;
		height: .1em;

		background-color: #ddd;

		transition: width .1s ease-in-out;

	}

	&:hover:after{
		width: 100%;
	}
}


// Textes
.grey{
	color: $secondary-color;
}