Edit

Editing: hello-plus-contact.scss

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

.ehp-contact {
	--contact-alignment-width-center: 80%;
	--contact-alignment-width-start: 100%;
	--contact-alignment-margin-center: 0 auto;
	--contact-alignment-margin-start: 0;

display: flex;
	height: 100%;
	min-height: var(--contact-box-height);
	overflow: hidden;
	padding-inline-start: var(--contact-box-padding-inline-start);
	padding-inline-end: var(--contact-box-padding-inline-end);
	padding-block-start: var(--contact-box-padding-block-start);
	padding-block-end: var(--contact-box-padding-block-end);
	position: relative;

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

@mixin map-position {
		&-start {

& .ehp-contact__map-container {
				order: 1;
			}

& .ehp-contact__text-container {
				order: 2;
			}
		}

&-end {
			& .ehp-contact__map-container {
				order: 2;
			}

& .ehp-contact__text-container {
				order: 1;
			}
		}
	}

&.has-preset {

&-locate {

& .ehp-contact__elements-container {

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

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

& .ehp-contact__elements-container {
					display: grid;
				}
			}

& .ehp-contact__elements-container.has-map-h-position {

@include map-position();

&-md {

@media screen and (max-width: variables.$screen-tablet-max) {

@include map-position();
					}
				}

&-sm {

@media screen and (max-width: variables.$screen-mobile-max) {

@include map-position();
					}
				}
			}
		}

&-touchpoint {

& .ehp-contact__elements-container.has-map-v-position {

@include map-position();

&-md {

@media screen and (max-width: variables.$screen-tablet-max) {

@include map-position();
					}
				}

&-sm {

@media screen and (max-width: variables.$screen-mobile-max) {

@include map-position();
					}
				}
			}
		}

&-quick-info,
		&-touchpoint {

& .ehp-contact__headings {
				text-align: var(--contact-content-alignment);
			}

& .ehp-contact__groups {
				justify-content: var(--contact-content-alignment);
				margin: var(--contact-content-alignment-margin);
				width: var(--contact-content-alignment-width);
			}
		}
	}

&.has-map-stretch {
		--contact-map-width: 100%;

padding: 0;

&.has-preset-locate,
		&.has-preset-touchpoint {

& .ehp-contact__text-container {
				padding-block-end: var(--contact-box-padding-block-end);
				padding-block-start: var(--contact-box-padding-block-start);
				padding-inline-end: var(--contact-box-padding-inline-end);
				padding-inline-start: var(--contact-box-padding-inline-start);
			}
		}

&.has-preset-locate {

& .ehp-contact__map-container {
				height: 100%;
			}
		}
	}

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

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

&__elements-container {
		align-items: var(--contact-content-position);
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		gap: var(--contact-box-gap);
		z-index: variables.$first-layer;
	}

&__heading {
		color: var(--contact-text-heading-color);
		margin: 0 0 var(--contact-text-spacing);
		word-break: break-word;
	}

&__description {
		color: var(--contact-text-description-color);
		margin: 0;
	}

&__text-container {
		display: flex;
		flex-direction: column;
		gap: var(--contact-elements-spacing);
		max-width: var(--contact-content-width);
	}

&__groups {
		column-gap: var(--contact-layout-columns-column-gap);
		display: grid;
		grid-template-columns: repeat(var(--contact-layout-columns), 1fr);
		row-gap: var(--contact-layout-columns-row-gap);
	}

&__group {
		display: flex;
		flex-direction: column;
		gap: var(--contact-group-spacing);
	}

&__subheading {
		color: var(--contact-group-subheading-color);
		margin: 0;
	}

&__links-container {
		display: flex;
		flex-direction: column;
		gap: var(--contact-links-spacing);
	}

&__contact-link {
		align-items: center;
		display: flex;
		gap: var(--contact-link-icon-gap);

& i,
		& svg,
		& .ehp-contact__contact-link-label {
			transition: variables.$transition;
		}

& .ehp-contact__contact-link-label {
			color: var(--contact-link-label-color);
		}

& svg {
			fill: var(--contact-link-icon-color);
			height: var(--contact-link-icon-size);
			width: var(--contact-link-icon-size);
		}

& i {
			color: var(--contact-link-icon-color);
			font-size: var(--contact-link-icon-size);
		}

&:hover,
		&:focus {

& i,
			& svg,
			& .ehp-contact__contact-link-label {
				transition: variables.$transition;
			}

& i {
				color: var(--contact-link-icon-hover-color);
			}

& svg {
				fill: var(--contact-link-icon-hover-color);
			}

& .ehp-contact__contact-link-label {
				color: var(--contact-link-label-hover-color);
			}
		}
	}

&__contact-text {
		color: var(--contact-contact-text-color);
	}

&__social-icons-container {
		display: flex;
		gap: var(--contact-social-icon-gap);
	}

&__social-link {

& .ehp-contact__contact-social-icon {
			transition: variables.$transition;

&:is(svg) {
				fill: var(--contact-social-icon-color);
				height: var(--contact-social-icon-size);
				width: var(--contact-social-icon-size);
			}

&:is(i) {
				color: var(--contact-social-icon-color);
				font-size: var(--contact-social-icon-size);
			}
		}

&:hover,
		&:focus {

& .ehp-contact__contact-social-icon {
				color: var(--contact-social-icon-hover-color);
				transition: variables.$transition;

&:is(svg) {
					fill: var(--contact-social-icon-hover-color);
					transition: variables.$transition;
				}
			}
		}
	}

&__map-container {
		align-items: var(--contact-content-position);
		display: flex;
		height: 100%;
		justify-content: center;
		width: 100%;
	}

&__map {
		height: var(--contact-map-height);
		overflow: hidden;
		width: var(--contact-map-width);

& iframe {
			height: 100%;
			width: 100%;
		}

&.has-border {
			border-color: var(--contact-map-border-color);
			border-style: solid;
			border-width: var(--contact-map-border-width);
		}

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

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

Back