/**
 * SC Market Data — Market Ticker styles.
 *
 * One dark bar, BEM classes on Bricks elements. Everything that a theme is
 * likely to want to change is a custom property on `.market-ticker`; override
 * them in Bricks' custom CSS or a theme stylesheet:
 *
 *   .market-ticker { --market-ticker-bg: #000; --market-ticker-up: #3fb950; }
 *
 * Descendant rules are scoped under `.market-ticker` so they win over Bricks'
 * defaults for blocks and containers (which are flex columns at 100% width)
 * regardless of stylesheet order.
 *
 * Markup (see .docs/bricks/ticker.md):
 *   .market-ticker[.market-ticker--stale]
 *     .market-ticker__meta   > .market-ticker__label, .market-ticker__updated
 *     .market-ticker__total  > .market-ticker__symbol, .market-ticker__value, .market-ticker__change, .market-ticker__window
 *     .market-ticker__scroller > .market-ticker__coins > .market-ticker__coin* (Bricks API Query Loop)
 *       .market-ticker__coin > .market-ticker__symbol, .market-ticker__value, .market-ticker__change
 *     .market-ticker__source
 *
 * Direction colour and the arrow glyph key on data-direction="up|down",
 * which Bricks sets at render time and sc-live.js re-sets on every poll.
 * The BEM modifiers .market-ticker__change--up/--down do the same thing
 * statically for editors who prefer classes.
 */

.market-ticker {
	/* Theme hooks. */
	--market-ticker-bg: #0f1216;
	--market-ticker-fg: #f5f7fa;
	--market-ticker-muted: rgba(245, 247, 250, 0.62);
	--market-ticker-up: #3fb950;
	--market-ticker-down: #f26d6d;
	--market-ticker-separator: rgba(245, 247, 250, 0.14);
	--market-ticker-gap: 1.25rem;
	--market-ticker-font-size: 0.8125rem;
	--market-ticker-font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--market-ticker-label-color: #fff;
	--market-ticker-padding: 0.55rem 1rem;
	/* Marquee speed in CSS pixels per second; the track width is set by JS. */
	--market-ticker-speed: 55;

	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--market-ticker-gap);
	width: 100%;
	padding: var(--market-ticker-padding);
	background: var(--market-ticker-bg);
	color: var(--market-ticker-fg);
	font-family: var(--market-ticker-font-family);
	font-size: var(--market-ticker-font-size);
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

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

/* ---------------------------------------------------------------------------
 * Cells
 * ------------------------------------------------------------------------ */

.market-ticker .market-ticker__meta,
.market-ticker .market-ticker__total,
.market-ticker .market-ticker__coin {
	display: flex;
	flex-direction: row;
	flex: 0 0 auto;
	align-items: baseline;
	gap: 0.4em;
	width: auto;
	margin: 0;
}

.market-ticker .market-ticker__meta {
	padding-inline-end: var(--market-ticker-gap);
	border-inline-end: 1px solid var(--market-ticker-separator);
}

/* "MARKET DATA · LAST UPDATED" with a small square bullet in front (client spec). */
.market-ticker .market-ticker__label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	color: var(--market-ticker-label-color);
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0.28px;
	text-transform: uppercase;
}

.market-ticker .market-ticker__label::before {
	content: "";
	display: block;
	width: 0.4em;
	height: 0.45em;
	flex-shrink: 0;
	margin-bottom: 0.1em;
	background: currentColor;
}

