[data-role="scroller"] {
	
	&:not(.start.end) [data-role="list"] {
		justify-content: flex-start;
		will-change: scroll-position;
	}
	
	
	&:not(.msr){
		
		[data-role="list"] {			
			scroll-snap-type: x mandatory;
		}
	
		[data-direction="vertical"] [data-role="list"] {
			scroll-snap-type: y mandatory;
		}
	}
	
	[data-role="list"] {
		overflow-x: auto;
		scroll-behavior: smooth;
		flex-wrap: nowrap !important;
		will-change: scroll-position;
		
		&.instant {
			scroll-behavior:  auto;
		}

		&::-webkit-scrollbar {
			display: none;
		}
	}

	[data-direction="vertical"] [data-role="list"] {
		flex-wrap: wrap !important;
		overscroll-behavior: contain;
	}
		
	[data-role="item"] {
		scroll-snap-align: start;
	}
		
	

	&.start.end [data-role="arrows"],
	&:not(.s-active) [data-role="arrows"],
	&.tabbing [data-role="arrows"] {
		display: none !important;
	}
	
	/* comp: the parked-edge chevron prints at 30% (Figma left arrow, node 12327:5153). */
	&.start [data-action="Prev"],
	&.end [data-action="Next"] {
		opacity: 0.3;
		pointer-events: none;
	}

}

/* Scroller pager (Figma "Pagination arrows", component 12327:5152):
   chevron · "1 / N" · chevron in one 10px-gap row, everything centered. */
[data-role="arrows"] {
	gap: 0.625rem; /* Figma: itemSpacing 10 */
	pointer-events: none;

	button {
		pointer-events: auto;
	}

	button:is([data-action="Prev"], [data-action="Next"]) {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 1.5rem;  /* Figma: 24×24 chevron frame */
		height: 1.5rem;
		transition: opacity var(--g-trn-sp) var(--g-trn-tf) 0s;
	}

	/* pager chevrons dip on hover; side-arrow squares swap palette instead */
	&:not(.scrl-nav-sd) button:is([data-action="Prev"], [data-action="Next"]):is(:hover, :focus-visible) {
		opacity: 0.7;
	}

	/* attribute-driven consumers (e.g. single-video-inline) park the same way */
	button:disabled {
		opacity: 0.3;
		pointer-events: none;
	}

	button svg.icn {
		font-size: var(--sl-sa-s, 1.5rem);
		margin: 0; /* the theme LeftArrow ships a mrg_rt for inline-with-text use — not in the pager */
		transition: color var(--g-trn-sp) var(--g-trn-tf) 0s;
	}

	/* "1 / N" count — Figma: DM Sans regular 16/150%, Color Palette/txt, 2px gaps. */
	[data-role="paging"] {
		display: flex;
		align-items: center;
		gap: 0.125rem;
		font-family: var(--fnt-m);
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.5;
		color: var(--text-color);
		font-variant-numeric: tabular-nums;
	}
}