// ============================================================================
// :: PAGINATION
// ============================================================================
.m-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 8rem;

	padding-left: 0;

	font-family: $font-family-beausans;
	font-weight: $font-weight-bold;
	font-size: $font-size-1x-large;

	list-style-type: none;
}

// ============================================================================
// :: Elements
// ============================================================================
.m-pagination__button {

	.a-button__text {

		&::before {
			@include respond-to($screen-small-base) {
				margin: 0;
			}
		}
	}

	@include respond-to($screen-1x-small) {
		width: 3.2rem;
		height: 3.2rem;
	}

	@include respond-between($screen-1x-small, $screen-small-base) {
		width: 4.1rem;
		height: 4.1rem;
	}

	@include respond-to($screen-small-base) {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0;
		padding: 0;

		border-radius: $border-radius-round;
		background-color: $background-color-grey-light;

		cursor: pointer;
	}
}

.m-pagination__item {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 3.2rem;
	height: 3.2rem;
	margin: 0.5rem;

	border-radius: $border-radius-round;
	background-color: $background-color-grey-light;

	transition:
		transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
		background-color 0.3s ease-in-out,
		color 0.3s ease-in-out;

	cursor: pointer;

	@include respond-at($screen-1x-small) {
		width: 4.2rem;
		height: 4.2rem;
	}

	> a {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;

		text-decoration: none;

		color: $text-color;
	}

	&:hover {
		background-color: $background-color-grey-extra-dark;

		transform: scale(0.9);

		a {
			color: $text-color-white;
		}
	}

	&.is-active {
		background: $gradient-primary;

		a {
			color: $text-color-white;
		}
	}
}

// ============================================================================
// :: Modifiers
// ============================================================================
.m-pagination__button--prev {
	margin-right: 0.5rem;

	@include respond-at($screen-small-base) {
		margin-right: 3rem;
	}

	&.u-mobile-show .a-button__icon {
		margin: 0;
	}
}

.m-pagination__button--next {
	margin-left: 0.5rem;

	@include respond-at($screen-small-base) {
		margin-left: 3rem;
	}

	&.u-mobile-show .a-button__icon {
		margin: 0;
	}
}