/* Forms
--------------------------------------------------------------*/
// Form
// Fieldset
// Label
// Input
// Texarea
// Select
// Checkbox
// Radio button
// Placeholder
// Loader ajax
// Clear input Search
// Required msg
// Autofill
// Others

// -------------------------------------------------------------
// Form
// -------------------------------------------------------------
form {
	.full,
	.half {
		margin-bottom: 2rem;
		
		&:not(.gdpr){
			label{
				text-transform: uppercase;
				letter-spacing: 2px;
			}
		}	
	}

	.wrapper-half {
		@media (min-width: $screen-md) {
			display: grid;
			@include grid-gap-small();
			grid-template-columns: repeat(2, 1fr);
		}
	}

	.wpcf7-list-item {
		margin-left: 0;
		margin-right: 2rem;
	}
}

// -------------------------------------------------------------
// Fieldset
// -------------------------------------------------------------
fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
	margin-bottom: 1rem;
	font-weight: 700;
}

// -------------------------------------------------------------
// Label
// -------------------------------------------------------------
form {
	label {
		display: block;
		margin-bottom: 1rem;
		font-weight: 700;
		font-size: $min-font;
	}

	.checkbox-wrapper label,
	.radio-wrapper label,
	.wpcf7-acceptance label,
	.field-gdpr label {
		font-weight: 400;
	}

	.field-gdpr label,
	.wpcf7-acceptance label {
		a {
			text-decoration: underline;
			color: $txt;

			@media (hover: hover) {
				&:hover {
					text-decoration: none;
					color: $link-hover;
				}
			}
		}
	}
	
	.label-gdpr{
		font-weight: 300;
	}
}

// -------------------------------------------------------------
// Input
// -------------------------------------------------------------
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="phone"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"] {
	overflow: visible;
	display: block;
	margin: 0;
	width: 100%;
	background: $form-bck;
	color: $form-color;
	font-weight: $form-weight;
	font-family: $font-body;
	font-weight: 500;
	line-height: $form-lineheight;
	border: $form-border $form-border-color;
	border-radius: $form-radius;
	box-shadow: $form-shadow;
	-webkit-appearance: none;
	@include fluid-type($form-min_font, $form-max_font);

	&:focus {
		outline: none;
	}
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="phone"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	@include padding-left($min-p-h-form, $max-p-h-form);
	@include padding-right($min-p-h-form, $max-p-h-form);
	@include padding-top($min-p-v-form, $max-p-v-form);
	@include padding-bottom($min-p-v-form, $max-p-v-form);
}

// -------------------------------------------------------------
// Input type submit
// -------------------------------------------------------------
form .submit-wrapper.disabled {
	background-color: rgba($link-color, 0.2);

	@media (hover: hover) {
		&:hover {
			background-color: rgba($link-color, 0.2);

			&:before,
			&:after {
				display: none;
			}
		}
	}

	input[type="submit"] {
		&:disabled {
			background-color: rgba($link-color, 0.2);

			@media (hover: hover) {
				&:hover {
					background-color: rgba($link-color, 0.2);

					&:before,
					&:after {
						display: none;
					}
				}
			}
		}
	}
}

// -------------------------------------------------------------
// Input type search
// -------------------------------------------------------------
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -0.2rem;
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button {
	//If you want the cross on the input search change css and design it
	display: none;
}

// -------------------------------------------------------------
// Input type date
// -------------------------------------------------------------
input[type="date"] {
	padding-top: $min-p-v-form; // Fallback for older browsers
	padding-bottom: $min-p-v-form; // Fallback for older browsers
	padding-left: $min-p-h-form; // Fallback for older browsers
	padding-right: $form-padding-right-date-fallback; // Fallback for older browsers
	background: $form-bck url("img/date.svg") right $min-p-h-form center no-repeat; // Fallback for older browsers

	position: relative;
	@include padding-left($min-p-h-form, $max-p-h-form);
	padding-right: $form-padding-right-date;
	@include padding-top($min-p-v-form, $max-p-v-form);
	@include padding-bottom($min-p-v-form, $max-p-v-form);
	background: $form-bck url("img/date.svg") right $final-value-date center no-repeat;
	background-size: $size-picto-date-w $size-picto-date-h;

	&::-webkit-inner-spin-button {
		display: none;
	}

	&::-webkit-calendar-picker-indicator {
		// /!\ On Chrome, position it well under the pictogram, because it is the only clickable area
		opacity: 0;
		position: absolute;
		right: 2rem;
		width: 2rem;
		height: 2rem;
	}
}

