/* variables specific to current element */

$nav-topbar-height: $nav-topbar-height-global;
$nav-topbar-icon-background: map-deep-get($token-color-brand-map,"secondary","100");
$nav-topbar-icon-background-hover: map-deep-get($token-color-brand-map,"secondary","120");
$nav-topbar-logo-mobile-width: $nav-topbar-logo-mobile-width-global;
$nav-topbar-logo-desktop-width: 220px;
$snet-frame-menu-open-width: $snet-frame-menu-open-width-global;

$bfm-nav-topbar-icon-background: map-deep-get($token-color-brand-map,"secondary","160");
$bfm-nav-topbar-icon-background-hover: map-deep-get($token-color-grayscale-map,"1000");

.#{$namespace}navTopbar {

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

	$self: &;

	/* properties of current element  + media queries */


	@include gradient-directional(map-deep-get($token-color-brand-map, "secondary", "100"), map-deep-get($token-color-brand-map, "gradient", "secondary"), 0, 100%, 45deg, true);
	color: map-deep-get($token-color-grayscale-map, "0");
	height: $nav-topbar-height;
	display: flex;
	align-items: center;

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

	&__container {

		padding: 0;
		@include make-container();
		max-width: none;

		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
			max-width: map-deep-get($container-max-widths, "xl");
		}

	}

	// navTopbar__inner
	&__inner {

		padding: 0;

		> {

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

		}

	}

	&__alignToMainContent {

		display: flex;
		align-items: center;

		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
			width: $snet-frame-menu-open-width;
			margin-right: map-deep-get($token-spacer-unit-map, "16");
		}

	}

	// navTopbar__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;
			}

		}

	}

	&__centeredContent,
	&__backText {

		display: none;

		@include media-breakpoint-up(lg) {

			display: block;

		}


	}

	// navTopbar__logo
	&__logo {

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

		@include media-breakpoint-up(md){
			width: $nav-topbar-logo-desktop-width;
			height: auto;
		}

		IMG {

			height: $nav-topbar-logo-mobile-width-global;
			max-width: none;
			
			@include media-breakpoint-up(md){
				width: 100%;
				height: auto;
				max-width: 100%;
			}

		}

	}

	// navTopbar__collapse
	&__collapse {

		flex-grow: 0;
		margin-left: auto;

	}

	// navTopbar__meta
	&__meta {

		// follows same logic as parent

		display: none;

		@include media-breakpoint-up(md){
			font-weight: map-deep-get($token-font-weight-map, "semi-bold");
			display: flex;
			align-items: center;
		}


	}
	
	&__centeredContent {

		margin: auto;
		font-weight: map-deep-get($token-font-weight-map, "semi-bold");

	}

	
	&__dropdownWrapper {
		
		.dropdown-menu {

			top: $nav-topbar-height;

		}
		
	}

	// navTopbar__metaTime
	&__metaTime {

		color: map-deep-get($token-color-brand-map, 'secondary', '30');
		display: none;

		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
			display: block;
		}

	}

	// navTopbar__content
	&__content {

		// follows same logic as parent

		margin-left: auto;
		@include spacer-component-inline("md");

	}

	&__item {

		display: flex;
		align-items: center;
		position: relative;
		z-index: z("low");

		&.dropdown.show {

			// follows same logic as base element

			position: relative;

			#{$self}__userMenu {

				display: block;

			}

		}

		&.-hasNotifEmpty {

			#{$self}__icon {

				@include gradient-directional(map-deep-get($token-color-brand-map, "primary", "100"), map-deep-get($token-color-brand-map, "gradient", "primary"), 0, 100%, 45deg, true);

			}

		}

		&.-hasNotif {

			position: relative;

			#{$self}__icon {

				position: relative;
				z-index: z("low");

			}

		}

		&.-hasLabelShown {

			#{$self}__notificationLabel {

				transform: scaleX(1) translateY(-50%);

			}

			#{$self}__notificationLabelText {
				transition: opacity 0.1s linear;
				transition-delay: 0.2s;
				opacity: 1;
			}

		}

		&:hover {

			@media (hover: hover) {

				#{$self}__itemIcon {
					background-color: map-deep-get($token-color-brand-map,"secondary","120");
				}

			}

		}

	}

	&__notificationLabel {

		background-color: map-deep-get($token-color-grayscale-map, "0");
		color: map-deep-get($token-color-grayscale-map, "1000");
		position: absolute;
		z-index: z("negative");
		top: 50%;
		transform: scaleX(0) translateY(-50%);
		right: map-deep-get($token-spacer-unit-map, "16");
		@include spacer-component-inset-horiz-greater("xs","sm");
		padding-right: map-deep-get($token-spacer-unit-map, "32");
		border-radius: map-deep-get($token-radius-map, "16");
		transition: transform 0.15s ease-out;
		transform-origin: right;
		font-weight: map-deep-get($token-font-weight-map, "bold");
		font-size: map-deep-get($token-font-size-map, "body", "xs");

	}

	&__notificationLabelText {
		opacity: 0;
	}

	&__notificationLabelIcon {
		display: inline-block;
		transform: translateX(2px);
	}

	&__itemNotifAnim {

		position: absolute;
		z-index: z("low");
		top: 50%;
		left: 50%;
		width: 100%;
		height: 100%;
		transform: translate(-50%, -50%);
		pointer-events: none;

	}

	&__itemLabel {

		font-weight: #{map-deep-get($token-font-weight-map, "semi-bold")};
		margin-left: map-deep-get($token-spacer-unit-map,"8");
		display: none;

		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {

			display: block;

		}

	}

	// navTopbar__meta
	// navTopbar__content
	&__meta,
	&__content {
		@include spacer-component-inline('md');
	}


	&__dropdownToggle {

		position: relative;
		background-color: $nav-topbar-icon-background;
		border-radius: map-deep-get($token-radius-map, "32");
		display: flex;
		align-items: center;
		padding-left: map-deep-get($token-spacer-unit-map, "16");
		font-weight: map-deep-get($token-font-weight-map, "semi-bold");

		.#{$namespace}iconCircle {
			display: none;
			transition: transform 0.15s linear;
			@include media-breakpoint-up(md){
				display: inline-flex;
			}
		}

		* {
			color: map-deep-get($token-color-grayscale-map, "0");
		}

		&[aria-expanded="true"] {

			> [class*="icon"] {

				transform: rotate(180deg);

			}

		}

		&.-avatar {

			padding-left: 0;

		}

		&.-transparent {

			background-color: transparent;

		}

		&.-noInteraction {
			&:hover {

				background-color: transparent;

			}
		}

		&:hover {

			background-color: $nav-topbar-icon-background-hover;

		}

	}

	&__userDropdownAvatar {

	}

	&__userDropdownLabel {

		padding-left: map-deep-get($token-spacer-unit-map, "8");
		@include truncate-text(160px);

		@include media-breakpoint-between(xs,sm){
			@include sr-only;
		}

		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {

			font-weight: #{map-deep-get($token-font-weight-map, "semi-bold")};

		}

	}

	&__userMenu {

		display: none;
		position: absolute;
		top: #{$nav-topbar-height};
		width: 430px;

		right: -(map-deep-get($token-sizes-unit-map, "72"));
		margin-right: $snet-frame-main-horiz-padding-mobile-global;

		@include media-breakpoint-up(sm){
			right: 0;
			margin-right: 0;
		}

	}

	/* modifiers */

	// navTopbar -altStyle


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

	.cpb-theme &,
	.bfm-theme & {

		// follows same logic as base element

		@include gradient-directional(map-deep-get($token-color-brand-map, "secondary", "160"), map-deep-get($token-color-brand-map, "secondary", "140"), 0, 100%, 45deg, true);

		&__back {

			background-color: $bfm-nav-topbar-icon-background;

			&:hover,
			&:focus {

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

			}

		}

		&__icon,
		&__dropdownToggle {

			background-color: $bfm-nav-topbar-icon-background;

			&:hover {

				background-color: $bfm-nav-topbar-icon-background-hover;

			}

		}

		&__hoverBackground {

			&:hover {

				background-color: $bfm-nav-topbar-icon-background-hover;

			}

		}


	}

	.-fullWidth & {

		#{$self}__container {

			max-width: none;

		}

	}

	/* Pseudo Classes */

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

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}