.tooto-marquee {
	--tooto-marquee-gap: 24px;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	overflow: auto;
	overscroll-behavior-x: contain;
	touch-action: pan-y;
}

.tooto-marquee > .tooto-marquee__track {
	align-items: center;
	gap: var(--tooto-marquee-gap);
}

.tooto-marquee > .tooto-marquee__track > .tooto-marquee__item {
	width: max-content;
	height: auto;
	flex: 0 0 auto;
	box-sizing: border-box;
}

/* A native container can override --width through its own responsive controls. */
.tooto-marquee__item > .e-con {
	--width: max-content;
}

.tooto-marquee[data-tooto-marquee-ready] {
	overflow: hidden;
}

.tooto-marquee[data-tooto-marquee-ready] > .tooto-marquee__track {
	gap: 0;
	transition-duration: 0s;
}

.tooto-marquee:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.tooto-marquee[data-tooto-marquee-editor] {
	overflow-x: auto;
	touch-action: auto;
}

.tooto-marquee[data-tooto-marquee-editor] > .tooto-marquee__track > .tooto-marquee__item:empty {
	min-width: 180px;
	min-height: 100px;
}