.comment-nav-links,
.page-pagination {
	margin: -5px;
	padding: 0;
	li {
		display: inline-block;
		padding: 5px;
		list-style-type: none;
		span,
		a {
			display: block;
			width: 41px;
			height: 41px;
			border: 1px solid #eeeeee;
			border-radius: 5px;
			background: #ffffff;
			text-align: center;
			font-size: 16px;
			line-height: 40px;
			color: $text-color;
			&.current, &:hover {
				color: #ffffff;
			}
			&.dots {
				color: $text-color;
			}
			&.next, &.prev {
				font-size: 10px;
				line-height: 43px;
			}
		}
	}
}

.page-pagination {
	margin-top: 15px;
}

.comment-nav-links {
	ul {
		padding: 0;
	}
}

#comment-nav-above {
	ul {
		margin: 50px 0;
	}
}

#comment-nav-below {
	ul {
		margin: 0 0 74px;
	}
}

.page-links {
	margin: 0 -5px;
	padding-top: 40px;
	@include clearfix-after;
	> span,
	> a {
		float: left;
		margin: 5px;

		display: block;
		width: 41px;
		height: 41px;
		border: 1px solid #eeeeee;
		border-radius: 5px;
		background: #ffffff;
		text-align: center;
		font-size: 16px;
		line-height: 40px;
		color: #828796;
		&:hover {
			color: #ffffff;
		}
	}
	> span {
		color: #fff;
		background-color: $secondary-color;
		border-color: $secondary-color;
	}
}

.nav-links {
	display: flex;
	margin-bottom: 30px;
	.nav-previous,
	.nav-next {
		width: 50%;
	}
	.nav-previous {
		text-align: left;
		a {
			padding-left: 25px;
			&:after {
				left: 0;
				content: '\f104';
			}
		}
	}
	.nav-next {
		text-align: right;
		align-items: flex-end;
		a {
			padding-right: 25px;
			&:after {
				right: 0;
				content: '\f105';
			}
		}
	}
	a {
		position: relative;
		display: block;
		&:after {
			position: absolute;
			top: 50%;
			height: 10px;
			font-family: FontAwesome;
			line-height: 10px;
			transform: translate(0, -50%);
		}
	}
}