/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
@import "links";

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
@import "menus";

/*--------------------------------------------------------------
## Post Navigation
--------------------------------------------------------------*/

.comment-navigation,
.posts-navigation,
.post-navigation {

	.site-main & {
		overflow: hidden;
		margin-left: auto;
		margin-right: auto;
		max-width: 1100px;
	}

	.nav-links {
		margin: 1rem auto;
		margin: 0 auto 2rem;
		max-width: $size__site-max-width;
		padding: 0 1rem;
		width: 100%;

		& > div:first-child {
			margin-bottom: 1rem;
		}
	}

	.nav-previous,
	.nav-next {
		width: 100%;
	}

	.nav-next a {

		justify-content: flex-start;

		& > svg {
			order: -1;
			margin: 0 1rem 0 0;
		}
	}

	.nav-previous a > svg {
		margin: 0 1rem 0 0;
	}

	a {
		align-items: center;
		color: $color__background-body;
		display: flex;
		font-style: italic;
	}

	a > svg {
		flex: 0 0 auto;
		height: 48px;
		width: 48px;
	}
}

@media screen and (min-width: 940px) { // 37.5em

	.comment-navigation,
	.posts-navigation,
	.post-navigation {

		.nav-links {
			align-items: center;
			display: flex;
			justify-content: space-between;
			margin: 0 $size__max-width-wide-margin 2rem auto;
			max-width: $size__site-max-width-wide;
			padding: 0 $size__horizontal-padding;

			& > div:first-child {
				margin-bottom: 0;
			}
		}

		.nav-next a {
			justify-content: flex-end;

			& > svg {
				order: inherit;
				margin: 0 0 0 1rem;
			}
		}

		.nav-previous,
		.nav-next {
			flex: 1 1 50%;
		}
	}
}
