.nova-pagination-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: max(.25rem, calc(.25 * var(--su)));
	margin-top: max(1.5rem, calc(3 * var(--su)));
	background-color: var(--white-100);
	width: fit-content;
	margin-inline: auto;
	padding: max(.5rem, calc(.5 * var(--su))) max(1rem, calc(1 * var(--su)));
}

.nova-pagination-nav .pagination-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(2.5rem, calc(2.5 * var(--su)));
	height: auto;
	aspect-ratio: 1;
	border: none;
	border-radius: 4px;
	background-color: transparent;
	color: var(--primary-100);
	font-size: var(--body-s-regular);
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

.nova-pagination-nav .pagination-btn:hover:not(.is-active):not(:disabled) {
	background-color: var(--neutral-30);
}

.nova-pagination-nav .pagination-btn.is-active {
	background-color: var(--primary-5);
	cursor: default;
}

.nova-pagination-nav .pagination-btn:disabled {
	color: var(--primary-30);
	cursor: default;
}

.nova-pagination-nav .pagination-btn .material-symbols-outlined {
	font-size: 1.25rem;
}

.nova-pagination-nav .pagination-ellipsis {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: max(2.5rem, calc(2.5 * var(--su)));
	height: max(2.5rem, calc(2.5 * var(--su)));
	color: var(--primary-50);
}


@media screen and (max-width: 400px) {

	.nova-pagination-nav {
		width: 100%;
	}

}