@import 'constants';

/* [3] Formulaires
=========================================================*/
section > form, .form{
	display: inline-block;
	position: relative;
		left: 50%;
		margin: .3em 0;
		padding: 1em;

	border-radius: 3px;
	border-color: $form-invalid-color;
	box-shadow: 0 0 1px #b7b7b7;

	background-color: #fff;

	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);

	&#choose-cluster{
		left: 0;
		-webkit-transform: none;
		transform: none;
	}

	&.valid{
		border-color: $form-valid-color;
	}

	&.neutral{
		border-color: $form-neutral-color;
	}

	&.search{
		border-color: $form-neutral-color;
	}

	// Textes centres
	.edit_search_view,
	.remove_search_view{
		display: inline-block;
			width: 100%;

		text-align: center;
		color: #aaaaaa;

		span{
			color: #888888;
		}
	}

	span.error-msg{
		display: inline-block;
		color: #F03C3C;
		font-size: 0.7em;
	}

}


/* (1) Champs de texte */
input[type=text],
input[type=mail],
input[type=password],
select,
.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{
	display: inline-block;
	margin: 1em 0;
	padding: .7em 1em;

	border-radius: 3px;
	border: 1px solid #d7dde8;

	color: #2f3033;

	transition: border .4s ease-in-out;

	&:focus,
	&:hover{
		border-color: $form-invalid-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{
	&:focus,
	&:hover{
		border-color: $form-valid-color;
	}
}

// Champs neutres
.neutral > input[type=text],
.neutral > input[type=mail],
.neutral > input[type=password],
.neutral > select,
input.neutral[type=text],
input.neutral[type=mail],
input.neutral[type=password],
select.neutral{
	&:focus,
	&:hover{
		border-color: $form-neutral-color;
	}
}

// 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]{
	&:focus,
	&:hover{
		border-color: $form-search-color;
	}
}



/* (2) Boutons */
button,
button.invalid,
.invalid > button{
	display: inline-block;
	position: relative;
		left: 50%;

	padding: .7em 1em;

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

	background: $form-invalid-color center center no-repeat;

	color: #fff;

	transition: background .4s ease-in-out;

	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);

	&:hover,
	&:focus,
	&:disabled{
		background-color: #fff;
		color: $form-invalid-color;
	}
}

// Boutons grisés
button.grey,
.grey > button{
	border-color: $form-grey-color;

	background-color: $form-grey-color;

	&:hover,
	&:focus,
	&:disabled{
		background-color: #fff;
		color: $form-grey-color;
	}
}

// Boutons valides
button.valid,
.valid > button{
	border-color: $form-valid-color;

	background-color: $form-valid-color;

	&:hover,
	&:focus,
	&:disabled{
		background-color: #fff;
		color: $form-valid-color;
	}
}

// Boutons neutres
button.neutral,
.neutral > button{
	border-color: $form-neutral-color;

	background-color: $form-neutral-color;

	&:hover,
	&:focus,
	&:disabled{
		background-color: #fff;
		color: $form-neutral-color;
	}
}

// Boutons recherche
button.search,
.search > button{
	border-color: $form-search-color;

	background-color: $form-search-color;

	&:hover,
	&:focus,
	&:disabled{
		background-color: #fff;
		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;
}



// "OU" separant les boutons
hr.OR[data-label]{
	display: block;
	position: relative;
		width: 100%;
		height: 0;

	border: 0;
	border-bottom: 1px dashed $form-invalid-color;

	&:before{
		content: attr(data-label);
		display: inline-block;
		position: relative;
			top: 50%;
			left: 50%;
			padding: 0 1em;

		background-color: #fff;

		color: $form-invalid-color;

		-webkit-transform: translateX(-50%) translatey(-50%);
		transform: translateX(-50%) translatey(-50%);
	}

}

// "OU" valide
.valid > hr.OR,
hr.OR.valid{
	border-bottom: 1px dashed $form-valid-color;
	&:before{
		color: $form-valid-color;
	}

}

// "OU" neutre
.neutral > hr.OR,
hr.OR.neutral{
	border-bottom: 1px dashed $form-neutral-color;
	&:before{
		color: $form-neutral-color;
	}

}

// "OU" recherche
.search > hr.OR,
hr.OR.search{
	border-bottom: 1px dashed $form-search-color;
	&:before{
		color: $form-search-color;
	}

}