.mtm-marquee {
	--mtm-duration: 18s;
	--mtm-start: 0px;
	--mtm-end: -100%;
	display: block;
	inline-size: 100%;
	overflow: hidden;
	white-space: nowrap;
}

.mtm-marquee,
.mtm-marquee * {
	box-sizing: border-box;
}

.mtm-marquee__viewport {
	inline-size: 100%;
	overflow: hidden;
}

.mtm-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	inline-size: max-content;
	will-change: transform;
	transform: translate3d(var(--mtm-start), 0, 0);
}

.mtm-marquee__group {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	align-items: center;
	gap: 48px;
	padding-inline-end: 48px;
}

.mtm-marquee__item {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 16px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

.mtm-marquee__text,
.mtm-marquee__separator {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	line-height: 1;
	transition: color 180ms ease, opacity 180ms ease;
}

.mtm-marquee__separator svg,
.mtm-marquee__separator img {
	display: block;
	inline-size: 1em;
	block-size: 1em;
	object-fit: contain;
}

.mtm-marquee__separator i,
.mtm-marquee__separator svg,
.mtm-marquee__separator svg * {
	transition: color 180ms ease, fill 180ms ease, stroke 180ms ease;
}

.mtm-marquee__separator svg {
	color: currentColor;
}

.mtm-marquee__separator svg[fill]:not([fill="none"]),
.mtm-marquee__separator svg [fill]:not([fill="none"]) {
	fill: currentColor;
}

.mtm-marquee__separator svg[stroke]:not([stroke="none"]),
.mtm-marquee__separator svg [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

.mtm-has-stroke .mtm-marquee__text {
	-webkit-text-stroke-style: solid;
	paint-order: stroke fill;
}

.mtm-marquee--continuous.mtm-is-ready .mtm-marquee__track {
	animation: mtm-marquee-loop var(--mtm-duration) linear infinite;
}

.mtm-marquee--pause-hover:hover .mtm-marquee__track,
.mtm-marquee.mtm-is-paused .mtm-marquee__track {
	animation-play-state: paused;
}

.mtm-marquee--scroll .mtm-marquee__track,
.mtm-marquee--hybrid .mtm-marquee__track {
	animation: none;
}

.mtm-marquee--placeholder {
	padding: 16px;
	border: 1px dashed currentColor;
	opacity: 0.7;
	white-space: normal;
}

@keyframes mtm-marquee-loop {
	from {
		transform: translate3d(var(--mtm-start), 0, 0);
	}

	to {
		transform: translate3d(var(--mtm-end), 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.mtm-marquee--continuous.mtm-is-ready .mtm-marquee__track {
		animation-play-state: paused;
	}
}