/*
 * ILM Components -- Marquee.
 *
 * ## Three presentations, one markup
 *
 *     no script        a single row that scrolls sideways
 *     script, motion   the same row, clipped, drifting toward the start edge
 *     reduced motion   the items wrapped into a static, centred group
 *
 * The first two have the same height, so starting the motion moves nothing
 * on the page. The third is chosen by a media query from the first paint, so
 * it never shifts either.
 *
 * The motion is one `transform` animation over `--ilm-marquee-distance`, the
 * width of one set of items, which behaviour-marquee.js measures. The copies
 * that make the loop seamless are the script's and carry `is-copy`.
 */

.ilm-component--interactive-marquee {
	--ilm-marquee-fade: 3rem;
	--ilm-marquee-sign: -1;

	display: block;
	position: relative;
}

/* The start edge is on the right in a right-to-left document. */
.ilm-component--interactive-marquee:dir(rtl) {
	--ilm-marquee-sign: 1;
}

.ilm-marquee__viewport {
	overflow-x: auto;
	overflow-y: hidden;

	/*
	 * No visible scrollbar, so that the row is the same height with and
	 * without the script. Without it the row still scrolls by touch,
	 * trackpad and keyboard, and focusing a link scrolls it into view.
	 */
	scrollbar-width: none;
}

.ilm-marquee__viewport::-webkit-scrollbar {
	display: none;
}

.ilm-marquee__track {
	display: flex;
	align-items: center;
	gap: var(--ilm-c-gap);
	inline-size: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ilm-marquee__item {
	flex: 0 0 auto;
	min-inline-size: 0;
}

.ilm-marquee.is-moving > .ilm-marquee__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--ilm-marquee-fade), #000 calc(100% - var(--ilm-marquee-fade)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--ilm-marquee-fade), #000 calc(100% - var(--ilm-marquee-fade)), transparent);
}

.ilm-marquee.is-moving .ilm-marquee__track {
	animation: ilm-marquee-drift var(--ilm-marquee-duration, 60s) linear infinite;
	will-change: transform;
}

/*
 * Held while the pointer is over the row or focus is inside it, and stopped
 * by the button. A link that moves while somebody aims at it, or while it
 * holds the keyboard focus, is a link nobody can use.
 */
.ilm-marquee.is-moving > .ilm-marquee__viewport:hover .ilm-marquee__track,
.ilm-marquee.is-moving > .ilm-marquee__viewport:focus-within .ilm-marquee__track,
.ilm-marquee.is-paused .ilm-marquee__track {
	animation-play-state: paused;
}

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

	to {
		transform: translateX(calc(var(--ilm-marquee-sign) * var(--ilm-marquee-distance, 0px)));
	}
}

/*
 * The pause control sits over the end edge, inside the fade, so revealing it
 * takes no space and moves nothing. It exists only while there is motion to
 * stop.
 */
.ilm-marquee__toggle {
	display: none;
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 0;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	padding: 0;
	transform: translateY(-50%);
	appearance: none;
	background-color: var(--ilm-color-bg, #fff);
	border: 1px solid var(--ilm-color-border, #d9dde3);
	border-radius: 50%;
	color: var(--ilm-color-fg, currentColor);
	cursor: pointer;
}

.ilm-marquee.is-moving > .ilm-marquee__toggle {
	display: inline-flex;
}

.ilm-marquee__toggle:hover {
	border-color: currentColor;
}

.ilm-marquee__toggle:focus-visible {
	outline: 2px solid var(--ilm-color-primary, #1d63c8);
	outline-offset: 2px;
}

/* Pause: two bars. Drawn in CSS, so they take the text colour. */
.ilm-marquee__toggle::before {
	content: "";
	inline-size: 0.625rem;
	block-size: 0.75rem;
	border-inline: 0.1875rem solid currentColor;
}

/* Paused: a play triangle, pointing toward the end edge. */
.ilm-marquee.is-paused .ilm-marquee__toggle::before {
	inline-size: 0;
	block-size: 0;
	margin-inline-start: 0.1875rem;
	border-block: 0.4375rem solid transparent;
	border-inline-start: 0.6875rem solid currentColor;
	border-inline-end: 0;
}

@media (max-width: 767.98px) {
	.ilm-component--interactive-marquee {
		--ilm-marquee-fade: 1.5rem;
	}
}

/*
 * Reduced motion: no motion at all, and a presentation that does not need
 * any. Every item is shown, wrapped and centred; there is nothing to scroll,
 * nothing to stop, and no copy.
 */
@media (prefers-reduced-motion: reduce) {
	.ilm-marquee__viewport,
	.ilm-marquee.is-moving > .ilm-marquee__viewport {
		overflow: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.ilm-marquee__track,
	.ilm-marquee.is-moving .ilm-marquee__track {
		flex-wrap: wrap;
		justify-content: center;
		inline-size: auto;
		animation: none;
	}

	/* A wrapped item is never wider than the row it wraps in. */
	.ilm-marquee__item {
		max-inline-size: 100%;
	}

	.ilm-marquee__item.is-copy,
	.ilm-marquee.is-moving > .ilm-marquee__toggle {
		display: none;
	}
}