// This should be used for additional LESS setup code (that does not output anything).
// setup.less customizations should be avoided when possible.

// ######################## UI.X Variables ######################

// ANIMATIONS

// use for incoming elements, or growing elements
@uix_moveIn: cubic-bezier(0.0, 0.0, 0.2, 1);
// use for exiting elements, or shrinking elements
@uix_moveOut: cubic-bezier(0.4, 0.0, 1, 1);
// use for growing or moving elements that dont exit/enter the page
@uix_move: cubic-bezier(0.4, 0.0, 0.2, 1);

// UI.X browser query variables

@isIe: ~"(-ms-high-contrast: none), (-ms-high-contrast: active)";

@uix_sidebarNavBreakpoint: {{ property('pageWidthMax')  + ( 2 * (property('uix_sidebarNavWidth') + property('elementSpacer')) ) }}px;

<xf:set var="$uix_pageEdgeSpacer">{{ property('pageEdgeSpacer') * 2}}px</xf:set>

@uix_navigationPaddingV: 8px;

// UI.X MIXINS

.m-uix_whiteText (@background-color, @color: #fff) when (luma(@background-color) <= 43%) {
	color: @color;
}

.m-uix_collapseOverflow() {
	clip-path: inset(-2px -2px -2px -2px);
	
	@media @isIe {
		overflow: hidden;
	}
}

.m-uix_removePageSpacer() {
	@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
		margin-left: -@xf-pageEdgeSpacer * .5;
		margin-right: -@xf-pageEdgeSpacer * .5;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}
}

.m-pageSpacerPadding(@defaultPadding: @xf-pageEdgeSpacer) {
	
	padding-left: @defaultPadding;
	padding-right: @defaultPadding;

	// iPhone X/Xr/Xs support
	/*
	@supports(padding: max(0px))
	{
		&
		{
			padding-left: ~"max(@{defaultPadding}, env(safe-area-inset-left))";
			padding-right: ~"max(@{defaultPadding}, env(safe-area-inset-right))";
		}
	}
	*/
	
	@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
		@defaultPadding: @xf-pageEdgeSpacer / 2;
			
		padding-left: @defaultPadding;
		padding-right: @defaultPadding;

		// iPhone X/Xr/Xs support
		@supports(padding: max(0px))
		{
			&
			{
				padding-left: ~"max(@{defaultPadding}, env(safe-area-inset-left))";
				padding-right: ~"max(@{defaultPadding}, env(safe-area-inset-right))";
			}
		}		
	}
	
	/*
	padding-left: @xf-pageEdgeSpacer;
	padding-right: @xf-pageEdgeSpacer;

	@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
		padding-left: {{ property('pageEdgeSpacer') / 2 }}px;
		padding-right: {{ property('pageEdgeSpacer') / 2 }}px;	
		padding-left: ~"max(10px, env(safe-area-inset-left)) !important";
		padding-right: ~"max(10px, env(safe-area-inset-right)) !important";
	}
	*/
}

.m-pageSpacer() {
	<xf:if is="property('uix_pageStyle') != 'wrapped'">
		width: calc(~"100% - {{$uix_pageEdgeSpacer}}");
	</xf:if>

	@media (max-width: @xf-responsiveEdgeSpacerRemoval) {
		<xf:if is="property('uix_pageStyle') == 'covered'">
			width: calc(~"100% - @xf-pageEdgeSpacer");
		<xf:else />
			width: 100%;
		</xf:if>
	}
}

.m-pageWidth()
{
	max-width: @xf-pageWidthMax;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	.m-pageSpacer();
	<xf:if is="property('uix_pageStyle') != 'covered'">
		.m-pageSpacerPadding();
	</xf:if>
	transition: max-width 0.2s;
	
	@media (max-width: @xf-responsiveWide) {
		<xf:if is="property('uix_pageStyle') == 'covered'">
			padding-left: env(safe-area-inset-left) !important;
			padding-right: env(safe-area-inset-right) !important;
		</xf:if>
	}

	.uix_page--fluid & {
		<xf:if is="property('uix_pageStyle') != 'wrapped'">
		@media (min-width: @xf-pageWidthMax) {
			max-width: 100%;
		}
		<xf:else />
			max-width: 100%;
		</xf:if>
	}

	<xf:if is="(property('uix_navigationType') == 'sidebarNav') && (property('uix_pageStyle') == 'covered')">
	@media (max-width: @uix_sidebarNavBreakpoint)  {
		.uix_page--fixed & {max-width: 100%;}
		#uix_widthToggle--trigger {display: none;}
	}
	</xf:if>
}

.m-pageInset(@defaultPadding: @xf-pageEdgeSpacer)
{
	// here to satisfy global scope only
}

// Sticky sidebar/sidenav

<xf:if is="(property('uix_searchPosition') == 'tablinks') && (property('uix_loginTriggerPosition ') == 'tablinks') && (property('uix_userTabsPosition ') == 'tablinks')">
	<xf:set var="$uix_sectionLinkHeight">{{property('uix_sectionLinkHeight')}}</xf:set>
<xf:elseif is="property('uix_viewportWidthRemoveSubNav') == '100%'" />
	<xf:set var="$uix_sectionLinkHeight">0px</xf:set>
<xf:else />
	<xf:set var="$uix_sectionLinkHeight">{{property('uix_sectionLinkHeight')}}</xf:set>
</xf:if>

<xf:if is="property('publicNavSticky') == 'none'">
	@uix_navHeight: {{ property('elementSpacer') }};
<xf:elseif is="property('publicNavSticky') == 'primary'" />
	@uix_navHeight: {{ property('elementSpacer') + property('uix_stickyNavHeight') }};
<xf:elseif is="property('publicNavSticky') == 'all'" />
	@uix_navHeight: {{ property('elementSpacer') + property('uix_stickyNavHeight')}}px + {{$uix_sectionLinkHeight }};
</xf:if>