.pagination {
	.page-numbers {
		display: inline-block;
	    background: $color_screen;
	    font-size: $font_size_paragraph;
	    padding: 8px 14px;
	    color: $color_body;
	    @include transition(all, linear, 0.2s);
	}
	a.page-numbers {
		&:hover {
			background: $color_hover;
		}
	}
	.page-numbers.current {
		background: $color_hover;
	}
	.page-numbers.dots {
		background: transparent;
		color: $color_screen;
	}
}

.navigation {
	margin: 50px 0;
	.nav-previous {
		display: inline-block;
    	margin-left: 30px;
    	a {
    		position: relative;
    		color: $color_title;
    		transition: all linear 0.3s;
    		text-decoration: none;
    		&::before {
    			position: absolute;
			    left: -30px;
			    top: 50%;
			    -webkit-transform: translate(0, -50%);
				-moz-transform: translate(0, -50%);
			    -ms-transform: translate(0, -50%);
				-o-transform: translate(0, -50%);
				transform: translate(0, -50%);
			    font-family: "Font Awesome 5 Free";
			    font-size: $font_size_navigation_arrow;
			    font-weight: 900;
			    content: "\f30a";
			    color: $color_title;
    		}
    	}
	}
	.nav-next {
		float: right;
    	margin-right: 30px;
    	a {
    		position: relative;
    		color: $color_title;
    		transition: all linear 0.3s;
    		text-decoration: none;
    		&::after {
    			position: absolute;
			    right: -30px;
			    top: 50%;
			    -webkit-transform: translate(0, -50%);
				-moz-transform: translate(0, -50%);
			    -ms-transform: translate(0, -50%);
				-o-transform: translate(0, -50%);
				transform: translate(0, -50%);
			    font-family: "Font Awesome 5 Free";
			    font-size: $font_size_navigation_arrow;
			    font-weight: 900;
			    content: "\f30b";
			    color: $color_title;
    		}
    	}
	}
} 
.post-navigation,
.posts-navigation {
	.nav-links {
		@include flexbox(true, flex-start, "");
		.nav-previous,
		.nav-next {
			float: none;
			-webkit-flex: 1;
			-ms-flex: 1;
			flex: 1;
			a {
				color: $color_link;
				&:hover,
				&:focus {
					color: $color_link_hover;
				}
				&::after,
				&::before {
					color: $color_link;
				}
			}
		}
		.nav-next {
			display: block;
			text-align: right;
		}
	}
}

@media only screen and (max-width: 425px) {
	.navigation .nav-previous {
		margin-left: 0;
		margin-bottom: 15px;
	}
	.navigation .nav-next {
		float: none;
		margin-right: 0;
	}
	.post-navigation {
		.nav-links {
			@include flexbox(false, center, "", column);
			.nav-next,
			.nav-previous {
				text-align: center;
			}
		}
	}
}