// Component settings: Pagination
// ------------------------------------------

$c-pagination: (
	'color':			palette(neutral, 800),
	'active-color':		palette(primary),
	'border-color':		palette(border, 300),
);

// ------------------------------------------


.c-pagination {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	@include border-radius(m);
	border: 1px solid map-get($c-pagination, 'border-color');
	list-style: none;
	margin-left: 0;
	overflow: hidden;
}

.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: map-get($c-pagination, 'color');
	opacity: 0.35;
}

.c-pagination__link {
	color: map-get($c-pagination, 'color');
	text-decoration: none;
	transition: color 0.2s, background-color 0.2s;

	&:hover {
		color: scale-color(map-get($c-pagination, 'color'), $lightness: -30%);
		background: palette(neutral, 100);
	}

	.is-active > & {
		box-shadow: inset 0 0 10px -5px map-get($c-pagination, 'active-color');
		font-weight: bold;
		color: map-get($c-pagination, 'active-color');
		cursor: default;
	}
}

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

	&.is-inactive {
		color: rgba(map-get($c-pagination, 'color'), 0.4);
		background: transparent;
	}
}

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