@use "sass:math";
/* variables specific to current element */

$element-specific-variables: "";

.#{$namespace}popupInfo {

	/* Save root element context for easy access if nesting is needed */

	$self: &;

	/* properties of current element  + media queries */
	position: fixed;
	z-index: z("dropdown");
	top: $nav-sub-nav-height-desktop-global + map-deep-get($token-spacer-stack-max-map, "xl");
	left: 0;
	right: 0;
	@include containerPaddingInline();
	pointer-events: none;
	transition: opacity $transition-collapse-duration ease-out;


	@include media-breakpoint-up("lg") {

		top: $nav-sub-nav-height-desktop-global + map-deep-get($token-spacer-stack-max-map, "3xl") + map-deep-get($token-spacer-stack-max-map, "md");

	}

	/* Pseudo Elements */

	&::before {
	}

	&::after {
	}

	/*
	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
	(e.g: keyframes)
	*/
	@at-root {
	}


	/* children - write selector in full in comments in order to facilitate search */

	&__body {

		max-width: map-deep-get($token-sizes-component-map, "content-section");
		width: 100%;
		margin: auto;
		display: flex;
		justify-content: flex-end;

	}

	// popupInfo__inner
	&__inner {

		// follows same logic as parent

		position: relative;
		max-width: 400px;
		width: 100%;
		pointer-events: auto;

	}	


	/* modifiers */

	// popupInfo -altStyle
	&.-isHidden {

		// follows same logic as base element
		opacity: 0;

	}

	/* random parent element */
	/* 
	*
	*   Syntax : .randomParentElt & {}
	*
	*/

	/* Pseudo Classes */

	&:hover {
		@media (hover: hover) {

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}