@_nav-elTransitionSpeed: @xf-animationSpeed;
@_navAccount-hPadding: @xf-paddingLarge;
@uix_sidebarNavBreakpoint: {{ property('pageWidthMax')  + 1 + ( 2 * (property('uix_sidebarNavWidth') + property('elementSpacer')) ) }}px;

.u-anchorTarget
{
	.m-stickyHeaderConfig(@xf-publicNavSticky);
	height: (@_stickyHeader-height + @_stickyHeader-offset);
	margin-top: -(@_stickyHeader-height + @_stickyHeader-offset);
}

@supports (scroll-padding-top: 10px)
{
	html:not(.has-browser-safari)
	{
		.m-stickyHeaderConfig(@xf-publicNavSticky);
		scroll-padding-top: (@_stickyHeader-height + @_stickyHeader-offset);
	}

	html:not(.has-browser-safari) .u-anchorTarget
	{
		height: 0;
		margin-top: 0;
	}
}

.uix_pageWidth--wrapped {
	width: 100%;
	<xf:if is="property('uix_pageStyle') == 'wrapped'">
		.m-pageWidth();
	</xf:if>
}

.p-pageWrapper
{
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	// .xf-pageBackground();

	.is-modalOverlayOpen &
	{
		& when (unit(xf-default(@xf-overlayMaskBlur, 0)) > 0)
		{
			filter: blur(@xf-overlayMaskBlur);
		}
	}
	
	flex-grow: 1;
	<xf:if is="property('uix_pageStyle') == 'wrapped'">
		.xf-uix_pageWrapper();
		@media (min-width: {{ property('responsiveEdgeSpacerRemoval') + 1 }}px) {
			margin-top: @xf-pageEdgeSpacer;
			margin-bottom: @xf-pageEdgeSpacer;
			padding: @xf-pageEdgeSpacer;
		}
	
		@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
			border: none;
			box-shadow: none;
		}
	</xf:if>
}

// RESPONSIVE HEADER

.p-offCanvasAccountLink
{
	display: none;
	
	.avatar {margin-right: 24px;}
}

@media (max-width: @xf-responsiveNarrow)
{
	.p-offCanvasAccountLink, .p-offCanvasRegisterLink
	{
		display: block;
	}
}

@media (max-width: @xf-pageWidthMax) {
	#uix_widthToggle--trigger {display: none;}
}

#uix_widthToggle--trigger:hover {cursor: pointer;}

.uix_page--fixed #uix_widthToggle--trigger .fa--xf:before {
	.m-faBase();
	.m-faContent(@fa-var-expand-alt);
}

{{ include('app_staffbar.less') }}
<xf:if is="{{ property('uix_viewportShowLogoBlock') }} != '100%'">
	{{ include('app_header.less') }}
</xf:if>
{{ include('app_stickynav.less') }}
{{ include('app_nav.less') }}
{{ include('app_sectionlinks.less') }}
{{ include('app_body.less') }}
{{ include('app_breadcrumbs.less') }}
{{ include('app_title.less') }}
{{ include('app_footer.less') }}
{{ include('app_inlinemod.less') }}
{{ include('app_ignored.less') }}
{{ include('app_username_styles.less') }}
{{ include('app_user_banners.less') }}
{{ include('app_alerts.less') }}
{{ include('app_content_vote.less') }}