/* @all-form-elements */
.all-form-elements {
	@include poly-padding--large;
}

*:focus {
	@include themify($themes) {
		outline: themed('borderColor') auto 3px;
	}
}

.gform_wrapper {
	@media (min-width: $medium-screen ) {
		padding: 3rem;
	}

	.page-main > &  {
		max-width: 1100px;
		margin: 0 auto;
		@include poly-margin-x--large;
		@include poly-padding-x--large;
		@include poly-padding-y;
		@include themify($themes) {
			border: 1px solid themed('borderColor');
		}
	}

	.gfield {
		@extend .input-wrap;
		@extend .textarea-wrap;

		padding: 2rem 15px 0;

		&.field_description_above {
			label.fieldset {
				margin-bottom: 0;
			}

			.gfield_description {
				margin-bottom: 1rem;
			}
		}

		&.complex-field {
			@media (min-width: $medium-screen) {
				margin-top: 3rem;
				margin-bottom: 2rem;
			}
			
			label {
				height: 3rem;
			}
		}

		&.tallElem label {
			top: 25px;
		}

		&.select-field:not(.multi-field) {

			label {
				width: 80%;
			}

			&.focused {
				&:not(.complex-field) > label:not(.fieldset)s {
					padding: 0;
					background-color: transparent;
					font-size: $x-small-font !important;
					top: 0;
				}

				.select2 + label {
					top: -6px;
				}
			}
		}

		label {
			display: block;
			z-index: 3;
			width: 80%;

			@include themify($themes) {
				font-size: themed('smallTitleDesktop');
			}

			&.gfield_label {
				@include themify($themes) {
					font-size: themed('smallTitleDesktop');
				}
			}

			&.fieldset-radiocheck {
				margin-bottom: 1rem;
			}

			&.fieldset {
				position: relative;
				padding: 0;
				min-height: auto;

				&:not(.fieldset-radiocheck) {
					@include themify($themes) {
						font-size: themed('smallTitleMobile');

						@media (min-width: $medium-screen ) {
							font-size: themed('mediumTitleDesktop');
						}
					}
				}
			}
		}

		textarea {
			border: none;
			border-bottom: 2px solid $concrete;
		}

		.ginput_container {
			overflow: unset;
			position: initial;
		}

		input, .select2 {
			margin-top: 5px;
		}

		.select2 {
			margin-bottom: 0;
		}

		span[id$="container"] {
			position: relative;
			overflow: hidden;
			display: block;

			label {
				top: 0;
			}

			&.focused {
				label:not(.fieldset) {
					padding: 0;
					background-color: transparent;
					font-size: $x-small-font !important;
				}
			}
		}

		[class^="gchoice"] {
			padding: 0 !important;
			
			input {
				height: 1rem;
			}

			label {
				position: relative;
				padding-left: 35px;
				margin-bottom: 0;
				cursor: pointer;
				user-select: none;
				padding-top: 0;
				font-size: inherit;
				font-weight: 200;
				background-color: transparent;
				width: 100%;
			}

			&:last-child {
				margin-right: 0;
			}

			@media (max-width: #{$medium-screen - 1}) {
				[class^="gchoice"] {
					margin-right: 0;
				}
			}
		}

		&_checkbox {
			display: flex;
			flex-flow: row wrap;
			  
			[class^="gchoice"] {
				@extend .checkbox;
				width: 40%;

				@media (max-width: #{$medium-screen - 1}) {
					width: 100%;
				}

				label {
					pointer-events: initial;
					font-size: 0.9rem !important;
					height: auto;
				}
			}
		}

		&_radio {
			[class^="gchoice"] {
				@extend .radio;

				label {
					pointer-events: initial;
					font-size: 0.9rem !important;
					height: auto;
				}
			}
		}

		&.file-upload {
			
			.ginput_container_fileupload {
				display: flex;
				position: relative;
				margin-top: 1rem;
			}

			label {
				margin-left: 10px;
				margin-top: -8px !important;
				padding: 0 !important;

				@media (max-width: #{$medium-screen - 1}) {
					margin-top: 0 !important;
				}

				@include themify($themes) {
					font-size: themed('smallTitleDesktop') !important;
				}
			}

			&.focused {
				label {
					@include themify($themes) {
						font-size: themed('smallTitleDesktop') !important;
					}
					@media (max-width: #{$medium-screen - 1}) {
						@include themify($themes) {
							font-size: themed('xsmallTitle') !important;
						}
					}
				}
			}

			input[type="file"] {
				position: absolute;
				left: 0;
				opacity: 0;
				bottom: 0;
				height: 100% !important;
				z-index: 5;
				cursor: pointer;
			}

			.filename {
				border-bottom: none !important;
				margin: 10px;
			}

			button {
				background-position: 90% center;
				background-repeat: no-repeat;
				background-size: 20px 16px;
				font-weight: 700;
				margin: 20px 10px;
				padding-right: 3.3rem;
				padding-top: 1rem;
				white-space: nowrap;

				.browser--ie11 & {
					padding-right: 4.3rem;
				}
				
				@include themify($themes) {
					$escapeArrowColor: str-replace(quote(#{themed('ctaColor')}), '#', '');
					background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpolygon  fill='%23#{$escapeArrowColor}' points='14.54 7.63 13.04 8.76 13.71 10.97 5.18 10.97 5.18 12.97 13.71 12.97 13.04 15.17 14.54 16.3 19.86 12.8 19.86 11.13 14.54 7.63'/%3E%3C/svg%3E");
					box-shadow: rgba(themed('ctaColor'), 0.3) 4px 4px 20px;
				}

				&.cta--secondary {
					@include themify($themes) {
						box-shadow: rgba(themed('ctaColor'), 0.3) 4px 4px 20px;
					}
				}
			}
		}


		::-webkit-input-placeholder,
		::-moz-placeholder,
		:-ms-input-placeholder,
		:-moz-placeholder { 
		  color: white !important;
		}

		&.focused {
			::-webkit-input-placeholder,
			::-moz-placeholder,
			:-ms-input-placeholder,
			:-moz-placeholder { 
			  color: $slate-grey;
			}
		}

		&.gfield_error,
		&.gfield_error.gfield_contains_required {
			background-color: white;
			margin-bottom: 3px;
			border-top: none;
			border-bottom: none;
			padding-bottom: 6px;
			padding-top: 8px;

			&.gfield_contains_required {
				div.gfield_description {
					padding: 0.5rem 0;
					margin: 0;

					@include themify($themes) {
						color: themed('errorColor');
						font-family: themed('errorFont');
						font-weight: themed('errorWeight');
						font-size: themed('errorSize');
						line-height: themed('errorLineHeight');
					}
				}
			}

			div.ginput_container:not(.ginput_complex):not(.ginput_container_radio):not(.ginput_container_checkbox),
			span[id$="container"]:not(.has-select):not(.select2-selection__rendered)  {
				&:after {
					content: '';
					width: 20px;
					height: 20px;
					display: block;
					position: absolute;
					right: 15px;
					top: 1.5rem;
	
					@include themify($themes) {
						background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{themed('errorColor')}' viewBox='0 0 24 24'%3E%3Ctitle%3E_Plan de travail 3 copie 10%3C/title%3E%3Crect x='10.59' y='4.57' width='2' height='14.82' transform='translate(-5.07 11.7) rotate(-45)'/%3E%3Crect x='5.54' y='14.25' width='5.56' height='2' transform='translate(-8.35 10.35) rotate(-45)'/%3E%3Crect x='12.09' y='7.7' width='5.56' height='2' transform='translate(-1.8 13.06) rotate(-45)'/%3E%3C/svg%3E");
					}
				}
			}

			input {
				border: none;
				border-bottom: 2px solid $red-ribbon ;

				@include themify($themes) {
					border-bottom: 2px solid themed('errorColor');
				}
			}

			.select2-selection__rendered {
				@include themify($themes) {
					border-bottom: 2px solid themed('errorColor');
				}
			}

			label {
					color: black;
			}
		}
	}

	div.validation_error {
		margin-bottom: 25px;
		padding: 16px 0;
		clear: both;
		width: 100%;

		@include themify($themes) {
			color: themed('errorColor');
			font-family: themed('errorFont');
			font-weight: themed('errorWeight');
			font-size: themed('errorSize');
			line-height: themed('errorLineHeight');
        }
	}

	.clear-multi {
		display: flex;
		flex-direction: column;

		@media (min-width: $medium-screen) {
			flex-direction: row;

			> div {
				margin-right: 2rem;
			}
		}

		> div {
			display: flex;
			flex-direction: row;

			&.focused {
				label:not(.fieldset) {
					padding: 0;
					font-size: $x-small-font !important;
				}
			}
		}
	}

	button.gform_button {
		width: 150px;
		margin-top: 50px;

		span {
			// display: block;
			z-index: 5;
			position: relative;
			width: 100%;
			display: flex;
			justify-content: space-between;
			background-image: $arrow-white-svg;
			background-repeat: no-repeat;
			background-size: 20px 20px;
			background-position: right center;
		}
	}
	.select2-container--default {
		&.select2-container--focus {
			.select2-selection--multiple {
				@include themify($themes) {
					border: 1px solid themed('ctaColor');
				}
			}
		}

		.select2-selection--single {
			.select2-selection__arrow {
				top: 6px;
			}

			.select2-selection__rendered {
				padding-right: 30px !important;
			}

		}
		
		&.select2-container--open {
			box-shadow: 5px 9px 23px rgba(15,128,238,.3);

			.select2-dropdown {
				left: -1px;
			}
		
			.select2-dropdown--below {
				margin-top: -10px;
			}
		}
	}

	input:-webkit-autofill, 
	textarea:-webkit-autofill, 
	select:-webkit-autofill {
		background-color: $white !important;
		box-shadow:0 0 0 50px white inset;
  		transition: background-color 5000s ease-in-out 0s;

		&:hover,
		&:focus {
			background-color: $white !important;
			box-shadow:0 0 0 50px white inset;
		}
	}

	.gform_footer {
		display: flex;
		justify-content: flex-end;

		.gform_ajax_spinner {
			height: 1rem;
			width: 1rem;
		}
	}

	@media (max-width: #{$medium-screen - 1}) {
		.ginput_right,
		.ginput_left {
			width: 100%;
			float: none;
		}
		

		ul.gfield_radio {
			margin-top: 10px;
		}

		label {
			&:not(.fieldset),
			&.fieldset-radiocheck {
				@media (max-width: #{$medium-screen - 1}) {
					@include themify($themes) {
						font-size: themed('xsmallTitle') !important;
					}
				}
			}

			&.fieldset {
				margin-bottom: 1rem !important;
				height: auto !important;
				width: 100% !important;
			}
		}

		.gfield {
			padding-top: 1rem;

			&.select-field {
				label {
					width: 78% !important;
				}
			}

			&.tallElem:not(.multi-field) {

				&.file-upload {
					label {
						top: 10px;
					}
				}

				label {
					top: 20px;

					&.fieldset {
						top: 0;
					}
				}
			}

			&:not(:first-child) {
				.fieldset {
					margin-top: 1rem;
				}
			}
		}

		.complex-field.focused label:not(.fieldset) {
			margin-top: -20px;
		}
	}

}