/**
 * ループ（marquee.js）。data-ui="marquee" の段の中の track（.marquee__track）を横に1列に並べる。
 * 動かないとき（JS なし・reduced-motion）は横スクロールで全件に届くようにし、スクロールバーは細く出す（マウスでも動かせるように）。
 * data-state="loop" のときだけはみ出しを切り、JS が track を transform で流す。
 * clip にするのは、画面の外のリンクにフォーカスが入ったときにブラウザが段をスクロールして、JS の位置とずれないようにするため。
 */

.marquee {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--line-grey) transparent;
}

.marquee[data-state="loop"] {
	overflow: clip;
}

.marquee .marquee__track {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
}

.marquee[data-state="loop"] .marquee__track {
	will-change: transform;
}