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

.ehp-flex-hero {
	--flex-hero-content-alignment-showcase: center;
	--flex-hero-content-alignment-storytelling: start;
	--flex-hero-content-position: flex-start;
	--flex-hero-content-width: 648px;
	--flex-hero-buttons-space-between: 16px;
	--flex-hero-gap: 60px;
	--flex-hero-element-spacing: 40px;

	--flex-hero-intro-color: #{variables.$global-colors-text};
	--flex-hero-heading-color: #{variables.$global-colors-secondary};
	--flex-hero-subheading-color: #{variables.$global-colors-secondary};

	--flex-hero-button-primary-icon-spacing: 10px;
	--flex-hero-button-primary-text-color: #{variables.$global-colors-white};
	--flex-hero-button-primary-text-color-hover: #{variables.$global-colors-text};
	--flex-hero-button-primary-border-width: 0;
	--flex-hero-button-primary-border-color: transparent;
	--flex-hero-button-primary-border-radius-block-end: #{variables.$corners-shape-default};
	--flex-hero-button-primary-border-radius-block-start: #{variables.$corners-shape-default};
	--flex-hero-button-primary-border-radius-inline-end: #{variables.$corners-shape-default};
	--flex-hero-button-primary-border-radius-inline-start: #{variables.$corners-shape-default};

	--flex-hero-button-secondary-icon-spacing: 10px;
	--flex-hero-button-secondary-text-color: #{variables.$global-colors-secondary};
	--flex-hero-button-secondary-text-color-hover: #{variables.$global-colors-secondary};
	--flex-hero-button-secondary-border-width: 2px;
	--flex-hero-button-secondary-border-color: #{variables.$global-colors-secondary};

	--flex-hero-box-border-color: #{variables.$global-colors-secondary};
	--flex-hero-box-border-width: 1px;

	display: flex;
	gap: var(--flex-hero-gap);
	flex-direction: column;
	min-height: var(--flex-hero-box-height);
	overflow: hidden;
	padding-block-end: var(--flex-hero-box-padding-block-end);
	padding-block-start: var(--flex-hero-box-padding-block-start);
	padding-inline-end: var(--flex-hero-box-padding-inline-end);
	padding-inline-start: var(--flex-hero-box-padding-inline-start);
	position: relative;

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

	& a.ehp-button,
	& a.ehp-button:not([href]):not([tabindex]) {
		--ehp-button-primary-icon-spacing: var(--flex-hero-button-primary-icon-spacing);
		--ehp-button-primary-text-color: var(--flex-hero-button-primary-text-color);
		--ehp-button-primary-text-color-hover: var(--flex-hero-button-primary-text-color-hover);
		--ehp-button-primary-border-width: var(--flex-hero-button-primary-border-width);
		--ehp-button-primary-border-color: var(--flex-hero-button-primary-border-color);
		--ehp-button-primary-padding-block-end: var(--flex-hero-button-primary-padding-block-end);
		--ehp-button-primary-padding-block-start: var(--flex-hero-button-primary-padding-block-start);
		--ehp-button-primary-padding-inline-end: var(--flex-hero-button-primary-padding-inline-end);
		--ehp-button-primary-padding-inline-start: var(--flex-hero-button-primary-padding-inline-start);
		--ehp-button-primary-border-radius-block-end: var(--flex-hero-button-primary-border-radius-block-end);
		--ehp-button-primary-border-radius-block-start: var(--flex-hero-button-primary-border-radius-block-start);
		--ehp-button-primary-border-radius-inline-end: var(--flex-hero-button-primary-border-radius-inline-end);
		--ehp-button-primary-border-radius-inline-start: var(--flex-hero-button-primary-border-radius-inline-start);

		--ehp-button-secondary-icon-spacing: var(--flex-hero-button-secondary-icon-spacing);
		--ehp-button-secondary-text-color: var(--flex-hero-button-secondary-text-color);
		--ehp-button-secondary-text-color-hover: var(--flex-hero-button-secondary-text-color-hover);
		--ehp-button-secondary-border-width: var(--flex-hero-button-secondary-border-width);
		--ehp-button-secondary-border-color: var(--flex-hero-button-secondary-border-color);
		--ehp-button-secondary-padding-block-end: var(--flex-hero-button-secondary-padding-block-end);
		--ehp-button-secondary-padding-block-start: var(--flex-hero-button-secondary-padding-block-start);
		--ehp-button-secondary-padding-inline-end: var(--flex-hero-button-secondary-padding-inline-end);
		--ehp-button-secondary-padding-inline-start: var(--flex-hero-button-secondary-padding-inline-start);
		--ehp-button-secondary-border-radius-block-end: var(--flex-hero-button-secondary-border-radius-block-end);
		--ehp-button-secondary-border-radius-block-start: var(--flex-hero-button-secondary-border-radius-block-start);
		--ehp-button-secondary-border-radius-inline-end: var(--flex-hero-button-secondary-border-radius-inline-end);
		--ehp-button-secondary-border-radius-inline-start: var(--flex-hero-button-secondary-border-radius-inline-start);
	}

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

	&.has-shape-custom.shape-type {

		&-box {
			--ehp-shapes-border-radius-block-end: var(--flex-hero-box-border-radius-block-end, var(--flex-hero-box-border-radius-custom-block-end));
			--ehp-shapes-border-radius-block-start: var(--flex-hero-box-border-radius-block-start, var(--flex-hero-box-border-radius-custom-block-start));
			--ehp-shapes-border-radius-inline-end: var(--flex-hero-box-border-radius-inline-end, var(--flex-hero-box-border-radius-custom-inline-end));
			--ehp-shapes-border-radius-inline-start: var(--flex-hero-box-border-radius-inline-start, var(--flex-hero-box-border-radius-custom-inline-start));
		}

		&-image {
			--ehp-shapes-border-radius-block-end: var(--flex-hero-image-border-radius-block-end, var(--flex-hero-image-border-radius-custom-block-end));
			--ehp-shapes-border-radius-block-start: var(--flex-hero-image-border-radius-block-start, var(--flex-hero-image-border-radius-custom-block-start));
			--ehp-shapes-border-radius-inline-end: var(--flex-hero-image-border-radius-inline-end, var(--flex-hero-image-border-radius-custom-inline-end));
			--ehp-shapes-border-radius-inline-start: var(--flex-hero-image-border-radius-inline-start, var(--flex-hero-image-border-radius-custom-inline-start));
		}
	}

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

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

		padding: 0;

		& .ehp-image {
			height: 100%;
		}

		& .ehp-flex-hero__content-container {
			padding-block-start: var(--flex-hero-box-padding-block-start);
			padding-block-end: var(--flex-hero-box-padding-block-end);
			padding-inline-start: var(--flex-hero-box-padding-inline-start);
			padding-inline-end: var(--flex-hero-box-padding-inline-end);
		}
	}

	&.has-layout-preset {

		&-showcase {

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

			& .ehp-flex-hero__content-container {
				justify-content: var(--flex-hero-content-alignment-showcase);
			}

			@media screen and (min-width: variables.$screen-desktop-min) {
				display: grid;

				& .ehp-flex-hero__image-wrapper {
					align-items: var(--flex-hero-content-alignment-showcase);
					display: flex;
					justify-content: center;
				}
			}
		}

		&-storytelling {

			& .ehp-flex-hero__content-container {
				align-items: var(--flex-hero-content-alignment-storytelling);
				align-self: var(--flex-hero-content-position);
				text-align: var(--flex-hero-content-alignment-storytelling);
				max-width: var(--flex-hero-content-width);
				width: 100%;
			}
		}
	}

	@mixin responsive-image-position() {

		&-start {
			& .ehp-flex-hero__content-container {
				order: 2;
			}

			& .ehp-flex-hero__image-wrapper {
				order: 1;
			}
		}

		&-end {
			& .ehp-flex-hero__content-container {
				order: 1;
			}

			& .ehp-flex-hero__image-wrapper {
				order: 2;
			}
		}
	}

	&.has-image-position {

		@include responsive-image-position();

		&-md {

			@media screen and (max-width: variables.$screen-tablet-max) {
				@include responsive-image-position();
			}
		}

		&-sm {

			@media screen and (max-width: variables.$screen-mobile-max) {
				@include responsive-image-position();
			}
		}
	}

	&__content-container {
		display: flex;
		flex-direction: column;
		gap: var(--flex-hero-element-spacing);
		z-index: variables.$second-layer;
	}

	&__intro {
		color: var(--flex-hero-intro-color);
		margin: 0;
	}

	&__heading {
		color: var(--flex-hero-heading-color);
		margin: 0;
		word-break: break-word;
	}

	&__subheading {
		color: var(--flex-hero-subheading-color);
		margin: 0;
	}

	&__ctas-container {
		display: flex;
		gap: var(--flex-hero-buttons-space-between);

		@media screen and (max-width: variables.$screen-tablet-max) {
			flex-direction: column;
		}
	}

	&__image-wrapper {
		z-index: variables.$first-layer;
	}

	&__image-container {
		width: 100%;
	}

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