.navigation.pagination {
	align-items: center;
	border-radius: 0;
	box-shadow: none;
	display: flex;
	justify-content: center;
	max-width: 100%;
	padding: 15px 0;
	margin-top: 25px;
	width: 100%;
}

.nav-links {
	align-items: flex-start;
	column-gap: 15px;
	display: flex;
	flex-wrap: wrap;
	flex: 0 0 auto;
	justify-content: center;
	.page-numbers.current,
	.current {
		color: $ui-foreground-primary-text-body-text;
		position: relative;
	}
	.page-numbers.next,
	.page-numbers.prev {
		display: flex;
		align-items: center;
		justify-content: space-between;
		&:hover {
			color: $ui-foreground-primary-text-body-text;
			&::before {
				color: $ui-foreground-primary-text-body-text;
			}
		}
	}
	.prev.page-numbers,
	.next.page-numbers {
		display: inline;
		vertical-align: top;
	}
	.prev.page-numbers::before,
	.next.page-numbers::before {
		@include font-heading;
		color: $ui-foreground-primary-accent-01;
		display: inline-block;
	}
	.prev.page-numbers {
		flex-direction: row-reverse;
		&::before {
			content: "Previous";
			@include media-breakpoint-down(sm) {
				content: "Prev";
			}
		}
	}
	.next.page-numbers {
		&::before {
			content: "Next";
		}
	}
	.pagination,
	.page-numbers,
	.nav-links > a,
	.page {
		@include font-heading;
		background: transparent;
		border: none;
		color: $ui-foreground-primary-text-body-text;
		display: inline-block;
		min-height: 25px;
		min-width: 25px;
		text-align: center;
		text-decoration: none;
		transition: all 0.4s ease;
		&:hover {
			text-decoration: none;
		}
		&.prev,
		&.next {
			border: none;
			font-size: 0;
			font-stretch: normal;
			font-style: normal;
			font-weight: normal;
			letter-spacing: normal;
			line-height: normal;
			margin: 0;
			padding: 0;
			position: relative;
			text-align: center;
		}
		&.prev {
			margin-right: 60px;
			@include media-breakpoint-down(sm) {
				margin-right: 20px;
			}
			&::before {
				content: "Previous";
				@include media-breakpoint-down(sm) {
					content: "Prev";
				}
			}
		}
		&.next {
			margin-left: 60px;
			@include media-breakpoint-down(sm) {
				margin-left: 20px;
			}
			&::before {
				content: "Next";
			}
		}
		&.current {
			color: $ui-foreground-primary-text-body-text;
			position: relative;
			&::after {
				content: "";
				background-color: $ui-foreground-primary-text-body-text;
				width: 11px;
				height: 2px;
				transform: translate(-50%, 0%);
				position: absolute;
				top: unset;
				left: 50%;
				bottom: 0;
			}
		}
	}
}