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

///
.layout-side {
	.app-logo {
		@include app-logo;
	}

	.app-menu-content {
		background-color: var(--color-neutral-0);
		bottom: 0;
		flex-direction: column;
		height: auto;
		position: fixed;
		top: 0;
		width: var(--side-menu-size);
		z-index: var(--osui-menu-layer);
	}
}

// This class is applied to .layout element either
///
.aside-overlay {
	.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 {
		.app-menu-content {
			transform: translateX(var(--side-menu-size)) translateZ(0);
			transition: transform 330ms ease-out;
		}
	}
}

// Responsive --------------------------------------------------------------------
///
.desktop {
	.layout-side {
		&:not(.layout-native):not(.aside-overlay) .app-menu-content {
			left: 0;
			right: 0;
		}

		&.aside-expandable:not(.fixed-header) .app-menu-content {
			padding-top: var(--header-size);
			top: 0;
		}
	}

	.aside-expandable {
		&.menu-visible {
			.app-menu-content {
				display: flex;
			}

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

		.app-menu-content {
			display: none;
		}
	}
}

///
.tablet {
	&.landscape {
		.layout-native {
			&.aside-expandable.menu-visible {
				.app-menu-content {
					display: flex;
					transform: none;
					transition: none;
				}
			}
		}
	}
}

// IsRTL -------------------------------------------------------------------------
///
.is-rtl {
	&.desktop {
		.aside-expandable.menu-visible {
			.main {
				margin-left: 0;
				margin-right: var(--side-menu-size);
			}
		}
	}

	&.tablet,
	&.phone {
		.app-menu-content {
			right: calc(-1 * var(--side-menu-size));
			transition: all 330ms ease-out;
		}
	}

	&:not(.portrait) {
		.layout-side {
			&.layout-native {
				&.aside-visible {
					.app-menu-content {
						right: 0;
					}
				}
			}
		}
	}

	.layout-side .app-menu-content {
		left: auto;
	}

	.aside-overlay.menu-visible {
		.app-menu-content {
			right: 0;
			transform: translateX(0) translateZ(0);
			transition: all 330ms ease-out;
		}
	}
}