/**
 * Bricks Nested Tabs - Mobile Scrollable Enhancement
 * Makes tab lists horizontally scrollable on mobile with full-width bleed.
 * 
 * GEBRUIK: Voeg de class 'tab-slider-mobile' toe aan het tab-menu element in Bricks
 * 
 * @package Bricks-Child
 */

@media (max-width: 767px) {
	.tab-menu[role="tablist"].tab-slider-mobile {
		/* Flexbox layout */
		display: flex;
		flex-wrap: nowrap;
		gap: var(--at-content-gap--s);
		
		/* Scroll behavior */
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-behavior: smooth;
		
		/* Scrollbar styling */
		scrollbar-width: thin;
		scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
		
		/* Full-width bleed */
		width: calc(100% + (2 * var(--at-gutter)));
		max-width: calc(100% + (2 * var(--at-gutter)));
		margin: 0 calc(-1 * var(--at-gutter));
		padding: 0 var(--at-gutter);
		
		/* Performance hint */
		contain: layout;
	}

	/* Tab items */
	.tab-menu[role="tablist"].tab-slider-mobile .tab-title {
		flex-shrink: 0;
		white-space: nowrap;
	}

	/* WebKit scrollbar styling */
	.tab-menu[role="tablist"].tab-slider-mobile::-webkit-scrollbar {
		height: 4px;
	}
	
	.tab-menu[role="tablist"].tab-slider-mobile::-webkit-scrollbar-track {
		background: transparent;
	}
	
	.tab-menu[role="tablist"].tab-slider-mobile::-webkit-scrollbar-thumb {
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 2px;
	}
}