/* Page Layout - Menu */
////
/// @group Layout-Menu
/// Page Layout - Menu

///
.app-menu-content {
	height: 100%;

	// Service Studio Preview
	& {
		-servicestudio-background-color: var(--header-color);
		-servicestudio-height: auto !important;
	}
}

///
.app-menu-overlay {
	background-color: var(--overlay-background);
	height: 100vh;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	transition: opacity 130ms ease-in;
	width: 100vw;
	will-change: opacity;
	z-index: calc(var(--osui-menu-layer) - var(--layer-local-tier-1));

	// Service Studio Preview
	& {
		-servicestudio-display: none;
	}
}

///
.menu-visible {
	.app-menu-overlay {
		opacity: 1;
		pointer-events: auto;
		transition: opacity 330ms ease-out;
	}
}

///
.layout {
	.app-menu-content {
		// Service Studio Preview
		& {
			-servicestudio-height: 100% !important;
		}
	}
}

///
.layout-top {
	.header-content {
		// Service Studio Preview
		& {
			-servicestudio-align-items: center;
			-servicestudio-flex-direction: row;
		}
	}
}

///
.layout-blank {
	.header-content {
		// Service Studio Preview
		& {
			-servicestudio-align-items: center;
			-servicestudio-flex-direction: row;
		}
	}
}

///
.layout-side {
	.aside-navigation {
		// Service Studio Preview
		& {
			-servicestudio-background-color: var(--color-neutral-0);
			-servicestudio-height: 100%;
			-servicestudio-position: fixed;
			-servicestudio-width: var(--side-menu-size);
			-servicestudio-z-index: var(--layer-global-navigation);
		}

		& > div {
			// Service Studio Preview
			& {
				-servicestudio-height: 100%;
			}
		}
	}

	.header {
		.app-menu-content {
			// Service Studio Preview
			& {
				-servicestudio-flex-direction: row;
				-servicestudio-position: static;
				-servicestudio-width: 100%;
			}
		}

		.app-menu-links {
			// Service Studio Preview
			& {
				-servicestudio-align-items: center;
				-servicestudio-flex-direction: row;
			}
		}
	}

	.header-navigation {
		& > div {
			// Service Studio Preview
			& {
				-servicestudio-height: 100%;
				-servicestudio-width: 100%;
			}
		}
	}
}

// Responsive --------------------------------------------------------------------
///
.desktop {
	.app-menu-overlay {
		display: none;
	}

	.aside-overlay .app-menu-overlay {
		display: block;
	}
}

///
.tablet,
.phone {
	.app-login-info {
		padding: var(--space-s) var(--space-m);
	}

	.app-menu-content {
		background-color: var(--color-neutral-0);
		flex-direction: column;
		height: 100%;
		left: calc(-1 * var(--side-menu-size));
		position: fixed;
		top: 0;
		transform: translateX(0) translateZ(0);
		transition: transform 130ms ease-in;
		width: var(--side-menu-size);

		will-change: transform;
		z-index: var(--osui-menu-layer);
	}

	// .menu-visible is a class added into the .layout element
	.menu-visible .app-menu-content {
		transform: translateX(var(--side-menu-size)) translateZ(0);
		transition: transform 330ms ease-out;
	}

	.layout-side {
		.header .app-menu-content,
		.aside-navigation {
			// Service Studio Preview
			& {
				-servicestudio-display: none;
			}
		}
	}
}

///
.tablet {
	&.landscape {
		.layout-native.aside-expandable .app-menu-overlay {
			display: none;
		}
	}
}

///
.phone {
	.app-menu-content {
		padding-bottom: var(--os-safe-area-bottom);
		padding-left: var(--os-safe-area-left);
	}
}

///
.android {
	&[data-status-bar-height] {
		&.portrait {
			.app-menu-content {
				padding-top: var(--status-bar-height);
			}
		}

		&.landscape {
			.app-menu-content {
				padding-left: var(--status-bar-height);
			}
		}
	}
}

///
.ios {
	.app-menu-content {
		padding-bottom: var(--os-safe-area-bottom);
		padding-top: var(--os-safe-area-top);
	}
}

// IsRTL -------------------------------------------------------------------------
///
.is-rtl {
	.app-menu-content {
		left: auto;
		right: calc(-1 * var(--side-menu-size));
	}

	.menu-visible {
		.app-menu-content {
			right: 0;
			-webkit-transform: translateX(0) translateZ(0);
			transform: translateX(0) translateZ(0);
		}
	}

	&.tablet,
	&.phone {
		.menu-visible .app-menu-content {
			right: 0;
			transform: translateX(0) translateZ(0);
			transition: all 330ms ease-out;
		}
	}
}