/**
 * Resort room tabs (Elementor Nested Tabs with the CSS class aila-tabs-scroll).
 *
 * The tab titles stay side by side on every screen, like TheLifeCo's rooms
 * tabs. When they no longer fit (six Palm rooms on a phone or tablet) the row
 * scrolls sideways the way the sub header does below 1025px: edge fades and a
 * sand arrow on the right while there is more to see. Below 1025px the row
 * also sticks under the sub header while its room is on screen. tabs.js sets
 * is-scrollable / at-start / at-end / is-stuck, --aila-tabs-h (the row's
 * height) and --aila-tabs-gap (Elementor's gap between row and panel).
 */

.aila-tabs-scroll .e-n-tabs {
	--aila-tabs-fade-l: 0px;
	--aila-tabs-fade-r: 0px;
	position: relative;
}

.aila-tabs-scroll.is-scrollable:not(.at-start) .e-n-tabs {
	--aila-tabs-fade-l: 32px;
}

.aila-tabs-scroll.is-scrollable:not(.at-end) .e-n-tabs {
	--aila-tabs-fade-r: 56px;
}

.aila-tabs-scroll .e-n-tabs-heading {
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-padding-inline: 20px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--aila-tabs-fade-l), #000 calc(100% - var(--aila-tabs-fade-r)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--aila-tabs-fade-l), #000 calc(100% - var(--aila-tabs-fade-r)), transparent 100%);
}

.aila-tabs-scroll .e-n-tabs-heading::-webkit-scrollbar {
	display: none;
}

.aila-tabs-scroll .e-n-tabs-heading > .e-n-tab-title {
	flex-shrink: 0;
	white-space: nowrap;
}

/* A centred row that overflows would clip its first titles; scrolling starts
   from the left edge instead. */
.aila-tabs-scroll.is-scrollable .e-n-tabs-heading {
	justify-content: flex-start;
}

/* Hello Elementor's reset gives every button:hover / :focus a #c36 fill and
   white text; the arrow keeps its sand fade and navy chevron in every state
   (same as the sub header arrow, aila-subnav 1.0.6). */
.aila-tabs-scroll button.aila-tabs-scroll__next,
.aila-tabs-scroll button.aila-tabs-scroll__next:hover,
.aila-tabs-scroll button.aila-tabs-scroll__next:focus,
.aila-tabs-scroll button.aila-tabs-scroll__next:active {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 48px;
	height: var(--aila-tabs-h, 40px);
	margin: 0;
	padding: 0 4px 0 0;
	border: 0;
	border-radius: 0;
	background: linear-gradient(to right, rgba(244, 240, 234, 0), var(--e-global-color-86ff2ea, #f4f0ea) 55%);
	box-shadow: none;
	outline: 0;
	color: #1a233d;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.aila-tabs-scroll:not(.is-scrollable) button.aila-tabs-scroll__next,
.aila-tabs-scroll.at-end button.aila-tabs-scroll__next {
	opacity: 0;
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   Below 1025px (burger header, sticky sub header): the row sticks right under
   the sub header until its tabs end. The arrow is the row's next sibling and
   sticks with it, pulled up over the row by its height plus the gap. Stuck,
   the row gets the sub header's sand band (side to side) and hairline; the
   edge fades go, since the room would show through them.
   ---------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.aila-tabs-scroll .e-n-tabs {
		--aila-tabs-top: calc(var(--aila-subnav-top, 60px) + var(--aila-subnav-h, 52px));
	}

	.aila-tabs-scroll .e-n-tabs-heading {
		position: sticky;
		top: var(--aila-tabs-top);
		z-index: 3;
	}

	.aila-tabs-scroll button.aila-tabs-scroll__next,
	.aila-tabs-scroll button.aila-tabs-scroll__next:hover,
	.aila-tabs-scroll button.aila-tabs-scroll__next:focus,
	.aila-tabs-scroll button.aila-tabs-scroll__next:active {
		position: sticky;
		top: var(--aila-tabs-top);
		z-index: 4;
		flex: none;
		align-self: flex-end;
		margin-top: calc(-1 * var(--aila-tabs-h, 40px) - var(--aila-tabs-gap, 0px));
	}

	.aila-tabs-scroll.is-stuck .e-n-tabs-heading {
		background-color: var(--e-global-color-86ff2ea, #f4f0ea);
		box-shadow:
			-40px 0 0 var(--e-global-color-86ff2ea, #f4f0ea),
			40px 0 0 var(--e-global-color-86ff2ea, #f4f0ea),
			0 1px 0 rgba(26, 35, 61, 0.14),
			-40px 1px 0 rgba(26, 35, 61, 0.14),
			40px 1px 0 rgba(26, 35, 61, 0.14);
		-webkit-mask-image: none;
		mask-image: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aila-tabs-scroll button.aila-tabs-scroll__next {
		transition: none;
	}
}