// WordPress navigation

// Shown when navigating pages of posts (E.g. /page/2)
// Example: Older Posts Newer Posts
// Also controls the previous and next posts
.navigation.paging-navigation,
.navigation.post-navigation {
	border-top: 2px solid $light-grey;
	padding: 1rem 0 0 0;
}

// Page links. E.g. Pages 1 2 3
.page-links {
	margin-bottom: 1rem;

	a {
		display: inline-block;
		padding: 0.25rem;
		line-height: 1;
	}
}

// Post navigation.
// Shows at the bottom of a single post.
.post-navigation {

	.nav-links div {
		margin-bottom: 1rem;
	}

	a, span {
		display: block;
	}

	.meta-nav {
		color: $post-navigation-meta-nav-color;
	}

}

@media #{$screen-sm}{

	// navigation pagination
	.navigation .nav-links {
		display: flex;
	}

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

	.navigation.paging-navigation,
	.navigation.post-navigation {
		border-top: 2px solid $light-grey;
		padding: 1rem 0 0 0;

		.nav-links {
			justify-content: space-between;

			// Previous / Next links
			div {
				width: 50%;
			}
		}

	}
}