.market-ticker .market-ticker__updated {
	margin: 0;
	color: var(--market-ticker-muted);
	font-size: 0.85em;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.market-ticker .market-ticker__symbol {
	margin: 0;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.market-ticker .market-ticker__value {
	margin: 0;
	font-weight: 500;
}

.market-ticker .market-ticker__window {
	margin: 0;
	color: var(--market-ticker-muted);
	font-size: 0.85em;
	text-transform: uppercase;
}

.market-ticker .market-ticker__source {
	flex: 0 0 auto;
	margin: 0 0 0 auto;
	color: var(--market-ticker-muted);
	font-size: 0.8em;
}

/* ---------------------------------------------------------------------------
 * Change figure: colour + arrow glyph keyed on data-direction
 * ------------------------------------------------------------------------ */

.market-ticker .market-ticker__change {
	display: inline-flex;
	align-items: baseline;
	gap: 0.15em;
	margin: 0;
	font-weight: 600;
	color: var(--market-ticker-up);
}

.market-ticker .market-ticker__change::before {
	content: "\25B2"; /* ▲ */
	font-size: 0.7em;
	line-height: 1;
}

.market-ticker .market-ticker__change[data-direction="down"],
.market-ticker .market-ticker__change--down {
	color: var(--market-ticker-down);
}

.market-ticker .market-ticker__change[data-direction="down"]::before,
.market-ticker .market-ticker__change--down::before {
	content: "\25BC"; /* ▼ */
}

.market-ticker .market-ticker__change[data-direction="up"],
.market-ticker .market-ticker__change--up {
	color: var(--market-ticker-up);
}

.market-ticker .market-ticker__change[data-direction="up"]::before,
.market-ticker .market-ticker__change--up::before {
	content: "\25B2";
}

/*
 * Editors who prefer Bricks Icon elements (shown/hidden with a Condition on
 * {echo:sc_total_direction}) put them in a .market-ticker__arrow element and
 * either place it inside the change element or add the --no-glyph modifier.
 * Either way the CSS glyph is suppressed so the arrow is not doubled.
 */
.market-ticker .market-ticker__change:has(.market-ticker__arrow)::before,
.market-ticker .market-ticker__change--no-glyph::before {
	content: none;
}

.market-ticker .market-ticker__arrow {
	display: inline-flex;
	align-items: center;
	margin: 0;
	font-size: 0.7em;
	line-height: 1;
}

.market-ticker .market-ticker__arrow--up {
	color: var(--market-ticker-up);
}

.market-ticker .market-ticker__arrow--down {
	color: var(--market-ticker-down);
}

/* ---------------------------------------------------------------------------
 * Coin row
 *
 * .market-ticker__scroller clips; .market-ticker__coins is the track. Without
 * JS the scroller is a plain horizontal scroll area with the scrollbar hidden.
 * ------------------------------------------------------------------------ */

.market-ticker .market-ticker__scroller {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	margin: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.market-ticker .market-ticker__scroller::-webkit-scrollbar {
	display: none;
}

.market-ticker .market-ticker__coins {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: baseline;
	gap: 0;
	width: max-content;
	min-width: 100%;
	margin: 0;
}

/* Separator between coins is a leading border on each coin so a cloned track
   continues the pattern seamlessly. */
.market-ticker .market-ticker__coin {
	padding-inline: var(--market-ticker-gap);
	border-inline-start: 1px solid var(--market-ticker-separator);
}

.market-ticker .market-ticker__coin:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}

.market-ticker .market-ticker__coin:last-child {
	padding-inline-end: 0;
}

/* ---------------------------------------------------------------------------
 * Marquee (class added by sc-live.js when the coin row is wider than the bar,
 * at any viewport width unless configured otherwise, and the visitor has not
 * asked for reduced motion)
 * ------------------------------------------------------------------------ */

@keyframes sc-marquee {
	from {
		transform: translateX(0);
	}

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

.market-ticker--marquee .market-ticker__scroller {
	overflow: hidden;
}

.market-ticker--marquee .market-ticker__coins {
	min-width: 0;
	animation-name: sc-marquee;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	/* Track width (unitless px) is measured by JS, so speed is constant however many coins are tracked. */
	animation-duration: calc(var(--market-ticker-track-width, 1200) / var(--market-ticker-speed, 55) * 1s);
	will-change: transform;
}

/* In marquee mode every coin, including the first of each copy, carries the
   separator so the join between the original row and its clone is invisible. */
.market-ticker--marquee .market-ticker__coin:first-child,
.market-ticker--marquee .market-ticker__coin:last-child {
	padding-inline: var(--market-ticker-gap);
	border-inline-start: 1px solid var(--market-ticker-separator);
}

.market-ticker--marquee:hover .market-ticker__coins,
.market-ticker--marquee:focus-within .market-ticker__coins {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.market-ticker .market-ticker__coins,
	.market-ticker--marquee .market-ticker__coins {
		animation: none !important;
	}

	.market-ticker--marquee .market-ticker__scroller {
		overflow-x: auto;
	}

	/* With no animation the row must show that it scrolls. */
	.market-ticker .market-ticker__scroller {
		scrollbar-width: thin;
	}

	.market-ticker .market-ticker__scroller::-webkit-scrollbar {
		display: block;
		height: 4px;
	}
}

/* ---------------------------------------------------------------------------
 * Stale state (.market-ticker--stale set by {echo:sc_stale_class} at render
 * time and toggled by sc-live.js via data-sc-stale)
 * ------------------------------------------------------------------------ */

.market-ticker--stale {
	filter: saturate(0.55);
}

.market-ticker--stale .market-ticker__updated {
	opacity: 0.7;
}

.market-ticker--stale .market-ticker__updated::after {
	content: " \00B7 delayed";
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
 * Narrow screens: meta and total on the first line, coins on their own line
 * (where they may marquee), credit last.
 * ------------------------------------------------------------------------ */

@media (max-width: 768px) {
	.market-ticker {
		flex-wrap: wrap;
		row-gap: 0.45rem;
	}

	.market-ticker .market-ticker__scroller {
		flex-basis: 100%;
		order: 10;
	}

	.market-ticker .market-ticker__source {
		flex-basis: 100%;
		order: 20;
		margin-inline-start: 0;
	}
}