.ticker-tape {
	--ticker-tape-bg: #ffffff;
	--ticker-tape-border: #2b6df6;
	--ticker-tape-text: #111111;
	--ticker-tape-text-alt: #2b6df6;
	--ticker-tape-height: 46px;
	--ticker-tape-font-size: 13px;
	--ticker-tape-font-weight: 700;

	box-sizing: border-box;
	width: 100%;
	background: var(--ticker-tape-bg);
	border: 2px solid var(--ticker-tape-border);
	border-radius: 6px;
	overflow: hidden;
}

.ticker-tape *,
.ticker-tape *::before,
.ticker-tape *::after {
	box-sizing: inherit;
}

.ticker-tape__viewport {
	overflow: hidden;
	width: 100%;
	height: var(--ticker-tape-height);
	display: flex;
	align-items: center;
}

.ticker-tape__track {
	display: flex;
	align-items: center;
	width: max-content;
	will-change: transform;
	animation: ticker-tape-scroll-left linear infinite;
}

.ticker-tape[data-direction="right"] .ticker-tape__track {
	animation-name: ticker-tape-scroll-right;
}

.ticker-tape[data-pause-hover="1"]:hover .ticker-tape__track {
	animation-play-state: paused;
}

.ticker-tape__list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.ticker-tape__item,
.ticker-tape__sep {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-size: var(--ticker-tape-font-size);
	font-weight: var(--ticker-tape-font-weight);
	letter-spacing: 0.02em;
	line-height: 1;
}

.ticker-tape__item {
	color: var(--ticker-tape-text);
	padding: 0 0.6em;
}

.ticker-tape__item--alt {
	color: var(--ticker-tape-text-alt);
}

.ticker-tape__item a {
	color: inherit;
	text-decoration: none;
}

.ticker-tape__item a:hover,
.ticker-tape__item a:focus {
	text-decoration: underline;
}

.ticker-tape.ticker-tape--uppercase .ticker-tape__item {
	text-transform: uppercase;
}

.ticker-tape__sep {
	color: var(--ticker-tape-text);
	opacity: 0.6;
	padding: 0 0.3em;
}

@keyframes ticker-tape-scroll-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes ticker-tape-scroll-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* Respect reduced-motion preference: show a static (non-animated) bar instead. */
@media (prefers-reduced-motion: reduce) {
	.ticker-tape__track {
		animation: none !important;
		overflow-x: auto;
	}
}
