ul.page-numbers {
	list-style: none;
	text-align: center;
	padding: 0;
	margin: 0;
	li {
		margin: 0;
		display: inline-block;
		vertical-align: top;
	}
}

.page-numbers:not(ul) {
	font-size: 16px;
	color: var(--g5-color-heading);
	font-weight: 600;
	display: inline-block;
	@include transition(all .3s);
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	@include border-radius(50%);
	&.current,
	&:hover {
		color: var(--g5-color-primary);
		background-color: #F5F5F5;
	}

	&.prev,
	&.next {
		font-size: 0;
		&:before {
			font-family: var(--g5-font-icon-primary);
			font-size: 18px;
			font-weight: 400;
			display: inline-block;
			content: '\efb9';

		}
	}

	&.next {
		&:before {
			content: '\efba';
		}
	}
}

.post-navigation {
	margin-top: 30px;
	.nav-links {
		@include d-flex;
		a {
			@include d-flex;
			@include align-items-center();
			text-decoration: none;
			color: inherit;
		}

		.nav-subtitle {
			color: var(--g5-color-muted);
			display: block;
			font-size: 13px;
			text-transform: uppercase;
			letter-spacing: 0.1em;
			font-weight: 600;
		}
		.nav-title {
			display: block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			color: var(--g5-color-heading);
			font-weight: 600;
			margin-top: 3px;
		}

		> div {
			width: 47.5%;
		}

		.nav-content {
			@include flex-fill();
		}
		i {
			font-size: 16px;
			font-weight: 400;
			color: var(--g5-color-muted);
		}
	}

	.nav-previous {
		margin-right: auto;
		i {
			margin-right: 15px;
		}
	}

	.nav-next {
		margin-left: auto;
		text-align: right;
		i {
			margin-left: 15px;
		}
	}

	@include media-sm() {
		.nav-links .nav-title {
			display: none;
		}
	}

}



.page-links {
	float: left;
	width: 100%;
	.page-links-title {
		font-weight: 600;
		margin: 0 15px 0 0;
		color: var(--g5-color-heading);
	}

	> .post-page-numbers {
		display: inline-block;
		margin-right: 0.25rem;
		border: solid 1px;
		border-color: var(--g5-color-border);
		font-weight: 500;
		color: inherit;
		width: 40px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		@include transition(all .3s);
		&:hover,
		&.current {
			background-color: var(--g5-color-accent);
			border-color: var(--g5-color-accent);
			color: var(--g5-color-accent-foreground);
		}
	}
}