/**
 * Bunziez Score Ticker frontend styles.
 * Colors come from CSS custom properties so a host theme can override them.
 */

.bunziez-score-ticker {
	--bst-bg: #0c2530;
	--bst-fg: #a8c0c8;
	--bst-muted: #7e98a4;
	--bst-accent: #ff8b48;
	--bst-dot: #53c2cb;
	--bst-line: rgba(83, 194, 203, 0.22);
	--bst-duration: 45s;

	position: relative;
	overflow: hidden;
	max-width: 100%;
	background: var(--bst-bg);
	border-bottom: 1px solid var(--bst-line);
	color: var(--bst-fg);
}

.bunziez-score-ticker[data-bst-theme="light"] {
	--bst-bg: #faf6ef;
	--bst-fg: #3d5560;
	--bst-muted: #646e78;
	--bst-accent: #b5400c;
	--bst-dot: #187070;
	--bst-line: rgba(19, 70, 84, 0.18);
}

.bunziez-score-ticker[data-bst-theme="inherit"] {
	--bst-bg: transparent;
	--bst-fg: currentColor;
	--bst-muted: currentColor;
	--bst-accent: currentColor;
	--bst-dot: currentColor;
	--bst-line: currentColor;
}

@media (prefers-color-scheme: light) {
	.bunziez-score-ticker[data-bst-theme="auto"] {
		--bst-bg: #faf6ef;
		--bst-fg: #3d5560;
		--bst-muted: #646e78;
		--bst-accent: #b5400c;
		--bst-dot: #187070;
		--bst-line: rgba(19, 70, 84, 0.18);
	}
}

.bst__track {
	display: flex;
	width: max-content;
	gap: 3rem;
	padding: 0.65rem 1rem;
	white-space: nowrap;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	animation: bunziez-ticker-scroll var(--bst-duration, 45s) linear infinite;
}

.bunziez-score-ticker[data-bst-direction="right"] .bst__track {
	animation-direction: reverse;
}

/* Pause the scroll while a visitor hovers or tabs into the ticker, so they can
   read a score without it sliding away. */
.bunziez-score-ticker:hover .bst__track,
.bunziez-score-ticker:focus-within .bst__track {
	animation-play-state: paused;
}

.bst__clone {
	display: contents;
}

.bst__item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.bst__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--bst-dot);
}

.bst__vs {
	color: var(--bst-muted);
	font-weight: 400;
}

.bst__score {
	color: var(--bst-accent);
	font-variant-numeric: tabular-nums;
}

.bst__leader {
	font-weight: 800;
}

.bst__status {
	font-size: 0.7em;
	padding: 0.1em 0.45em;
	border-radius: 3px;
}

.bst__statusfinal {
	color: var(--bst-dot);
}

.bst__statuslive {
	color: var(--bst-bg);
	background: var(--bst-accent);
}

.bst__statussched {
	color: var(--bst-muted);
}

.bst__mark {
	text-decoration: none;
	border-bottom: 0;
	cursor: help;
}

.bst__when {
	color: var(--bst-muted);
	font-weight: 400;
}

@keyframes bunziez-ticker-scroll {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bst__track {
		animation: none;
		width: 100%;
		flex-wrap: wrap;
		white-space: normal;
	}

	.bst__clone {
		display: none;
	}
}