// -------------------------------------------------------------
// Input type file
// -------------------------------------------------------------
input[type="file"] {
	padding-top: $min-p-v-form; // Fallback for older browsers
	padding-bottom: $min-p-v-form; // Fallback for older browsers
	padding-left: $min-p-h-form; // Fallback for older browsers
	padding-right: $form-padding-right-file-fallback; // Fallback for older browsers
	background: $form-bck url("img/file.svg") right $min-p-h-form center no-repeat; // Fallback for older browsers

	position: relative;
	@include padding-left($min-p-h-form, $max-p-h-form);
	padding-right: $form-padding-right-file;
	@include padding-top($min-p-v-form, $max-p-v-form);
	@include padding-bottom($min-p-v-form, $max-p-v-form);
	background: $form-bck url("img/file.svg") right $final-value-file center no-repeat;
	background-size: $size-picto-file-w $size-picto-file-h;

	// Remove "Choose file"
	&::file-selector-button {
		display: none;
	}

	// Safari override -> otherwise the field is empty
	@media not all and (min-resolution: 0.001dpcm) {
		@supports (-webkit-appearance: none) {
			&::file-selector-button {
				display: block;
			}
		}
	}
}

// -------------------------------------------------------------
// Textarea
// -------------------------------------------------------------
textarea {
	display: block;
	background: $form-bck;
	resize: vertical;
	color: $form-color;
	font-family: $font-body;
	font-weight: $form-weight;
	line-height: $form-lineheight;
	border: $form-border $form-border-color;
	margin: 0;
	border-radius: $form-radius-textarea;
	box-shadow: $form-shadow;
	-webkit-appearance: none;
	overflow: auto;
	width: 100%;
	@include fluid-type($form-min_font, $form-max_font);

	&:focus {
		outline: none;
	}
}

