/*!
* Components/XMain
*/

.x-main {
	--x-comp-main-container-motion-duration: var(--x-sys-motion-duration-short-4, 200ms);
	--x-comp-main-container-motion-easing: var(--x-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.x-main {
	flex: 1 0 auto;
	max-width: 100%;
	padding-bottom: var(--x-layout-bottom);
	padding-inline-start: var(--x-layout-start);
	padding-inline-end: var(--x-layout-end);
	padding-top: var(--x-layout-top);
	transition-duration: var(--x-comp-main-container-motion-duration);
	transition-timing-function: var(--x-comp-main-container-motion-easing);
}

.x-main__scroller {
	max-width: 100%;
	position: relative;
}

.x-main--scrollable {
	display: flex;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.x-main--scrollable>.x-main__scroller {
	--x-layout-bottom: 0rem;
	--x-layout-left: 0rem;
	--x-layout-right: 0rem;
	--x-layout-top: 0rem;

	flex: 1 1 auto;
	overflow-y: auto;
}