:root {
	height: 100%;
	--header-height: 4rem;
	--sidebar-width: 17.5rem;
	--sidebar-collapsed-width: 4rem;
	--sidebar-current-width: 0px;
	--main-content-padding: 0px;
}

@media (min-width: 65rem) and (max-width: 89.99rem) {
	:root {
		--sidebar-current-width: calc(4rem + 1rem);
		--main-content-padding: 1rem;
	}
}

@media (min-width: 90rem) {
	:root {
		--sidebar-current-width: calc(17.5rem + 1rem);
		--main-content-padding: 1rem;
	}
}

body {
	background-color: #f0f0f2;
	margin: 0;
	height: 100%;
	min-width: 20rem;
}

.portal {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.portal-body {
	display: flex;
	flex-grow: 1;
	margin-top: var(--header-height);
	transition: margin-top 200ms ease-in-out;
	position: relative;
}

.portal-main {
	flex-grow: 1;
	min-width: 0;
}

@media (min-width: 65rem) {
	:has(aside) .portal-main {
		margin-left: var(--sidebar-current-width);
		padding-right: var(--main-content-padding);
		transition: margin-left 0.6s cubic-bezier(0.64, -0.17, 0.5, 1.11);
		will-change: margin-left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.portal-body,
	.portal-main {
		transition: none;
	}
}

.sidebar-no-transition .portal-main {
	transition: none !important;
}