// -------------------------------------------------------------
// Select
// -------------------------------------------------------------
select {
	padding-top: $min-p-v-form; // Fallback for older browsers
	padding-bottom: $min-p-v-form; // Fallback for older browsers
	padding-left: $min-p-h-form; // Fallback for older browsers
	padding-right: $form-padding-right-select-fallback; // Fallback for older browsers
	background: $form-bck url("img/select.svg") right $min-p-h-form center no-repeat; // Fallback for older browsers

	display: block;
	cursor: pointer;
	border: $form-border $form-border-color;
	border-radius: $form-radius;
	color: $form-color;
	font-weight: $form-weight;
	line-height: $form-lineheight;
	font-family: $font-body;
	box-shadow: $form-shadow;
	width: 100%;
	text-transform: none;
	margin: 0;
	@include fluid-type($form-min_font, $form-max_font);
	@include padding-left($min-p-h-form, $max-p-h-form);
	padding-right: calc((#{$min-p-h-form-s} * 2) + #{$size-picto-select-w}); // Fallback for older browsers
	padding-right: $form-padding-right-select;
	@include padding-top($min-p-v-form, $max-p-v-form);
	@include padding-bottom($min-p-v-form, $max-p-v-form);
	background: $form-bck url("img/select.svg") right $final-value-select center no-repeat;
	background-size: $size-picto-select-w $size-picto-select-h;

	/* Remove default arrow */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	opacity: 1;

	&::-ms-expand {
		display: none;
		/* Hide the default arrow in ie10 and ie11 */
	}

	option {
		color: $form-color;
		@include fluid-type($form-min_font, $form-max_font);
	}

	&:focus {
		outline: none;
		// outline: 0.1rem auto rgba($primary,.5);
		// Uncomment if you want custom outline
	}
}

/* Remove default arrow */
// Target IE
@media screen and (min-width: 0\0) {
	select {
		background-image: none\9;
		padding: 0.5rem\9;
		padding-right: 3rem;
		background-size: 2.5rem 2.5rem;
	}
}

/* target FF  */
/*@-moz-document url-prefix() {}*/

// -------------------------------------------------------------
// Checkbox
// -------------------------------------------------------------
.checkbox-wrapper,
.radio-wrapper {
	display: flex;
	align-items: center;
}

input[type="checkbox"]:not([name="faq"]) {
	/* Checkbox based on HTML :
	<input type="checkbox"><label class="checkbox">Le label</label>
	The label is sometimes a span */
	box-sizing: border-box;
	padding: 0;
	position: absolute;
	opacity: 0;
	// width: 0;
	display: block;

	&.error {
		+ label,
		+ span {
			&:before {
				border-color: $error-red;
			}
		}
	}

	+ label,
	+ span {
		user-select: none;
		position: relative;
		cursor: pointer;
		padding: 0 0 0 3rem;
		min-height: inherit;
		margin: 0;
		display: block;

		&:after,
		&:before {
			content: "";
			display: block;
			position: absolute;
			@include transition-base();
		}

		&:before {
			left: 0;
			width: 1.8rem;
			height: 1.8rem;
			top: 0.2rem;
			border: $form-check-border $form-check-border-color;
			background: $form-check-bck;
		}

		&:after {
			top: 0.6rem;
			left: 0.8rem;
			width: 0.3rem;
			height: 0.6rem;
			border-color: $form-check-V;
			border-style: solid;
			border-width: 0 0.2rem 0.2rem 0;
			transform: rotate(45deg);
			opacity: 0;
		}
	}

	&:checked + label,
	&:checked + span {
		&:before {
			background: $form-check-bck-checked;
			border-color: $form-check-border-color-checked;
		}

		&:after {
			opacity: 1;
			border-color: $form-check-V-checked;
		}
	}

	&:focus + label,
	&:focus + span {
		&:before {
			border-color: $form-check-border; // to navigate with the tabs
		}
	}

	@media (hover: hover) {
		&:hover + label:before,
		&:hover + span:before {
			background: $form-check-border-color;
			border-color: $form-check-border-color;
		}
	}
}

span.wpcf7-list-item {
	margin-left: 0;
	display: block;
}

// -------------------------------------------------------------
// Radio button
// -------------------------------------------------------------
/* Radio based on HTML :
<input type="radio"><label class="radio">Le label</label>
The label is sometimes a span */

input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	box-sizing: border-box;
	padding: 0;
	display: block;

	&.error {
		+ label,
		+ span {
			&:before {
				border-color: $error-red;
			}
		}
	}

	+ label,
	+ span {
		user-select: none;
		position: relative;
		cursor: pointer;
		padding: 0 0 0 3rem;
		min-height: inherit;
		margin: 0;

		&:before {
			@include transition-base();
			border-radius: 100%;
		}

		&:before {
			content: "";
			display: block;
			position: absolute;
			left: 0;
			top: -0.2rem;
			width: 1.2rem;
			height: 1.2rem;
			border-radius: 100%;
			border: $form-radio-border $form-radio-border-color;
			background: $form-radio-bck;
		}
	}

	&:checked + label,
	&:checked + span {
		&:before {
			background: $form-radio-bck-checked;
			border-color: $form-radio-border-color-checked;
		}
	}

	&:focus + label,
	&:focus + span {
		&:before {
			border-color: $form-radio-border; // to navigate with the tabs
		}
	}

	//	@media (hover: hover) {

	// 	&:hover + label:before,
	// 	&:hover + span:before {
	// 		background: $form-radio-bck-checked;
	// 		border-color: $form-radio-border-color-checked;
	// 	}
	// }
}

// -------------------------------------------------------------
// Placeholder
// -------------------------------------------------------------
form {
	// Base value of mixin : ($color:$txt, $opacity:.2, $size:1.6rem, $f-family:$font-title)
	@include placeholder();
}

// -------------------------------------------------------------
// Loader ajax
// -------------------------------------------------------------
form {
	.send,
	.apply,
	.subscribe {
		display: inline-flex;
		align-items: flex-end;

		input {
			width: auto;
		}

		.ajax-loader {
			margin-left: 2rem;
		}
	}
}

// -------------------------------------------------------------
// Clear input Search
// -------------------------------------------------------------
/* clears the 'X' from Internet Explorer */
input[type="search"]::-ms-clear {
	display: none;
	width: 0;
	height: 0;
}

input[type="search"]::-ms-reveal {
	display: none;
	width: 0;
	height: 0;
}

/* clears the 'X' from Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
	display: none;
}

// -------------------------------------------------------------
// Required msg
// -------------------------------------------------------------
.required-msg {
	font-size: $lite-font;
	opacity: 0.6;
}

// -------------------------------------------------------------
// Autofill
// -------------------------------------------------------------
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 999rem $bg-light-gray inset;
	transition: background-color 5000s ease-in-out 0s;
}

input:-webkit-autofill {
	-webkit-text-fill-color: $form-color !important;
}

// -------------------------------------------------------------
// Others
// -------------------------------------------------------------

optgroup {
	font-family: $font-body;
	@include fluid-type();
	line-height: $line-height;
	margin: 0;
}

progress {
	vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

details {
	display: block;
}

summary {
	display: list-item;
}

template {
	display: none;
}