/* FILE: main/content/__the-posts-navigation.scss */

//
// Post navigation: Previous and next post link
//





.post-navigation {
	padding-top: 2px;
	margin: 0;
	border-bottom-width: 2px;
	border-bottom-style: solid;

	.nav-previous,
	.nav-next {
		position: relative;
		background-position: 50% 50%;
		background-size: cover;
		z-index: 1;

		&::before {
			content: '';
			display: block;
			position: absolute;
			#{$left}: 0; // {{RTL}}
			top: 0;
			width: 100%;
			height: 100%;
			opacity: .85;
			z-index: -1;
			transition: all .4s;
		}

		&:hover::before {
			opacity: 1;
		}

	}

	.nav-next {
		text-align: $right; // {{RTL}}

		a {
			padding-#{$left}: 38%; // {{RTL}}
			padding-#{$right}: 8%; // {{RTL}}
		}

		.label::after {
			@include rtl_property( content, '\f429', '\f430' ); // {{RTL}}
			margin-#{$left}: .62em; // {{RTL}}
		}

	}

	.nav-previous {

		.label:before {
			@include rtl_property( content, '\f430', '\f429' ); // {{RTL}}
			margin-#{$right}: .62em; // {{RTL}}
		}

	}

	a {
		@extend %line_height_golden_minor;
		display: block;
		position: relative;
		padding: 10% 38% 4%;
		padding-#{$left}: 8%; // {{RTL}}
		margin-bottom: 2px;
		font-size: nth( map_get( $h_tags_setup, 'h2, .h2' ), 1 ) + em;
		color: inherit;
		z-index: 1;

		&:hover {
			text-decoration: none;
		}

	}

	.label {
		@extend %font_weight_300;
		display: block;
		margin-bottom: .62em;
		text-transform: uppercase;
		font-size: .5em;

		&::after,
		&::before {
			@extend %genericon;
		}

	}

}