.tab-scroller {
	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: row;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory; 
	overflow-x: auto; 
	overflow-y: hidden;

	scrollbar-width: none;
	-ms-overflow-style: none;
}

.tab-scroller::-webkit-scrollbar {
	display: none;
}

.tab-page {
	width: 100%;
	height: 100%;
	flex: 0 0 100%;
	scroll-snap-align: start;

	/* Contains each desktop's absolutely positioned window-section (and therefore its
	   floating windows), so a desktop's windows stay inside that page and scroll with
	   it instead of being pinned to the scroller's origin. */
	position: relative;
}

.tab-container {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.tab-header {
	height: 40px;
	width: 100%;
	display: flex;
}

.tab-button {
	height: 100%;
	width: 100%;
	/* background-color: blue; */
}

@supports (animation-timeline: scroll()) {
	.tab-scroller {
		scroll-timeline: --nav-timeline inline;
	}

	.tab-button {
		animation: highlight-active linear both;
		animation-timeline: --nav-timeline;
		
		animation-range: 
		calc((var(--index) - 0.5) * 100% / var(--total-pages)) 
		calc((var(--index) + 0.5) * 100% / var(--total-pages));
	}

	.tab-button.active {
		background: #eee;
		color: #333;
	}

	@keyframes highlight-active {
		0%, 100% { background: #eee; color: #333; }
		30%, 70% { background: #0076ff; color: white; }
	}
}