.uix_fabBar {
	<xf:if is="property('uix_fab') == 'never' && (property('uix_visitorTabsMobile') == 'tabbar')">
	@media (max-width: @xf-responsiveNarrow) {
		margin-bottom: calc(60px - @xf-paddingLarge);
	}
	</xf:if>
	
		<xf:if is="property('uix_visitorTabsMobile') == 'tabbar'">
	@media (max-width: @xf-responsiveNarrow) {
		.u-scrollButtons:last-child {
			margin-bottom: {{ property('paddingLarge') + 30 }}px;
		}
	}
	</xf:if>

	.uix_editor--focused & {
		display: none;
	}

	&.uix_fabBar--mirror {
		visibility: hidden;
		position: static;
		padding-top: calc(@xf-paddingLarge * 2);
		background-color: @xf-uix_fabBarBackground;
		.p-title-pageAction{ padding-top: 0;}
		<xf:if is="property('uix_fab') == 'mobile'">
		@media (min-width: @xf-uix_fabVw) {
			display: none;
		}
		</xf:if>
	}

	<xf:if is="!property('uix_fabScroll')">
	// background-color: @xf-uix_fabBarBackground;
	// height: 60px;
	padding: @xf-paddingLarge 0;
	</xf:if>

	<xf:if is="property('uix_fab') == 'mobile'">
	@media (min-width: @xf-uix_fabVw) {
		.p-title-pageAction{ display: none;}
	}
	</xf:if>

	display: flex;
	flex-direction: column;
	align-items: flex-end;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: @xf-paddingLarge;
	z-index: 150;
	pointer-events: none;

	.u-scrollButtons {position: static;}

	.p-title-pageAction {
		<xf:if is="property('uix_fabScroll') && (property('uix_visitorTabsMobile') == 'tabbar')">
		margin-bottom: -30px;
		<xf:else />
		margin-bottom: calc(-60px - @xf-paddingLarge);
		</xf:if>
		transition: ease-in .2s margin-bottom;
		z-index: 5;
		padding-top: @xf-paddingLarge;

		.button {
			border-radius: 100%;
			height: 60px;
			width: 60px;
			padding: 0;
			font-size: 0;
			display: none;
			align-items: center;
			justify-content: center;
			box-shadow: @xf-uix_elevation2;
			background: @xf-buttonCta--background-color;
			color: @xf-buttonCta--color;

			&:last-child {display: flex;}

			&:not(.button--icon) {display: none;}

			.button-text:before {font-size: @xf-uix_iconSizeLarge; margin: 0;}
		}
	}

	.u-scrollButtons {pointer-events:auto;}

	&.uix_fabBar--active .p-title-pageAction {
		margin-bottom: 0;
		pointer-events: auto;
		<xf:if is="property('uix_visitorTabsMobile') == 'tabbar'">
		@media (max-width: @xf-responsiveNarrow) {
			margin-bottom: {{ property('paddingLarge') + 30 }}px;
	}
	</xf:if>
}
}

#uix_jumpToFixed {
	font-size: 24px;
	color: #FFF;
	background-color: @xf-uix_secondaryColor;
	padding: 8px;
	margin: 16px;
	border-radius: 2px;
	position: fixed;
	z-index: 1;
	transition: opacity 0.4s;
	display: block;
	padding: 0;
	bottom: 0;
	right: 0;
	left: auto;
}

#uix_jumpToFixed a:first-child {
	padding-bottom: 4px;
}

#uix_jumpToFixed a {
	color: inherit;
	display: block;
	padding: 8px;
}

#uix_jumpToFixed a:last-child {
	padding-top: 4px;
}