Nav: Main

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

$element-specific-variables: "";

.#{$namespace}nav {

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

	$self: &;

	/* properties of current element  + media queries */
	@include custom-prop-fallback("color", "comp-navbar-text-color");
	@include custom-prop-fallback("background-image","comp-navbar-background-color");
	height: $nav-topbar-height;
	@include make-container();

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

	// nav__back

	&__back {

		display: flex;
		align-items: center;
		margin-right: map-deep-get($token-spacer-unit-map, "8");
		border-radius: map-deep-get($token-radius-map, "32");
		font-weight: map-deep-get($token-font-weight-map, "semi-bold");
		background-color: $nav-topbar-icon-background-hover;
		height: $language-switcher-height-global;

		@include media-breakpoint-up(lg) {
			height: auto;
			background-color: transparent;
			padding-right: map-deep-get($token-spacer-unit-map, "16");
			margin-right: map-deep-get($token-spacer-unit-map, "24");
		}

		&:hover,
		&:focus {

			@media (hover: hover) {
				background-color: $nav-topbar-icon-background-hover;
			}

		}

	}

	&__inner {

		@include contentSectionDimensions();
		padding-left: 0;
		padding-right: 0;
		display: flex;
		align-items: center;
		height: 100%;
		flex-wrap: nowrap;

		> {

			H1,.h1,
			H2,.h2,
			H3,.h3,
			H4,.h4,
			H5,.h5,
			H6,.h6 {
				color: inherit;
				font-size: map-deep-get($design-tokens, "sys-font-size-helper-medium") !important;
				font-family: inherit !important;
				font-weight: map-deep-get($token-font-weight-map, "semi-bold") !important;
			}

		}

	}

	&__fakeSearch {

		display: flex;
		align-items: center;
		@include custom-prop-fallback("background-color","comp-navbar-search-background-color");
		border-radius: map-deep-get($token-radius-map, "button-small");
		padding: $input-padding-x*0.5 $input-padding-x;
		height: $language-switcher-height-global;
		font-size: map-deep-get($design-tokens, "sys-font-size-helper-medium");
		margin-right: map-deep-get($token-spacer-inline-map, "sm");
		font-weight: map-deep-get($token-font-weight-map, "semi-bold") !important;

		@include media-breakpoint-up(sm) {
			padding: $input-padding-x $input-padding-x*2;
			height: map-deep-get($token-button-size-big-map, "mobile" ,"min-height");
			width: 180px;
		}

		@include hover-focus() {
			text-decoration: none;
			@include custom-prop-fallback("background-color","comp-navbar-button-hovered-background-color");
		}

		&:focus-visible {

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

		}

	}

	&__fakeSearchText {

		@include sr-only();

		@include media-breakpoint-up(sm) {

			@include undo-sr-only();
			margin: 0;
			margin-left: map-deep-get($token-spacer-inline-map, "sm");
			padding: 0;
			
		}

	}

	&__collapseContainer {

		height: $nav-topbar-height-global;
		display: flex;
		flex-grow: 1;

		@include media-breakpoint-up(sm) {

			position: relative;

		}

	}
	
	&__collapse {

		margin: auto;
		position: absolute;
		top: calc(100% + #{map-deep-get($token-spacer-unit-map, "8")});
		left: 0;
		right: 0;
		box-shadow: map-deep-get($token-shadow-map, "detail");
		border-radius: map-deep-get($token-radius-map, "16");

		@include media-breakpoint-up(sm) {

			right: auto;
			min-width: 320px;

		}

		@each $breakpoint in map-keys($grid-breakpoints) {
			$next: breakpoint-next($breakpoint, $grid-breakpoints);
			$infix: breakpoint-infix($next, $grid-breakpoints);

			.navbar-expand#{$infix} & {

				@include media-breakpoint-up($next) {

					position: static;
					box-shadow: none;
					justify-content: center;
					height: 100%;

				}

			}

		}

	}

	&__collapseInner {

		padding: $navbar-collapse-inner-padding;
		@include custom-prop-fallback("background-color","comp-dropdown-background-color");
		@include custom-prop-fallback("color","sys-color-text-primary-vivid");
		border-radius: map-deep-get($token-radius-map, "16");

		> * + * {

			margin-top: map-deep-get($token-spacer-stack-max-map, "sm");

		}

		@each $breakpoint in map-keys($grid-breakpoints) {
			$next: breakpoint-next($breakpoint, $grid-breakpoints);
			$infix: breakpoint-infix($next, $grid-breakpoints);

			.navbar-expand#{$infix} & {

				@include media-breakpoint-up($next) {

					padding: 0 map-deep-get($token-spacer-inset-map, "md");
					flex-direction: row;
					align-items: center;
					background: transparent;
					@include custom-prop-fallback("color", "sys-color-background-primary-30");
					height: 100%;
					overflow: visible;

					> * + * {

						margin-top: 0;

					}

				}

			}

		}

	}

	&__collapseItem {

		&.active {

			#{$self}__collapseLink {

				@include custom-prop-fallback("background-color","comp-navbar-link-color-background-active-screensmall");
				@include custom-prop-fallback("color","comp-navbar-link-color-text-active-screensmall");

			}

		}

		@each $breakpoint in map-keys($grid-breakpoints) {
			$next: breakpoint-next($breakpoint, $grid-breakpoints);
			$infix: breakpoint-infix($next, $grid-breakpoints);

			.navbar-expand#{$infix} & {

				@include media-breakpoint-up($next) {

					display: flex;
					align-items: center;
					height: 100%;

					#{$self}__collapseLink {

						&:focus-visible {

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


						}

					}

					&.active {

						#{$self}__collapseLink {

							background-color: transparent;
							@include custom-prop-fallback("color", "comp-navbar-link-color-text-active-screenlarge");

						}

					}

				}

			}

		}

	}

	&__collapseLink#{$self}__collapseLink {

		display: flex;
		align-items: center;
		padding: 0.75em $navbar-nav-link-padding-x-mobile;
		border-radius: map-deep-get($token-radius-map, "8");
		width: 100%; // for btn items
		font-weight: map-deep-get($token-font-weight-map, "semi-bold");

		[class*="icon"] {
			transition: transform 0.1s linear;
			margin-left: auto;
		}

		&[data-toggle="dropdown"] {

			&[aria-expanded="true"] {

				[class*="icon"] {
					transform: rotate(180deg);
				}

			}

		}

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

				@include custom-prop-fallback("background-color","comp-navbar-link-color-background-hovered-screensmall");
				@include custom-prop-fallback("color", "comp-navbar-link-color-text-hovered-screensmall");

			}
		}

		@each $breakpoint in map-keys($grid-breakpoints) {
			$next: breakpoint-next($breakpoint, $grid-breakpoints);
			$infix: breakpoint-infix($next, $grid-breakpoints);

			.navbar-expand#{$infix} & {

				@include media-breakpoint-up($next) {

					padding-right: $navbar-nav-link-padding-x-desktop;
					padding-left: $navbar-nav-link-padding-x-desktop;
					font-size: map-deep-get($design-tokens, "sys-font-size-helper-medium");
					border-radius: map-deep-get($token-radius-map, "32");
					width: auto;

					[class*="icon"] {
						margin-left: map-deep-get($token-spacer-inline-map, "sm");
					}

					&[data-toggle="dropdown"] {

						height: map-deep-get($token-button-size-big-map, "mobile" ,"min-height");

						&[aria-expanded="true"] {

							@include custom-prop-fallback("background-color","comp-navbar-link-color-background-hovered-screenlarge");
							@include custom-prop-fallback("color", "comp-navbar-text-color");

							[class*="icon"] {
								transform: rotate(180deg);
							}

						}

					}

					&:hover,
					&:focus {
						@media (hover: hover) {
							background-color: transparent;
							@include custom-prop-fallback("color", "comp-navbar-text-color");
						}
					}

				}

			}

		}

	}

	&__collapseDropdownMenu {

		position: static;
		float: none;
		margin: 0 (-($navbar-collapse-inner-padding));
		box-shadow: none;
		padding-top: map-deep-get($token-spacer-inset-map, "xs");
		padding-bottom: 0;
		@include spacer-component-stack("xs");

		.active {

			#{$self}__collapseDropdownMenu {

				@include custom-prop-fallback("background-color", "sys-color-elevation-surface-sunken");
				@include custom-prop-fallback("color", "sys-color-text-secondary-vivid");

			}

			#{$self}__collapseDropdownItem {
				@include custom-prop-fallback("background-color","comp-navbar-link-color-background-hovered-screensmall");
				@include custom-prop-fallback("color", "comp-navbar-link-color-text-hovered-screensmall");
			}

		}

		#{$self}__collapseDropdownItem {

			display: flex;
			align-items: center;
			padding: map-deep-get($token-spacer-inset-map, "md") map-deep-get($token-spacer-inset-map, "sm");
			padding-left: $navbar-collapse-inner-padding + map-deep-get($token-sizes-unit-map, "32") + map-deep-get($token-spacer-inline-map, "md");
			border-radius: map-deep-get($token-radius-map, "8");
			width: 100%; // for btn items
			font-weight: map-deep-get($token-font-weight-map, "semi-bold");
			font-size: map-deep-get($design-tokens, "sys-font-size-helper-medium");
			@include custom-prop-fallback("color","sys-color-text-primary-vivid");

			&:hover,
			&:focus {
				@media (hover: hover) {
					@include custom-prop-fallback("background-color","comp-navbar-link-color-background-hovered-screensmall");
					@include custom-prop-fallback("color", "comp-navbar-link-color-text-hovered-screensmall");
				}

			}

			&:focus-visible {

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

			}

		}

		@each $breakpoint in map-keys($grid-breakpoints) {
			$next: breakpoint-next($breakpoint, $grid-breakpoints);
			$infix: breakpoint-infix($next, $grid-breakpoints);

			.navbar-expand#{$infix} & {

				@include media-breakpoint-up($next) {

					position: absolute;
					box-shadow: map-deep-get($token-shadow-map, "active");
					padding: map-deep-get($token-spacer-inset-map, "sm");
					top: calc(100% + #{map-deep-get($token-spacer-unit-map, "8")}) !important;
					margin: 0;

					#{$self}__collapseDropdownItem {

						padding-left: map-deep-get($token-spacer-inset-map, "sm");
						font-size: $font-size-base;

					}

				}

			}

		}

	}

	&__collapseToggler {

		display: flex;
		align-items: center;
		align-self: center;
		padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;
		font-size: $navbar-toggler-font-size;
		font-weight: map-deep-get($token-font-weight-map, "semi-bold") !important;
		height: map-deep-get($token-button-size-big-map, "mobile" ,"min-height");
		gap: map-deep-get($token-spacer-inline-map, "sm");

		[class*="icon"] {

			@include icon-base;
			transition: transform 0.1s linear;

			&::before {

				content: map-deep-get($token-icon-map, "burger");

			}

		}

		&[aria-expanded="true"] {

			[class*="icon"] {

				&::before {

					content: map-deep-get($token-icon-map, "close");

				}

			}

		}

		@include hover-focus() {
			text-decoration: none;
			@include custom-prop-fallback("background-color","comp-navbar-button-hovered-background-color");
		}

	}
	
	&__collapseLinkImg {

		width: map-deep-get($token-sizes-unit-map, "32");
		height: map-deep-get($token-sizes-unit-map, "32");
		margin-right: map-deep-get($token-spacer-inline-map, "md");

		svg,
		IMG {

			width: 100%;
			height: 100%;
			object-fit: cover;

		}

		@each $breakpoint in map-keys($grid-breakpoints) {
			$next: breakpoint-next($breakpoint, $grid-breakpoints);
			$infix: breakpoint-infix($next, $grid-breakpoints);

			.navbar-expand#{$infix} &{

				@include media-breakpoint-up($next) {

					display: none;

				}

			}

		}

	}

	&__backIcon {
		//width: auto;
	}

	&__backText {
		@include media-breakpoint-between(xs,md) {
			@include sr-only;
		}
	}

	&__adaptiveLogo {

		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, "16");

		svg {

			path[fill="#{map-deep-get($design-tokens, 'sys-color-text-primary-vivid')}"] {
				fill: map-deep-get($design-tokens, "comp-navbar-text-color");
			}

		}

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

		* {
			max-height: 100%;
		}

	}

	&__alignEnd {

		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-left: auto;
		gap: map-deep-get($token-spacer-inline-map, "sm")

	}

	&__languageSwitcher {

		height: $nav-topbar-height-global;

		@include media-breakpoint-up("lg") {
			height: map-deep-get($token-button-size-big-map, "mobile" ,"min-height");
		}
		
		> * {

			height: 100%;
			display: flex;
			align-items: center;

		}

	}

	// nav__stepper
	&__stepper {

		// follows same logic as parent

		display: none;

		@include media-breakpoint-up(lg) {
			display: block;
		}

	}
	
	&__stickyFooterContent {

		position: fixed;
		z-index: z("sticky");
		right: 0;
		bottom: map-deep-get($token-spacer-stack-max-map, "xl");
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		@each $breakpoint in map-keys($grid-breakpoints) {

			$camelKey: camelize(static-#{$breakpoint});

			&.-#{$camelKey} {

				@include media-breakpoint-up(#{$breakpoint}) {

					position: static;

				}

			}

		}


	}

	/* @TODO replace with contextual class */
	.dropdown-menu {

		top: calc(100% + #{map-deep-get($token-spacer-unit-map, "8")});

		@include media-breakpoint-up("lg") {
			top: calc(100% + #{map-deep-get($token-spacer-unit-map, "16")});
		}

	}


	/* modifiers */

	// nav -altStyle
	&.-cobranding {

		#{$self}__logo {
			flex-shrink: 0;
		}

		#{$self}__adaptiveLogo {
			margin-right: map-deep-get($token-spacer-unit-map, "24");
		}

		#{$self}__logoCoBranding {

			position: relative;
			display: flex;
			align-items: center;
			flex-shrink: 0;
			margin-right: map-deep-get($token-spacer-unit-map, "8");

			&::before {

				content: "";
				margin-right: map-deep-get($token-spacer-unit-map, "24");
				height: $nav-topbar-cobranding-logo-height-global;
				width: 1.5px;
				@include custom-prop-fallback("background-color", "sys-color-text-primary-muted");

				flex-shrink: 0;

			}


			IMG {

				width: $nav-topbar-logo-mobile-width-global;

				&:last-child {

					display: none;

				}

				@include media-breakpoint-up(lg){

					width: auto;
					height: $nav-topbar-cobranding-logo-height-global;

					&:first-child {

						display: none;

					}

					&:last-child {

						display: block;

					}

				}

			}

		}

		#{$self}__centeredContent {

			display: block;
			@include text-truncate;

		}

		#{$self}__content {

			margin-left: map-deep-get($token-spacer-unit-map, "8");

		}

		#{$self}__dropdownToggle {

			padding-left: 0;

			@include media-breakpoint-up(lg){

				padding-left: map-deep-get($token-spacer-unit-map, "16");

			}

		}

	}

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

	/* Pseudo Classes */

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

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}