/* in play Scrolling Banner — front-end styles */

.isb-wrapper {
	--isb-bg: #0b3d24;
	--isb-color: #ffffff;
	--isb-fs: 18px;
	--isb-fw: 600;
	--isb-height: 48px;
	--isb-gap: 48px;
	--isb-speed: 60;

	width: 100%;
	height: var(--isb-height);
	background: var(--isb-bg);
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
}

.isb-track {
	display: flex;
	align-items: center;
	height: 100%;
	width: max-content;
	will-change: transform;
	animation-name: isb-scroll-left;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.isb-wrapper.isb-direction-right .isb-track {
	animation-name: isb-scroll-right;
}

.isb-group {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.isb-item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	color: var(--isb-color);
	font-size: var(--isb-fs);
	font-weight: var(--isb-fw);
	line-height: 1.2;
	font-family: inherit;
}

.isb-item a {
	color: inherit;
	text-decoration: none;
}

.isb-item a:hover {
	text-decoration: underline;
}

.isb-separator {
	color: var(--isb-color);
	opacity: 0.5;
	font-size: var(--isb-fs);
	margin: 0 var(--isb-gap);
}

.isb-wrapper.isb-pause-yes:hover .isb-track {
	animation-play-state: paused;
}

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

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

/* Respect users who've asked the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
	.isb-track {
		animation: none;
	}
	.isb-wrapper {
		overflow-x: auto;
	}
}