@use "sass:math";
/* variables specific to current element */
$active-link-underline-offset: $border-width*6;

.#{$namespace}overflowNav {

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

	$self: &;
	/*@TODO check other components that use the behaviour and replace variable */
	@include custom-prop-fallback-override("comp-section-background-color", "sys-color-elevation-surface-flat");

	/* properties of current element  + media queries */
	display: flex;
	align-items: center;
	padding-top: map-deep-get($token-spacer-unit-map, "12");
	padding-bottom: map-deep-get($token-spacer-unit-map, "12");

	@include media-breakpoint-up(lg) {

		padding-top: map-deep-get($token-spacer-unit-map, "40");
		padding-bottom: map-deep-get($token-spacer-inset-map, "xl");

	}
	/* 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 */

	// overflowNav__childElement
	&__logo {

		width: $nav-topbar-logo-mobile-width-global;
		height: $nav-topbar-logo-mobile-width-global;
		overflow: hidden;
		margin-right: map-deep-get($token-spacer-unit-map, "24");

		svg {

			path[fill="#{map-deep-get($design-tokens, 'sys-color-text-primary-vivid')}"] {
				@include custom-prop-fallback("fill","comp-logo-type-background-color")
			}

		}

		@include media-breakpoint-up(lg) {
			margin-right: map-deep-get($token-spacer-unit-map, "40");
			width: auto;
		}

		* {
			max-height: 100%;
		}

		&:focus-visible {

			outline-style: solid !important;
			outline-width: map-deep-get($design-tokens, "comp-button-pressed-border-width") !important;
			outline-offset: -(map-deep-get($design-tokens, "comp-button-pressed-border-width")) !important;
			@include custom-prop-fallback("outline-color", "comp-button-secondary-pressed-border-color", true, true);

		}

	}

	&__menuWrapper {

		font-size: $h5-font-size;
		height: calc(1.75em + #{map-deep-get($design-tokens, "comp-button-pressed-border-width")});
		flex-grow: 1;
		display: flex;
		align-items: flex-start;
		top: map-deep-get($design-tokens, "comp-button-pressed-border-width"); // offset vertical positioning by amount of active border bottom state

		&::before {

			width: map-deep-get($token-sizes-unit-map, "16");

		}

	}

	&__menu {

		padding-bottom: 1.5em;
		flex-grow: 1;
		position: relative;
		padding-top: map-deep-get($design-tokens, "comp-button-pressed-border-width");

	}

	&__menuInner {

		align-items: center;
		justify-content: space-between;

		@include spacer-component-inline(lg);

		@include media-breakpoint-up(md){

			@include spacer-component-inline(xl);

		}

	}

	// headerNav__subNavItem
	&__item {

		@extend %headingBase;
		@extend %h5;
		@include custom-prop-fallback("color","comp-subheader-link-text-color", true, true);

		white-space: nowrap;
		position: relative;

		&.-isActive {

			#{$self}__link {

				@include custom-prop-fallback("color","comp-subheader-link-active-text-color", true, true);

				&::before {

					display: block;

				}


			}

		}

	}

	&__link {

		&::before {

			content: "";
			display: none;
			background-color: currentColor;
			height: $border-width*2;
			width: $nav-topbar-cobranding-logo-height-global;
			position: absolute;
			bottom: -$active-link-underline-offset;
			left: 50%;
			transform: translateX(-50%);

		}

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

				@include custom-prop-fallback("color","comp-subheader-link-hovered-text-color", true, true);

			}
		}

		&:focus-visible {

			outline-offset: -(map-deep-get($design-tokens, "comp-button-pressed-border-width"));
			outline-style: solid;
			outline-width: map-deep-get($design-tokens, "comp-button-pressed-border-width");
			@include custom-prop-fallback("outline-color", "comp-subheader-link-active-text-color", true, true);

		}

	}

	&__list {

		display: flex;
		align-items: center;
		@include spacer-component-inline(lg);

		@include media-breakpoint-up(md){

			@include spacer-component-inline(xl);

		}

	}

	&__cta {

		display: none;

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

			margin-left: map-deep-get($token-spacer-inline-map, "lg");
			display: flex;
			flex-shrink: 0;

		}

	}


	/* modifiers */

	// overflowNav -contentCentered
	&.-contentCentered {

		// follows same logic as base element

		#{$self}__menuInner {

			margin: auto;
			flex-grow: 0;

		}

	}

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

	/* Pseudo Classes */

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

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}