$navigation_w: 58px;
$navigation_w_mobile: 40px;
.navigation,
.woocommerce-pagination{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: -5px;
	&:empty{
		display: none;
	}
	.page-numbers,
	.post-page-numbers{
		flex: 0 0 auto;
		margin: 5px;
		font-size: 20px;
		font-weight: 700;
		min-width: $navigation_w_mobile;
		height: $navigation_w_mobile;
		line-height: $navigation_w_mobile;
		text-align: center;
		background: transparent;
		color: $primary-color;
		@include box-shadow(0 0 0 2px $border-color3 inset);
		@include border-radius(6px);
		&.current,
		&:hover{
			background: $primary-color;
			color: $white;
			@include box-shadow(0 0 0 2px $primary-color inset);
		}
	}
	.page-numbers{
		@media(min-width: $desktop-screen){
			min-width: $navigation_w;
			height: $navigation_w;
			line-height: $navigation_w;
		}
	}
	.nav-next-icon{
		&:before{
			@include font-cmsi("\e90d");
			display: block;
			font-size: 10px;
			[dir="rtl"] &{
				@include font-cmsi("\e90c");
			}
		}
	}
	.nav-prev-icon{
		&:before{
			@include font-cmsi("\e90c");
			font-size: 10px;
			display: block;
			[dir="rtl"] &{
				@include font-cmsi("\e90d");
			}
		}
	}
	&.cms-page-links{
		justify-content: start;
	}
}
.posts-pagination:not(.ajax){
	padding-top: 50px;
}
// Single post next/preview
.cms-single-next-prev-navigation{
	.cms-single-nav-inner {
		position: relative;
		display: inline-block;
		> a{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 2;
		}
		.cms-nav-label{
			color: $primary-color;
		}
		// Hover
		&:hover{
			color: $accent-color;
			.cms-nav-icon{
				color: $white;
				background-color: $accent-color;
				@include box-shadow(0 0 0 2px $accent-color inset);
			}
		}
	}
	.cms-nav-icon{
		font-size: 12px;
		width:60px;
		height:60px;
		line-height:60px;
		text-align: center;
		display: block;
		background-color: $white;
		color: $primary-color;
		@include box-shadow(0 0 0 2px $border-color inset);
		@include border-radius(6px);
		@media (max-width: $screen-sm-max){
			width: 40px;
			height: 40px;
			line-height: 40px;
		}
	}
	.post-image{
		overflow: hidden;
		position: relative;
		.cms-post-nav-img-icon{
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			position: absolute;
			background: $accent-color;
			display: block;
			@include scale(0);
			@include opacity(0.9);
			> span{
				position: absolute;
				top: 50%;
				left: 50%;
				color: $white;
			}
		}
	}
	.cms-single-next-prev:hover{
		.post-image{
			.cms-post-nav-img-icon{
				@include scale(1);
			}
		}
	}
}