@use "../../../../dev/scss/variables";

.ehp-zigzag {
	--zigzag-title-color: #000000;
	--zigzag-description-color: #000000;
	--zigzag-content-position: center;
	--zigzag-image-width: 50%;
	--zigzag-icon-width: 50%;
	--zigzag-icon-size: 256px;
	--zigzag-icon-color: #555963;
	--zigzag-icon-color-alternate: var(--zigzag-icon-color);

	--zigzag-animation-delay: 0;
	--zigzag-animation-duration: 1s;

	--zigzag-animation-duration-slow: 2s;
	--zigzag-animation-duration-normal: 1s;
	--zigzag-animation-duration-fast: 0.8s;

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

	align-items: center;
	background-color: transparent;
	display: flex;
	flex-direction: column;

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

	&.has-alternate {

		&-button-styles .ehp-zigzag__item-wrapper:nth-child(even) {

			& a.ehp-zigzag__button,
			& a.ehp-zigzag__button:not([href]):not([tabindex]) {
				--ehp-button-primary-text-color: var(--zigzag-button-primary-text-color-alternate);
				--ehp-button-primary-text-color-hover: var(--zigzag-button-primary-text-color-hover-alternate);
			}
		}

		&-button-border-styles .ehp-zigzag__item-wrapper:nth-child(even) {
			& a.ehp-zigzag__button,
			& a.ehp-zigzag__button:not([href]):not([tabindex]) {
				border: var(--zigzag-button-primary-border-width-alternate) solid var(--zigzag-button-primary-border-color-alternate);
			}
		}

		&-icon-color .ehp-zigzag__item-wrapper:nth-child(even) {

			& .ehp-zigzag__graphic-element-container {
				color: var(--zigzag-icon-color-alternate);
			}
		}
	}

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

	&__button-container {
		display: flex;
	}

	&__text-container {
		display: flex;
		flex-direction: column;
		justify-content: var(--zigzag-content-position);

		&.is-graphic-image {
			width: calc(100% - var(--zigzag-image-width));
		}

		&.is-graphic-icon {
			width: calc(100% - var(--zigzag-icon-width));
		}
	}

	&__image-container {
		width: 100%;
	}

	&__title {
		color: var(--zigzag-title-color);
	}

	&__description {
		color: var(--zigzag-description-color);
		font-size: 18px;
	}

	&__graphic-element-container {
		align-items: var(--zigzag-content-position);
		display: flex;

		&.has-image {
			width: var(--zigzag-image-width);

			.elementor & img {
				width: 100%;
			}
		}

		&.has-icon {
			color: var(--zigzag-icon-color);
			display: flex;
			justify-content: center;
			width: var(--zigzag-icon-width);

			& svg {
				fill: currentColor;
				height: var(--zigzag-icon-size);
				width: var(--zigzag-icon-size);
			}

			& i {
				font-size: var(--zigzag-icon-size);
			}
		}
	}

	&__item-container {
		display: flex;
		gap: var(--zigzag-column-gap);
		padding-block: calc(var(--zigzag-row-gap) / 2);
		padding-inline-start: var(--zigzag-box-padding-inline-start);
		padding-inline-end: var(--zigzag-box-padding-inline-end);
		max-width: var(--zigzag-content-width);
		width: 100%;
	}

	&.has-entrance-animation {

		& .ehp-zigzag__item-wrapper {
			animation-delay: var(--zigzag-animation-delay);
			animation-duration: var(--zigzag-animation-duration);
			animation-fill-mode: both;
			animation-timing-function: ease;
		}
	}

	&__item-wrapper {
		display: flex;
		justify-content: center;
		width: 100%;

		&:first-of-type {

			.ehp-zigzag__item-container {
				padding-block-start: var(--zigzag-box-padding-block-start);
			}
		}

		&:last-of-type {

			.ehp-zigzag__item-container {
				padding-block-end: var(--zigzag-box-padding-block-end);
			}
		}

		&.hidden {
			opacity: 0;
			visibility: hidden;
		}

		&.visible {
			opacity: 1;
			visibility: visible;
		}
	}

	@media screen and (min-width: variables.$screen-desktop-min) {
		&.has-direction {
			&-start {
				.ehp-zigzag__item-wrapper:nth-child(odd) {
					.ehp-zigzag__item-container {
						flex-direction: row;
					}
				}

				.ehp-zigzag__item-wrapper:nth-child(even) {
					.ehp-zigzag__item-container {
						flex-direction: row-reverse;
					}
				}
			}

			&-end {
				.ehp-zigzag__item-wrapper:nth-child(odd) {
					.ehp-zigzag__item-container {
						flex-direction: row-reverse;
					}
				}

				.ehp-zigzag__item-wrapper:nth-child(even) {
					.ehp-zigzag__item-container {
						flex-direction: row;
					}
				}
			}
		}
	}

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

		&.has-direction-end {

			.ehp-zigzag__graphic-element-container {
				order: 2;
			}

			.ehp-zigzag__text-container {
				order: 1;
			}
		}

		.ehp-zigzag__graphic-element-container,
		.ehp-zigzag__text-container {
			padding-inline: 0;
			width: 100%;
		}
	}


	&.has-image-stretch {

		& .ehp-zigzag__item-container {
			padding-inline: 0;

			@media screen and (max-width: variables.$screen-tablet-max) {
				padding-block: 0;
			}
		}

		.ehp-zigzag__text-container {
			@media screen and (max-width: variables.$screen-tablet-max) {
				padding-inline-start: var(--zigzag-box-padding-inline-start);
				padding-inline-end: var(--zigzag-box-padding-inline-end);
			}
		}

		&.has-direction {
			&-start {

				.ehp-zigzag__text-container {
					@media screen and (max-width: variables.$screen-tablet-max) {
						padding-block-end: var(--zigzag-box-padding-block-end);
					}
				}

				.ehp-zigzag__item-wrapper:nth-child(odd) {
					.ehp-zigzag__text-container {
						@media screen and (min-width: variables.$screen-desktop-min) {
							padding-inline-end: var(--zigzag-box-padding-inline-end);
						}
					}
				}

				.ehp-zigzag__item-wrapper:nth-child(even) {
					.ehp-zigzag__text-container {

						@media screen and (min-width: variables.$screen-desktop-min) {
							padding-inline-start: var(--zigzag-box-padding-inline-start);
						}
					}
				}
			}

			&-end {

				.ehp-zigzag__text-container {
					@media screen and (max-width: variables.$screen-tablet-max) {
						padding-block-start: var(--zigzag-box-padding-block-start);
					}
				}

				.ehp-zigzag__item-wrapper:nth-child(odd) {
					.ehp-zigzag__text-container {

						@media screen and (max-width: variables.$screen-tablet-max) {
							padding-block-start: var(--zigzag-box-padding-block-start);
						}

						@media screen and (min-width: variables.$screen-desktop-min) {
							padding-inline-start: var(--zigzag-box-padding-inline-start);
						}
					}
				}

				.ehp-zigzag__item-wrapper:nth-child(even) {
					.ehp-zigzag__text-container {

						@media screen and (max-width: variables.$screen-tablet-max) {
							padding-block-start: var(--zigzag-box-padding-block-start);
						}

						@media screen and (min-width: variables.$screen-desktop-min) {
							padding-inline-end: var(--zigzag-box-padding-inline-end);
						}
					}
				}
			}
		}
	}
}