.pagination,
ul.pagenavi-box {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	list-style-type: none;
	padding: 0;
}

.page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 14px;
	font-weight: 600;
	color: inherit;
	box-shadow: inset 0 0 0 1px var(--comet-100);
	border-radius: 12px;
	transition: box-shadow ease .1s;
}

.page-numbers.next,
.page-numbers.prev,
.page-numbers.dots {
	box-shadow: none;
}

.page-numbers:not(.dots):hover {
	box-shadow: inset 0 0 0 2px var(--azure-radiance-500);
}

.page-numbers svg {
	width: 1em;
	height: 1em;
	font-size: 20px;
}

.page-numbers.next svg {
	transform: rotate(-90deg)
}

.page-numbers.prev svg {
	transform: rotate(90deg)
}

.page-numbers.current {
	background-color: var(--comet-100);
	box-shadow: inherit;
}