// ######################################### STAFF BAR #################################

.p-staffBar
{
	z-index: 150;
	.xf-publicStaffBar();
		<xf:if is="property('uix_pageStyle') == 'fixed'">
			.m-pageWidth();
			.m-pageInset();
		</xf:if>

	.hScroller-action
	{
		.m-hScrollerActionColorVariation(
			xf-default(@xf-publicStaffBar--background-color, transparent),
			xf-default(@xf-publicStaffBar--color, ~""),
			xf-intensify(@xf-publicStaffBar--color, 10%)
		);
	}
	
	<xf:if is="{{ property('uix_stickyStaffBar')}}">
	@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>

	.pageContent {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		position: relative;
		height: 100%;
		<xf:if is="property('uix_pageStyle') == 'covered'">
			.m-pageWidth();
			.m-pageInset();
		</xf:if>
		
		min-height: @xf-uix_stickyStaffBarHeight;

		.p-nav-opposite a:not(.button)
		{
			color: inherit;

			&:hover {.xf-uix_staffBarTabHover();}
		}
		
		a {
			.xf-uix_staffBarTab();
			
			&:hover {.xf-uix_staffBarTabHover();}
		}

	}


}

.p-staffBar-inner
{
	.m-clearFix();
	// padding-top: @xf-paddingMedium;
	//padding-bottom: @xf-paddingMedium;
}

.p-staffBar-link
{
	display: inline-block;
	vertical-align: top;
	color: inherit;
	padding: 4px @xf-paddingMedium;
	margin-right: .35em;
	.xf-uix_staffBarTab();

	&:last-child
	{
		margin-right: 0;
	}

	&:hover
	{
		text-decoration: none;
		// background: xf-diminish(@xf-publicStaffBar--background-color, 6%);
		border-radius: @xf-borderRadiusSmall;
		.xf-uix_staffBarTabHover();
	}
}