//
// Global selectors for Elementor Front-End
//

.elementor {

	* {
		&, &:before, &:after {
			box-sizing: border-box;
		}
	}

	a {
		box-shadow: none;
		text-decoration: none;
	}

	hr {
		margin: 0;
		background-color: transparent;
	}

	img {
		height: auto;
		max-width: 100%;
		border: none;
		border-radius: 0;
		box-shadow: none;
	}

	.elementor-widget {

		// Classic Editor & Gutenberg Compatibility
		&:not(.elementor-widget-text-editor):not(.elementor-widget-theme-post-content) {

			figure {
				margin: 0;
			}
		}
	}

	// Responsive Embed
	embed,
	iframe,
	object,
	video {
		max-width: 100%;
		width: 100%;
		margin: 0;
		line-height: 1;
		border: none;
	}

	// Background Video
	.elementor-background-video-container,
	.elementor-background-holder,
	.elementor-background {
		inset: 0;
		position: absolute;
		overflow: hidden;
		z-index: $ground-layer;
		direction: ltr;
	}

	.elementor-background-video-container {
		transition: opacity 1s;
		pointer-events: none; // This prevents the player from showing video info on hover

		&.elementor-loading {
			opacity: 0;
		}
	}

	.elementor-background-video,
	.elementor-background-video-embed {
		max-width: none; //Stretch the background video on all section
	}

	.elementor-background-video,
	.elementor-background-video-embed,
	.elementor-background-video-hosted {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		transform: translate(-50%, -50%);
	}

	.elementor-background-video-hosted {
		object-fit: cover; // For HTML5 portrait video
	}
	// End Background Video

	.elementor-background-overlay {
		inset: 0;
		position: absolute;
	}

	.elementor-background-slideshow {
		position: absolute;
		inset: 0;
		z-index: $ground-layer;

		&__slide__image {
			width: 100%;
			height: 100%;
			background-position: center center;
			background-size: cover;
		}
	}
}

.elementor-widget-wrap,
.e-con,
.e-con-inner {

	> .elementor-element.elementor-absolute {
		position: absolute;
	}

	> .elementor-element.elementor-fixed {
		position: fixed;
	}
}

.elementor-widget-wrap {

	.elementor-element.elementor-widget {

		@mixin inline-width($device) {

			&#{$device}__width {

				&-auto,
				&-initial {
					max-width: 100%;
				}
			}
		}

		@include inline-width('');

		@media (max-width: $screen-tablet-max) {
			@include inline-width(-tablet);
		}

		@media (max-width: $screen-mobile-max) {
			@include inline-width(-mobile);
		}
	}
}

.elementor-element {

	&.elementor-absolute,
	&.elementor-fixed {
		z-index: $first-layer;
	}

	// Set to initial values in order to avoid inheritance which might cause unexpected behavior.
	--flex-direction: initial;
	--flex-wrap: initial;
	--justify-content: initial;
	--align-items: initial;
	--align-content: initial;
	--gap: initial;
	--flex-basis: initial;
	--flex-grow: initial;
	--flex-shrink: initial;
	--order: initial;
	--align-self: initial;

	// Flex item.
	flex-basis: var(--flex-basis);
	flex-grow: var(--flex-grow);
	flex-shrink: var(--flex-shrink);
	order: var(--order);
	align-self: var(--align-self);

	&:where( .e-con-full, .elementor-widget ) {
		// Flex container.
		flex-direction: var( --flex-direction );
		flex-wrap: var( --flex-wrap );
		justify-content: var( --justify-content );
		align-items: var( --align-items );
		align-content: var( --align-content );
		gap: var( --row-gap ) var( --column-gap );
	}
}

.elementor-invisible {
	visibility: hidden;
}

.elementor-custom-embed-play {
	@include absolute-center;
	$elementor-custom-embed-play-icon-size: 100px;
	$elementor-custom-embed-play-icon-color: #fff;
	$elementor-custom-embed-play-icon-shadow: 1px 0 6px rgba(0, 0, 0, 0.3);

	i {
		font-size: $elementor-custom-embed-play-icon-size;
		color: $elementor-custom-embed-play-icon-color;
		text-shadow: $elementor-custom-embed-play-icon-shadow;
	}

	svg {
		height: $elementor-custom-embed-play-icon-size;
		width: $elementor-custom-embed-play-icon-size;
		fill: $elementor-custom-embed-play-icon-color;
		filter: drop-shadow($elementor-custom-embed-play-icon-shadow);
	}

	i,
	svg {
		opacity: 0.8;
		transition: all .5s;
	}

	&.elementor-playing {

		i {
			font-family: eicons;

			&:before {
				content: '\e8fb';
			}
		}

		// Using the eicon-spin animation for not being dependent in any external library.
		i,
		svg {
			animation: eicon-spin 2s infinite linear;
		}
	}
}

.elementor-tag {
	display: inline-flex;
}

.elementor-ken-burns {
	transition-property: transform;
	transition-duration: 10s;
	transition-timing-function: linear;

	&--out {
		transform: scale(1.3);
	}

	&--active {
		transition-duration: 20s;

		&.elementor-ken-burns--out {
			transform: scale(1);
		}

		&.elementor-ken-burns--in {
			transform: scale(1.3);
		}
	}
}

@mixin button-alignment($device) {
	.elementor#{$device}-align- {

		&center {
			text-align: center;
		}

		&right {
			text-align: right;
		}

		&left {
			text-align: left;
		}

		&center,
		&right,
		&left {

			.elementor-button {
				width: auto;
			}
		}

		&justify {

			.elementor-button {
				width: 100%;
			}
		}
	}
}

@include button-alignment('');

@media (min-width: $screen-widescreen-min) {
	@include button-alignment(-widescreen);
}

@media (max-width: $screen-laptop-max) {
	@include button-alignment(-laptop);
}

@media (max-width: $screen-tablet-extra-max) {
	@include button-alignment(-tablet_extra);
}

@media (max-width: $screen-tablet-max) {
	@include button-alignment(-tablet);
}

@media (max-width: $screen-mobile-extra-max) {
	@include button-alignment(-mobile_extra);
}

@media (max-width: $screen-mobile-max) {
	@include button-alignment(-mobile);
}

// Elementor Page Title
:root {
	--page-title-display: block;
}

.elementor-page-title, h1.entry-title {
	display: var(--page-title-display);
}

// Global animation that should be available even when the elementor-icons library is not loaded.
@keyframes eicon-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(359deg);
	}
}

// Global animation class that should be available even when the elementor-icons library is not loaded.
.eicon-animation-spin {
	animation: eicon-spin 2s infinite linear;
}
