.sl-pagination {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

.sl-pagination-list {
	display: flex;
	align-items: stretch;
	height: 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
	border-radius: var(--sl-radius-xs);
	overflow: hidden;
}

.sl-pagination li {
	display: flex;
	margin: 0;
	padding: 0;
	border: 0;
}

.sl-pagination .sl-page {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	box-sizing: border-box;
	padding: 0.5rem 0.75rem;
	background: var(--sl-white);
	border: 1px solid transparent;
	font-family: var(--theme-font);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--sl-grey-500);
	text-decoration: none;
	transition: color 0.2s;
}

.sl-pagination a.sl-page:hover {
	color: var(--sl-grey-900);
}

.sl-pagination .sl-page.current {
	border-color: var(--sl-grey-400);
	color: var(--sl-grey-900);
}

.sl-pagination .sl-page:is(.prev, .next) {
	color: var(--sl-grey-900);
}

.sl-pagination .sl-page.is-disabled {
	color: var(--sl-grey-300);
}

/* A masked chevron, coloured by currentColor. */
.sl-pagination-icon {
	display: block;
	flex: none;
	width: 0.75rem;
	height: 0.75rem;
	background: currentColor;
	-webkit-mask: var(--sl-pagination-icon) no-repeat center / contain;
	mask: var(--sl-pagination-icon) no-repeat center / contain;
}

.sl-pagination-icon--prev {
	--sl-pagination-icon: url("../template-img/icon_chevron_left.svg");
}

.sl-pagination-icon--next {
	--sl-pagination-icon: url("../template-img/icon_chevron_right.svg");
}