.c-pagination {
	@include border-radius(m);
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-left: 0; // reset
	list-style: none; // reset
	overflow: hidden;
	border: 1px solid palette(neutral, 900);
}


.c-pagination__item {
	display: flex;
	justify-content: center;
	align-items: center;

	// On small screens hide all items but the arrows, first page, last page and active
	@include mq($max: m){
		display: none;

		&:first-child,
		&:last-child,
		&.is-last-page,
		&.is-active {
			display: flex;
		}

		&.is-last-page {
			pointer-events: none;
		}
	}

	& + & {
		border-left: 1px solid;
		border-color: inherit;
	}
}


.c-pagination__text,
.c-pagination__link,
.c-pagination__prev,
.c-pagination__next{
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: space(6);
	min-height: space(6);
	padding: space(1);
}


.c-pagination__text {
	color: palette(neutral, 900);
	opacity: 0.35;
}


.c-pagination__link {
	color: palette(neutral, 900);
	text-decoration: none;
	transition: color 200ms, background-color 200ms;

	&:hover {
		color: palette(neutral, 1000);
		background: palette(primary, 800);
	}

	.is-active > & {
		box-shadow: inset 0 0 10px -5px palette(neutral, 900);
		font-weight: bold;
		color: white;
		cursor: default;
		background-image: url("/img/gradient-bg.svg");
		background-color: transparent !important;
		background-size: cover;
		background-position: 100% 50%;
	}
}


.c-pagination__prev,
.c-pagination__next {
	transition: background 200ms;
	transform: rotate(0.75turn);

	&.is-inactive {
		color: palette(neutral, 300);
		background: transparent;
	}
}


.c-pagination__prev {
	transform: rotate(0.25turn);
}