/* Page Layout - Header */
////
/// @group Layout-Header
/// Page Layout - Header

///
.header {
	background-color: var(--header-color);
	box-shadow: 0 1px 5px 0 rgba(21, 24, 26, 0.1);
	z-index: var(--layer-global-navigation);

	// Service Studio Preview
	& {
		-servicestudio-position: relative;
	}

	&-top {
		height: var(--header-size);
	}

	&-logo {
		padding-right: var(--space-base);

		.application-name {
			word-break: break-word;
		}
	}

	&-navigation {
		flex: 1;
	}

	.header-content {
		height: 100%;

		& > [data-block*='ApplicationTitle'] .application-name {
			margin-right: var(--space-m);
		}
	}

	.app-logo {
		@include app-logo;
	}
}

///
.fixed-header {
	.header {
		left: 0;
		position: -webkit-sticky; //Fix for older iPhones
		position: sticky;
		right: 0;
		top: 0;
	}
}

///
.menu-icon {
	background-color: transparent;
	border: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: center;
	margin-right: var(--space-m);
	padding: 0;
	width: 24px;

	&-line {
		background-color: var(--color-neutral-8);
		border-radius: 20px;
		height: 3px;
		margin: 2px 0;
		width: 24px;
	}
}

///
.menu-back {
	color: var(--color-neutral-8);
}

///
.user-info {
	align-items: center;
	display: flex;
	height: 100%;

	div {
		align-items: center;
		display: inline-flex;
	}
}

///
.aside-expandable .header .ThemeGrid_Container {
	max-width: 100%;
}

///
.layout-native .app-menu-icon.back .menu-icon,
.desktop .menu-icon,
.tablet.landscape .layout-native.aside-visible .menu-icon,
.app-menu-icon.back .menu-icon,
.app-menu-icon:not(.back) .menu-back {
	display: none;
}

// Responsive --------------------------------------------------------------------
///
.desktop {
	.header-content {
		& > [data-block*='ApplicationTitle'] .application-name {
			display: none;
		}
	}

	.aside-expandable,
	.aside-overlay {
		.menu-icon {
			display: flex;
		}
	}
}

///
.tablet,
.phone {
	.layout-top .header-navigation {
		height: 100vh;
		left: 0;
		position: fixed;
		top: 0;
		z-index: var(--layer-global-navigation);
	}
}

// IsRTL -------------------------------------------------------------------------
///
.is-rtl {
	.header {
		&-logo {
			padding-left: var(--space-base);
			padding-right: 0;
		}

		.header-content > [data-block*='ApplicationTitle'] .application-name {
			margin-right: 0;
			margin-left: var(--space-m);
		}
	}

	.app-logo,
	.layout-side .app-logo {
		margin-left: var(--space-s);
		margin-right: 0;
	}

	.menu-icon {
		margin-left: var(--space-m);
		margin-right: 0;
	}
}

// -------------------------------------------------------------------------------
/* Fix for responsive in safari forcing refresh for events to work */
.osx.tablet .layout-top:not(.menu-visible) .header-navigation,
.osx.phone .layout-top:not(.menu-visible) .header-navigation {
	pointer-events: none;
}