////
/// @group Layout
/// Layout

///
html,
body,
#reactContainer,
#transitionContainer,
.screen-container {
	height: 100%;
}

///
.screen-container {
	overflow-x: hidden;
	overflow-y: auto;
}

///
.layout {
	display: flex;
	min-height: 100vh;

	&.layout {
		&-top,
		&-side:not(.layout-native) {
			flex-direction: column;
		}

		&-left {
			flex-direction: row;
		}

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

			&.aside-overlay .main {
				margin-left: 0;
			}
		}

		&-native {
			// Service Studio Preview
			& {
				-servicestudio-min-height: 100vh !important;
			}

			.main {
				width: 100%;
			}
		}
	}

	&.aside-expandable {
		.main {
			margin-left: 0;
		}
	}

	.main {
		display: flex;
		flex: 1;
		flex-direction: column;
	}
}

.main,
.fixed-header .main {
	padding-top: 0;
}

///
.layout-native,
.layout-top {
	.aside-navigation {
		// Service Studio Preview
		& {
			-servicestudio-display: none !important;
		}
	}
}

// iOS ---------------------------------------------------------------------------
///
.ios {
	.layout {
		min-height: 100%;

		&-native .footer {
			height: calc(var(--os-safe-area-bottom) + var(--bottom-bar-size));
		}

		.header {
			padding-top: var(--os-safe-area-top);
		}
	}
}

// Responsive --------------------------------------------------------------------
///
.desktop,
.tablet {
	.layout-native {
		&.aside {
			&-visible,
			&-expandable {
				--side-menu-size: 264px;
			}
		}
	}
}

///
.desktop {
	.layout-native {
		&.aside {
			&-visible,
			&-expandable {
				.main {
					width: calc(100% - var(--side-menu-size));
				}
			}
		}
	}
}

///
.tablet {
	&.landscape {
		.layout-native {
			&.menu-visible {
				&.aside {
					&-visible,
					&-expandable {
						.main {
							margin-left: var(--side-menu-size);
							width: calc(100% - var(--side-menu-size));
						}
					}
				}
			}
		}

		.layout-side.layout-native.aside-expandable {
			&.menu-visible .main {
				margin-left: var(--side-menu-size);
			}

			.main {
				margin-right: 0;
			}
		}
	}
}

///
.tablet,
.phone {
	.layout-side .main {
		margin-left: 0;
	}
}

///
.phone {
	.layout:not(.layout-native) [class*='ThemeGrid_Width']:not(.no-responsive) {
		margin: var(--space-none) var(--space-none) var(--space-base) var(--space-none);
		width: 100%;
	}
}

// IsRTL -------------------------------------------------------------------------
///
.is-rtl {
	&.tablet {
		.layout-native {
			&.aside {
				&-visible,
				&-expandable {
					.main {
						margin-left: 0;
					}
				}
			}
		}

		.layout-side .main {
			margin-right: 0;
		}

		&.landscape {
			.layout-side.layout-native.aside-expandable {
				&.menu-visible .main {
					margin-left: 0;
					margin-right: var(--side-menu-size);
				}

				.main {
					margin-right: 0;
				}
			}
		}
	}

	&.phone {
		.layout-side .main {
			margin-right: 0;
		}
	}

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

		&.aside-overlay .main {
			margin-right: 0;
		}
	}

	.aside-expandable {
		.main {
			margin-right: 0;
		}
	}
}

// Nested layout SS preview
///
.layout .main-content .layout {
	-servicestudio-min-width: calc(100vw - (var(--space-xl) * 2));
}

.phone .layout .main-content .layout {
	-servicestudio-min-width: calc(100vw - (var(--space-base) * 2));

	&.layout-native {
		-servicestudio-min-width: 100vw;
	}
}