/* Kleuren zijn per layout te overschrijven via de drie variabelen. */

.nova-pagination {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: max(.375rem, calc(.375 * var(--su)));
	width: fit-content !important;
	margin-inline: auto;
	padding: max(.75rem, calc(1 * var(--su))) max(1rem, calc(1.25 * var(--su)));
	border-radius: 999px;
	background-color: var(--pagination-bg, var(--white-100));
}

.nova-pagination .swiper-pagination-bullet {
	opacity: 1;
	margin: 0;
	width: max(.5rem, calc(.5 * var(--su)));
	height: max(.5rem, calc(.5 * var(--su)));
	border-radius: 72px;
	background-color: var(--pagination-bullet, var(--primary-10));
	transition: width 300ms ease-in-out, background-color 300ms ease-out;
}

.nova-pagination .swiper-pagination-bullet-active {
	width: max(2.5rem, calc(2.5 * var(--su)));
	background-color: var(--pagination-bullet-active, var(--accent-100));
}

/* swiper uitzetten als de paginatie niet actief is. */
.nova-pagination.swiper-pagination-lock {
	display: none;
}