/**
 * Stay True — Marquee Title widget.
 *
 * Pure-CSS seamless horizontal scroll. The PHP renders two copies of a track
 * that already contains N repeats of the item, then the keyframe translates
 * the track by -50% so the second copy replaces the first with no visible seam.
 */

.stay-true-marquee {
	--st-marquee-duration: 20s;
	--st-marquee-gap: 40px;
	--st-marquee-mask: 0;
	--st-marquee-mask-width: 80px;

	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
}

.stay-true-marquee[style*="--st-marquee-mask: 1"],
.stay-true-marquee[data-fade="yes"] {
	-webkit-mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 var(--st-marquee-mask-width),
		#000 calc(100% - var(--st-marquee-mask-width)),
		transparent 100%
	);
	mask-image: linear-gradient(
		90deg,
		transparent 0,
		#000 var(--st-marquee-mask-width),
		#000 calc(100% - var(--st-marquee-mask-width)),
		transparent 100%
	);
}

.stay-true-marquee__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.stay-true-marquee__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--st-marquee-gap);
	width: max-content;
	flex-shrink: 0;
	animation: st-marquee-scroll var(--st-marquee-duration) linear infinite;
	will-change: transform;
}

.stay-true-marquee[data-direction="right"] .stay-true-marquee__track {
	animation-direction: reverse;
}

.stay-true-marquee[data-pause="yes"]:hover .stay-true-marquee__track {
	animation-play-state: paused;
}

.stay-true-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: var(--st-marquee-gap);
	flex-shrink: 0;
	padding-right: var(--st-marquee-gap);
	white-space: nowrap;
	line-height: 1;
}

.stay-true-marquee__title {
	display: inline-flex;
	align-items: center;
	margin: 0;
	line-height: 1;
	white-space: nowrap;
}

.stay-true-marquee__sep {
	--st-sep-translate-x: 0px;
	--st-sep-translate-y: 0px;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	line-height: 1;
	white-space: pre;
	transform: translate(var(--st-sep-translate-x), var(--st-sep-translate-y));
}

.stay-true-marquee__sep--square {
	display: inline-flex;
	align-self: center;
	width: 0.4em;
	height: 0.4em;
	background-color: currentColor;
	flex-shrink: 0;
}

.stay-true-marquee__sep svg {
	display: block;
	width: 1em;
	height: 1em;
}

@keyframes st-marquee-scroll {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.stay-true-marquee__track {
		animation: none;
		transform: none;
	}
}