/* stylelint-disable at-rule-no-unknown */

// This Mixin contains Common Transition Speeds.
@mixin transitionSpeeds {
	-webkit-transition-duration: 250ms;
	-moz-transition-duration: 250ms;
	-o-transition-duration: 250ms;
	transition-duration: 250ms;
}

.uagb-popup-builder {
	// Display and Opacity are set to hide the popup until the front-end loads.
	display: none;
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	z-index: 999999999;
	overflow: hidden;
	-webkit-transition-property: opacity;
	-moz-transition-property: opacity;
	-o-transition-property: opacity;
	transition-property: opacity;

	@include transitionSpeeds();

	&__banner {

		&--pusher {
			position: relative;
		}
	}

	&__wrapper {
		position: relative;
		box-sizing: border-box;

		&--banner {
			width: 100%;
		}
	}

	&__container {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		flex-direction: column;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-transition-property: box-shadow, border-color;
		-moz-transition-property: box-shadow, border-color;
		-o-transition-property: box-shadow, border-color;
		transition-property: box-shadow, border-color;

		@include transitionSpeeds();

		// Make root Containers inside the popup builder full width.
		.uagb-is-root-container {
			width: 100%;
		}
	}

	// Common close button CSS.
	&__close {
		position: absolute;
		top: 0;
		z-index: 999999999;
	}

	// Accessibility CSS for close button.
	button.uagb-popup-builder__close {
		border: none;
		background: transparent;
		background-color: transparent;
		padding: 0;

		svg {
			-webkit-transition-property: fill;
			-moz-transition-property: fill;
			-o-transition-property: fill;
			transition-property: fill;

			@include transitionSpeeds();
		}
	}

	&__body--overflow-hidden {
		overflow: hidden;
	}
}
