/*--------------------------------------------------------------
	Module : Form
	Version : 1.0.0
	--------------------------------------------------------------*/

@import "input";
@import "radio";
@import "checkbox";

/** Formulaire design */
.wpeo-form .form-element {
	width: 100%;

	.form-label {
		display: block;
		font-size: 12px;
		text-transform: uppercase;
		font-weight: 900;
		margin: 0.6em 0;
		color: rgba(0,0,0,0.8);
	}
	.form-field-container {
		display: block;
		@include flexbox();
		flex-wrap: nowrap;

		&:hover {
			box-shadow: none;
		}
	}
	.form-field {
		@include transition();

		&:hover {
			box-shadow: none;
		}
	}
	.form-sublabel {
		font-size: 12px;
		font-style: italic;
		color: rgba(0,0,0,0.6);
	}
}

/** Alignement */
.wpeo-form .form-element {
	.form-field-inline {
		margin-right: 0.4em;
	}
	&.form-align-vertical .form-field-container {
		flex-direction: column;
	}
	&.form-align-horizontal .form-field-container {
		flex-wrap: wrap;
	}
}

/** Couleur */
.wpeo-form .form-element {
	.form-field-container {
		.form-field, [class*="form-field-icon"] {
			background: $color__grey;
		}
		&:hover .form-field, &:hover [class*="form-field-icon"] {
			background: darken($color__grey, 5%);
		}
	}
	[class*="form-field-label"] {
		background: darken($color__grey, 5%);
	}
}
.wpeo-form.form-light .form-element {
	.form-field-container {
		.form-field, [class*="form-field-icon"] {
			background: #fff;
		}
		&:hover .form-field, &:hover [class*="form-field-icon"] {
			background: $color__grey;
		}
	}
	[class*="form-field-label"] {
		background: $color__grey;
	}
}

/** Icone */
.wpeo-form .form-element {
	[class*="form-field-icon"] {
		padding: 0.8em 0 0.8em 0.8em;
		color: rgba(0,0,0,0.4);
		font-size: 16px;
		@include transition();
	}
	.form-field-icon-prev {
		padding: 0.8em 0 0.8em 0.8em;
	}
	.form-field-icon-next {
		padding: 0.8em 0.8em 0.8em 0;
	}
}

/** Previous & next label */
.wpeo-form .form-element {
	[class*="form-field-label"] {
		padding: 1.2em 1em;
		font-size: 12px;
	}
	.form-field-label-prev {
		border-right: 1px solid rgba(0,0,0,0.1);
	}
	.form-field-label-next {
		border-left: 1px solid rgba(0,0,0,0.1);
	}
}

/** Required */
.wpeo-form .form-element {
	&.form-element-required .form-label::after {
		display: inline-block;
		content: '*';
		color: $color__red;
		padding: 0 0.4em;
	}
}

/** Erreur sur un champs */
.wpeo-form .form-element {
	&.form-element-error .form-field-container {
		border: 1px solid $color__red;
	}
}

/** Champs disabled */
.wpeo-form .form-element {
	&.form-element-disable .form-field-container {
		opacity: 0.6;
		pointer-events: none;
	}
}

/* Simple */
.wpeo-form {
	// @import "simple";
}


/* Moderne */
.wpeo-form {
	// @import "moderne";
}
