/* Doorlopende ticker; kleur, maat en marges komen uit de bestaande paginastijlen. */
.mainSite .tickerHolder[data-ticker] {
	--ticker-distance: 0px;
	--ticker-duration: 120s;
	display: block;
	animation: none;
}

.mainSite [data-ticker] .ticker__track {
	position: absolute;
	top: 50%;
	left: 0;
	display: flex;
	width: max-content;
	transform: translateY(-50%);
}

.mainSite [data-ticker] .ticker__sequence {
	display: flex;
	flex: 0 0 auto;
	white-space: nowrap;
}

.mainSite [data-ticker] .ticker__sequence span {
	padding-right: 1rem;
}

.mainSite [data-ticker] .ticker__sequence span::after {
	content: "·";
	padding-left: 1rem;
}

.mainSite [data-ticker][data-ticker-ready] .ticker__track {
	animation: tickerScroll var(--ticker-duration) linear infinite;
}

.mainSite [data-ticker]:hover .ticker__track {
	animation-play-state: paused;
}

@keyframes tickerScroll {
	from { transform: translate(0, -50%); }
	to { transform: translate(calc(-1 * var(--ticker-distance)), -50%); }
}

/* Beheermodal, ook buiten .mainSite. */
.tickerAdmin {
	--ticker-admin-gap: 1rem;
}

.tickerAdmin__rows {
	display: grid;
	gap: var(--ticker-admin-gap);
}

.tickerAdmin__row {
	min-width: 0;
	padding: var(--ticker-admin-gap);
	border: 1px solid var(--bs-border-color, #dee2e6);
	border-radius: .5rem;
}

.tickerAdmin textarea {
	resize: vertical;
}

.tickerAdmin__actions,
.tickerAdmin__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: var(--ticker-admin-gap);
}

.tickerAdmin .btn {
	min-height: 2.75rem;
	min-width: 2.75rem;
	transition: color .3s ease-in-out, background-color .3s ease-in-out;
}

.tickerAdmin .btn:focus-visible {
	outline: 2px solid var(--bs-primary, #0d6efd);
	outline-offset: 2px;
}

.tickerAdmin .btn:disabled {
	opacity: .5;
}

@media (min-width: 576px) {
	.tickerAdmin__footer button[type="submit"] {
		margin-left: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mainSite .tickerHolder[data-ticker] {
		height: auto;
		min-height: 55px;
		white-space: normal;
	}
	.mainSite [data-ticker] .ticker__track {
		position: static;
		width: auto;
		transform: none;
	}
	.mainSite [data-ticker][data-ticker-ready] .ticker__track {
		animation: none;
	}
	.mainSite [data-ticker] .ticker__sequence {
		flex: 1;
		flex-wrap: wrap;
		white-space: normal;
		overflow-wrap: anywhere;
		padding: 0 1rem;
	}
	.mainSite [data-ticker] [data-ticker-copy] {
		display: none;
	}
	/* Ook een lange stilstaande ticker blijft boven de swiperinhoud in de normale flow. */
	.mainSite .pageBreakSwiperElement:has([data-ticker]) {
		flex-direction: column;
		align-items: stretch;
	}
	.mainSite .pageBreakSwiperElement:has([data-ticker]) .pageBreakSwiperUspTicker {
		position: relative;
		flex-shrink: 0;
	}
	.mainSite .pageBreakSwiperElement:has([data-ticker]) .pageBreakSwiperContent {
		margin-top: auto;
	}
	.tickerAdmin .btn {
		transition: none;
	}
}