$c-pagination-text-color: rgba(palette(neutral, 700), 0.5);

.c-pagination {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 list-style: none;
	 margin-left: 0;
 }

.c-pagination__item {
	display: flex;
	justify-content: center;
	align-items: center;
	@include font-size(base);
	@include font-weight(medium);
	color: scale-color($c-pagination-text-color, $lightness: 65%);
}

.c-pagination__link {
	@include border-radius;
	padding: space(1);
	color: $c-pagination-text-color;
	text-decoration: none;
	transition: color 0.2s, background-color 0.2s;

	&:link:hover {
		color: palette(neutral, 700);
		background: palette(neutral);
	}

	&.is-active {
		font-weight: bold;
		color: palette(action);
		cursor: default;
	}
}

.c-pagination__prev,
.c-pagination__next {
	display: flex;
	justify-content: center;
	margin-left: space(2);
	padding: space(1);
	transition: color 0.2s;
}

.c-pagination__prev {
	transform: rotate(0.5turn);
	margin-left: 0;
	margin-right: space(2);
}