/* Page Layout - ThemeGrid_Container */
////
/// @group Layout-ThemeGrid_Container
/// Page Layout - ThemeGrid_Container

///
.ThemeGrid_Container {
	margin: var(--space-none) auto;
	width: 100%;
}

///
.header {
	.ThemeGrid_Container {
		padding: var(--space-none) var(--space-xl);
	}
}

///
.layout {
	.main-content.ThemeGrid_Container {
		padding: var(--space-xl);
	}

	.footer.ThemeGrid_Container {
		padding: var(--space-base) var(--space-xl);
	}
}

// Responsive --------------------------------------------------------------------

///
.tablet {
	.header {
		.ThemeGrid_Container {
			padding: var(--space-none) var(--space-m);
		}
	}

	.main-content.ThemeGrid_Container {
		padding: var(--space-m);
	}

	.footer.ThemeGrid_Container {
		padding: var(--space-base) var(--space-m);
	}
}

///
.phone {
	.header {
		.ThemeGrid_Container {
			padding-left: calc(var(--os-safe-area-left) + var(--space-base));
			padding-right: calc(var(--os-safe-area-right) + var(--space-base));
		}
	}

	.main-content.ThemeGrid_Container {
		padding-bottom: var(--space-base);
		padding-left: calc(var(--os-safe-area-left) + var(--space-base));
		padding-right: calc(var(--os-safe-area-right) + var(--space-base));
		padding-top: var(--space-base);
	}

	.footer.ThemeGrid_Container {
		padding-left: calc(var(--os-safe-area-left) + var(--space-base));
		padding-right: calc(var(--os-safe-area-right) + var(--space-base));
	}
}

// Layout --------------------------------------------------------------------
// The default order of the selectors had to be changed, since some legacy cases were not loading the partials correctly.
///
.layout-native {
	.main-content.ThemeGrid_Container {
		padding: var(--space-none);
	}
}

// Android
// Gives a padding to the content, this avoids some content to be unreachable under the bottom bar
.android .main:has(.footer:empty) .content {
	padding-bottom: var(--safe-area-inset-bottom, 0px);
}