@use "../../../../../dev/scss/variables";
@use "../../../../../dev/scss/ehp-full-height" as ehp-full-height;
@use "../../../../../dev/scss/ehp-column-structure" as ehp-column-structure;

@mixin column-width-sizes() {
	&-33 {
		--ehp-column-width: 32.2%;
		max-width: calc(var(--ehp-column-width) - calc(var(--ehp-form-column-gap) / 2));
	}

	&-50 {
		--ehp-column-width: 50%;
		max-width: calc(var(--ehp-column-width) - var(--ehp-form-column-gap) / 2);
	}

	&-100 {
		--ehp-column-width: 100%;
		max-width: 100%;
	}
}

.ehp-form {
	--ehp-column-width: 100%;
	--ehp-form-row-gap: 32px;
	--ehp-form-column-gap: 32px;
	--ehp-form-button-icon-spacing: 8px;
	--ehp-form-button-icon-position: row;
	--ehp-form-text-container-align: center;
	--ehp-form-text-spacing: 20px;
	--ehp-form-heading-color: #000;
	--ehp-form-description-color: #000;
	--ehp-form-label-spacing: 0;
	--ehp-form-label-color: #000;
	--ehp-form-mark-color: #FF0000;
	--ehp-form-field-text-color: #000;
	--ehp-form-field-bg-color: #FFF;
	--ehp-form-field-border-color: #000;
	--ehp-form-field-border-width: 2px;
	--ehp-form-button-align: stretch;
	--ehp-form-button-icon-size: 16px;
	--ehp-form-button-icon-spacing: 10px;
	--ehp-form-button-text-color: #ffffff;
	--ehp-form-button-text-color-hover: #ffffff;
	--ehp-form-button-border-width: 1px;
	--ehp-form-button-border-color: #28292B;
	--ehp-form-button-padding-block-end: 8px;
	--ehp-form-button-padding-block-start: 8px;
	--ehp-form-button-padding-inline-end: 16px;
	--ehp-form-button-padding-inline-start: 16px;
	--ehp-form-content-width: 640px;
	--ehp-form-box-padding-block-end: 60px;
	--ehp-form-box-padding-block-start: 60px;
	--ehp-form-box-padding-inline-end: 60px;
	--ehp-form-box-padding-inline-start: 60px;
	--ehp-form-content-position: center;

	--ehp-form-order-start: 1;
	--ehp-form-order-end: 2;
	--ehp-text-order-start: 2;
	--ehp-text-order-end: 1;

	align-items: var(--ehp-form-content-position);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-block-start: var(--ehp-form-box-padding-block-start);
	padding-block-end: var(--ehp-form-box-padding-block-end);
	padding-inline-start: var(--ehp-form-box-padding-inline-start);
	padding-inline-end: var(--ehp-form-box-padding-inline-end);
	position: relative;

	@include ehp-full-height.full-height-viewports();

	&.has-shape-custom.shape-type-box {
		--ehp-shapes-border-radius-block-end: var(--form-box-border-radius-block-end);
		--ehp-shapes-border-radius-block-start: var(--form-box-border-radius-block-start);
		--ehp-shapes-border-radius-inline-end: var(--form-box-border-radius-inline-end);
		--ehp-shapes-border-radius-inline-start: var(--form-box-border-radius-inline-start);
	}

	&.has-border {
		border-color: var(--ehp-form-box-border-color);
		border-style: solid;
		border-width: var(--ehp-form-box-border-width);
	}

	&.has-layout-preset {

		&-quick-connect {
			gap: var(--ehp-form-elements-spacing);

			& > *:is(:not(.ehp-form__overlay)) {
				max-width: var(--ehp-form-content-width);
				width: 100%;
				z-index: variables.$first-layer;
			}
		}

		&-engage {

			& .ehp-form__content {
				gap: var(--ehp-form-elements-spacing);
			}
		}

		&-interact,
		&-engage {
			--ehp-form-text-container-align: flex-start;

			display: grid;
			gap: var(--ehp-form-elements-gap);
			grid-template-columns: 1fr;

			& .ehp-form__content {
				order: var(--ehp-form-order);
			}
		}

		&-interact {

			& .ehp-form__text-container {
				height: 100%;
				justify-content: var(--ehp-form-content-alignment);
				order: var(--ehp-text-order);
			}
		}

		&-engage {

			& .ehp-form__image-container {
				align-items: var(--ehp-form-content-alignment);
				height: 100%;
				order: var(--ehp-text-order);
			}
		}
	}

	@include ehp-column-structure.has-column-structure();

	& .ehp-image {
		--ehp-image-height: var(--form-image-height);
		--ehp-image-min-height: var(--form-image-min-height);
		--ehp-image-position: var(--form-image-position);
		--ehp-image-width: var(--form-image-width);
		--ehp-image-border-color: var(--form-image-border-color);
		--ehp-image-border-width: var(--form-image-border-width);
		--ehp-image-border-radius-block-end: var(--form-image-border-radius-block-end);
		--ehp-image-border-radius-block-start: var(--form-image-border-radius-block-start);
		--ehp-image-border-radius-inline-end: var(--form-image-border-radius-inline-end);
		--ehp-image-border-radius-inline-start: var(--form-image-border-radius-inline-start);
	}

	&__content {
		display: flex;
		height: 100%;
		flex-direction: column;
		justify-content: var(--ehp-form-content-alignment);
		z-index: variables.$first-layer;
	}

	&__wrapper {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		row-gap: var(--ehp-form-row-gap);
		column-gap: var(--ehp-form-column-gap);
	}

	&__field-group {
		display: flex;
		flex-direction: column;
		gap: var(--ehp-form-label-spacing);

		&.is-field-required.is-mark-required .ehp-form__field-label {

			&::after {
				content: "*";
				color: var(--ehp-form-mark-color);
				display: inline-block;
			}
		}
	}

	&__field-group,
	&__submit-group {
		width: 100%;

		&.has-width {

			@include column-width-sizes();

			&-md {
				@media screen and (max-width: variables.$screen-tablet-max) {
					@include column-width-sizes();
				}
			}

			&-sm {
				@media screen and (max-width: variables.$screen-mobile-max) {
					@include column-width-sizes();
				}
			}
		}
	}

	&__text-container {
		align-items: var(--ehp-form-text-container-align);
		display: flex;
		flex-direction: column;
		gap: var(--ehp-form-text-spacing);
		z-index: variables.$first-layer;
	}

	&__image-container {
		display: flex;
	}

	&__heading {
		color: var(--ehp-form-heading-color);
		margin: 0;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	&__description {
		color: var(--ehp-form-description-color);
		margin: 0;
	}

	&__field-label {
		color: var(--ehp-form-label-color);
	}

	&__field:not(.ehp-form__select),
	&__field[type="text"],
	&__field[type="email"],
	&__field[type="tel"],
	&__textarea,
	&__select {
		background-color: var(--ehp-form-field-bg-color);
		border: 0;
		border-radius: 0;
		color: var(--ehp-form-field-text-color);

		&::placeholder {
			color: var(--ehp-form-field-text-color);
		}

		.has-border & {
			border-color: var(--ehp-form-field-border-color);
			border-style: solid;
			border-width: var(--ehp-form-field-border-width);
		}

		.has-shape-sharp & {
			border-radius: variables.$corners-shape-sharp;
		}

		.has-shape-rounded & {
			border-radius: variables.$corners-shape-rounded;
		}

		.has-shape-round & {
			border-radius: variables.$corners-shape-round;
		}

		.has-shape-default & {
			border-radius: variables.$corners-shape-default;
		}
	}

	@mixin has-button-align() {
		&-center {
			margin-inline: auto;
		}

		&-flex-end {
			margin-inline-start: auto;
		}

		&-flex-start{
			margin-inline-end: auto;
		}
	}

	&__submit-group {
		align-items: flex-end;
		display: flex;

		&.has-button-align {

			@include has-button-align();

			&-md {
				@media screen and (max-width: variables.$screen-tablet-max) {
					@include has-button-align();
				}
			}

			&-sm {
				@media screen and (max-width: variables.$screen-mobile-max) {
					@include has-button-align();
				}
			}
		}
	}

	&__button[type="submit"] {
		align-items: center;
		border: 0;
		color: var(--ehp-form-button-text-color);
		display: flex;
		flex-direction: var(--ehp-form-button-icon-position);
		flex-grow: 1;
		justify-content: center;
		gap: var(--ehp-form-button-icon-spacing);
		text-decoration: none;
		transition: variables.$transition;

		&:hover,
		&:focus {
			color: var(--ehp-form-button-text-color-hover);
			transition: variables.$transition;
		}

		&.has-border {
			border-color: var(--ehp-form-button-border-color);
			border-style: solid;
			border-width: var(--ehp-form-button-border-width);
		}

		&.is-type {

			&-button {
				padding-block-end: var(--ehp-form-button-padding-block-end);
				padding-block-start: var(--ehp-form-button-padding-block-start);
				padding-inline-end: var(--ehp-form-button-padding-inline-end);
				padding-inline-start: var(--ehp-form-button-padding-inline-start);
				text-decoration: none;
			}

			&-link,
			&-link:not([href]):not([tabindex]) {
				background: none;

				&:hover,
				&:focus {
					background: none;
				}

				.ehp-form__button-text {
					text-decoration: underline;
				}
			}
		}

		&.has-shape-custom.shape-type-button {
			--ehp-shapes-border-radius-block-end: var(--form-button-border-radius-block-end);
			--ehp-shapes-border-radius-block-start: var(--form-button-border-radius-block-start);
			--ehp-shapes-border-radius-inline-end: var(--form-button-border-radius-inline-end);
			--ehp-shapes-border-radius-inline-start: var(--form-button-border-radius-inline-start);
		}

		& svg {
			fill: currentColor;
			height: 1em;
			width: 1em;
		}

		& i {
			color: inherit;
			font-size: inherit;
		}
	}

	&__select {
		position: relative;

		.select-caret-down-wrapper {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			inset-inline-end: 10px;
			pointer-events: none;
			font-size: 11px;

			svg {
				display: unset;
				width: 1em;
				aspect-ratio: unset;
				fill: currentColor;
			}

			i {
				font-size: 19px;
				line-height: 2;
			}
		}

		select {
			appearance: none;

			&::-ms-expand {
				display: none;
			}
		}
	}

	&.has-image-stretch {
		--form-image-width: 100%;
		--form-image-height: 100%;

		padding: 0;

		&.has-layout-preset-engage .ehp-form__content {
			padding-inline-start: var(--ehp-form-box-padding-inline-start);
			padding-inline-end: var(--ehp-form-box-padding-inline-end);
			padding-block-start: var(--ehp-form-box-padding-block-start);
			padding-block-end: var(--ehp-form-box-padding-block-end);
		}
	}

	&__overlay {
		height: 100%;
		left: 0;
		opacity: var(--ehp-form-overlay-opacity);
		position: absolute;
		top: 0;
		width: 100%;
		z-index: variables.$ground-layer;
	}
}