// STICKY NAV SETUP

<xf:if is="property('publicNavSticky')">

.p-pageWrapper .p-navSticky
{
	z-index: @zIndex-1;

	&.is-sticky
	{
		z-index: @zIndex-4;
		// .m-dropShadow(0, 2px, 5px, 0px, .26);
		<xf:if is="!{{ property('uix_removeHeaderWrapper')}}">
		position: fixed !important;
		top: 0;
		bottom: auto !important;
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
		</xf:if>

		<xf:if is="property('uix_pageStyle') == 'wrapped' && !property('uix_removeHeaderWrapper')">
		@uix_pageSpacerTotal: @xf-pageEdgeSpacer * 2;
		@uix_adjustedWrappedPageWidth: @xf-pageWidthMax - @uix_pageSpacerTotal;

		width: 100vw !important;
		@media (min-width: @xf-responsiveEdgeSpacerRemoval) {
			width: ~'calc(100vw - @{uix_pageSpacerTotal}) !important';
		}

		@media (min-width: @uix_adjustedWrappedPageWidth) {
			width: @uix_adjustedWrappedPageWidth !important;	
		}
		</xf:if>

		> * {box-shadow: @xf-uix_elevation1; border-radius: 0 !important;}

		.p-nav {.xf-uix_stickyNavigationStyle();}

		.p-sectionLinks {.xf-uix_sectionLinksStickyStyle();}

		<xf:if is="property('uix_pageStyle') != 'covered'">
		// .m-pageWidth();
		padding: 0 !important;

		</xf:if>

		<xf:if is="property('uix_pageStyle') == 'fluid'">
		> * {
			max-width: 100%;
		}
		</xf:if>

		.p-nav-inner {
			height: @xf-uix_stickyNavHeight;

			.p-navEl,
			.p-navEl-link {max-height: @xf-uix_stickyNavHeight;}
		}

		<xf:if is="property('publicNavSticky')">
		.p-sectionLinks {
			border-bottom: 0;

			.pageContent {
				height: @xf-uix_stickySectionLinkHeight;
			}
		}
		</xf:if>
	}

	<xf:if is="{{ property('uix_removeHeaderWrapper')}}">
	@supports (position: sticky) or (position: -webkit-sticky)
	{
		&
		{
			position: -webkit-sticky;
			position: sticky;
			top: 0;

			&.is-sticky-broken,
			&.is-sticky-disabled
			{
				position: static;
				top: auto;
			}
		}
	}
	</xf:if>
}

</xf:if>

<xf:if is="property('uix_mainTabsSticky')">
.uix_headerContainer .uix_mainTabBar.is-sticky {
	position: fixed !important;
	bottom: auto !important;
	left: 0;
	right: 0;
	@media (max-width: @xf-uix_search_maxResponsiveWidth ) {z-index: 500;}
	margin: 0 auto;
	border-radius: 0 !important;

	.tabs-tab {height: @xf-uix_mainTabsHeight;}

	box-shadow: @xf-uix_elevation1;

	<xf:if is="property('uix_pageStyle') == 'wrapped' && !property('uix_removeHeaderWrapper')">
	width: @xf-pageWidthMax - (@xf-pageEdgeSpacer * 2) !important;
	</xf:if>
}

.uix_mainTabBar.is-sticky {
	box-shadow: @xf-uix_elevation1;
	z-index: 300;
}

</xf:if>

<xf:if is="property('uix_stickyStaffBar')">
.p-staffBar.is-sticky {
	<xf:if is="!{{ property('uix_removeHeaderWrapper')}}">
	position: fixed !important;
	bottom: auto !important;
	top: 0 !important;
	left: 0;
	right: 0;
	margin: 0 auto;
	</xf:if>
	z-index: 500;
	border-radius: 0 !important;
	.xf-uix_stickyStaffbarStyle();
	height: @xf-uix_stickyStaffBarHeight;

	<xf:if is="property('publicNavSticky') == 'none'">
	box-shadow: @xf-uix_elevation1;
	</xf:if>

	<xf:if is="property('uix_pageStyle') == 'wrapped'&& !property('uix_removeHeaderWrapper')">
	width: @xf-pageWidthMax - (@xf-pageEdgeSpacer * 2) !important;
	</xf:if>
}

<xf:if is="{{ property('uix_removeHeaderWrapper')}}">
.p-staffBar {
	@supports (position: sticky) or (position: -webkit-sticky)
	{
		&
		{
			position: -webkit-sticky;
			position: sticky;
			top: 0;

			&.is-sticky-broken,
			&.is-sticky-disabled
			{
				position: static;
				top: auto;
			}
		}
	}
}
</xf:if>

</xf:if>