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

.c-pagination {
	@include flex(center);
	list-style: none;
	margin-left: 0;
}

.c-pagination__item {
	@include flex(center);
	@include font(small, 20, 500);
	color: scale-color($c-pagination-text-color, $lightness: 65%);
}

.c-pagination__link {
	@include border-radius;
	padding: 10px;
	color: $c-pagination-text-color;
	text-decoration: none;
	transition: color 0.2s, background-color 0.2s;

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

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

.c-pagination__prev,
.c-pagination__next {
	@include flex(stretch, center);
	margin-left: 20px;
	padding: 10px;
	transition: color 0.2s;

	svg {
		width: 7px;
	}
}

a.c-pagination__prev,
a.c-pagination__next {
	color: palette(primary);
}


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

.c-pagination__item--dots {
	color: rgba(palette(text), 0.75);
	align-items: center;
	padding: 0 10px;
}