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

///
.layout-side {
	&.fixed-header {
		&.aside {
			&-expandable {
				.header {
					left: 0;
				}
			}

			&-overlay {
				.header {
					left: 0;
				}
			}
		}

		.header {
			left: var(--side-menu-size);
		}
	}

	&.layout-native.aside-expandable .main .header {
		z-index: var(--layer-global-navigation);
	}

	.aside-expandable {
		&:not(.fixed-header) .main .header {
			margin-left: calc(var(--side-menu-size) * -1);
		}

		&.menu-visible {
			&:not(.fixed-header) .main .header {
				margin-left: 0;
			}

			.header {
				left: 0;
			}
		}
	}

	.header-navigation {
		align-items: center;
		display: inline-flex;
	}
}

// Responsive --------------------------------------------------------------------
///
.desktop {
	.layout-side.layout-native.aside-expandable {
		.header {
			margin-left: 0;
		}
	}

	.aside-expandable {
		.header {
			z-index: var(--layer-global-navigation);
		}
	}
}

///
.tablet,
.phone {
	.layout-side {
		&.aside-expandable:not(.fixed-header) {
			.main .header {
				margin-left: 0;
			}
		}

		&.fixed-header .header {
			left: 0;
		}
	}
}

///
.tablet {
	&.portrait {
		.layout-side.layout-native.aside-expandable .main .header {
			z-index: var(--layer-global-navigation);
		}
	}
}

///
.phone {
	.layout-side.layout-native.aside-expandable .main .header {
		z-index: var(--layer-global-navigation);
	}
}

// IsRTL -------------------------------------------------------------------------
///
.is-rtl {
	&.tablet,
	&.phone {
		left: 0;
		right: 0;
	}

	.layout-side {
		&.fixed-header {
			&.aside-expandable .header {
				left: 0;
				right: 0;
			}

			.header {
				left: 0;
				right: var(--side-menu-size);
			}
		}
	}

	.aside-expandable.menu-visible .header {
		left: 0;
		right: 0;
	}
}