/* 
    Created on : 06.07.2016, 10:06:13
    Author     : DFD
	Styles for : Pagination
*/
/* Single item pagination */
.dfd-single-pagination {
	.page-inner-nav {
		&.empty {
			opacity: .4;
			cursor: not-allowed;
		}
	}
	&.fixed {
		&.lifted {
			.page-inner-nav {
				bottom : 30px;
			}
		}
		.page-inner-nav {
			@s: 64px;
			position: fixed;
			bottom : -64px;
			.transition(bottom .5s ease);
			z-index: 9;
			.dfd-controler {
				> i {
					.abs();
					top: 50%;
					height: 1em;
					line-height: 1;
					margin-top: -.5em;
					color: @white-color;
					z-index: 9;
					opacity: 1;
					visibility: visible;
					.transition(~"opacity .3s ease, visibility .3s ease");
				}
				> span {
					.hide();
				}
			}
			.pagination-title {
				.block();
				height: @s;
				opacity: .4;
				.transition(opacity .3s ease);
				.thumb {
					.rel();
					overflow: hidden;
					width: @s;
					height: @s;
					line-height: @s;
					text-align: center;
					.rounded(50%);
					z-index: 3;
					i {
						font-size: 12px;
					}
				}
				.dfd-content-title-big {
					font-size: 13px;
					letter-spacing: 0;
					width: 100%;
					margin-bottom: 5px;
				}
				.dfd-vertical-aligned {
					width: 200px;
					margin-top: -20px;
					opacity: 0;
					visibility: hidden;
					.transition(all .5s ease);
				}
				.dfd-content-title-big,
				.entry-meta {
					.block();
					z-index: 2;
				}
			}
			&.nav-prev,
			&.nav-next {
				.pagination-title {
					&:hover {
						opacity: 1;
						.dfd-vertical-aligned {
							margin-top: -2.5px;
							opacity: 1;
							visibility: visible;
						}
					}
				}
			}
			&.nav-prev {
				left: 30px;
				.dfd-controler {
					> i {
						left: 28px;
					}
				}
				.pagination-title {
					> span {
						float: left;
						&:last-child {
							text-align: left;
							margin-left: 15px;
						}
					}
					.dfd-vertical-aligned {
						> * {
							float: left;
						}
					}
				}
			}
			&.nav-next {
				right: 30px;
				.dfd-controler {
					> i {
						right: 28px;
					}
				}
				.pagination-title {
					> span {
						float: right;
						&:last-child {
							text-align: right;
							margin-right: 15px;
						}
					}
					.dfd-vertical-aligned {
						> * {
							float: right;
						}
					}
				}
			}
			&:hover {
				.dfd-controler {
					> i {
						opacity: 0;
						visibility: hidden;
					}
				}
			}
		}
	}
	&:not(.fixed) {
		@s: 70px;
		.rel();
		.clearfix();
		&.top {
			.transform(translateY(-@layout-margin));
			&:before {
				bottom: 0;
			}
		}
		&.bottom {
			.transform(translateY(@layout-margin));
			&:before {
				top: 0;
			}
		}
		&:before {
			content: "";
			.block();
			width: 300%;
			height: 1px;
			.abs();
			left: -100%;
			background: @border-color;
		}
		.page-inner-nav {
			width: 50%;
			height: @s;
			.dfd-controler {
				font-size: 11px;
				.block();
				height: @s;
				line-height: @s;
				font-weight: bold;
				color: #2c2b2b;
				opacity: 1;
				visibility: visible;
				.transition(all .3s ease);
				* {
					height: inherit;
					line-height: inherit;
				}
			}
			.pagination-title {
				.block();
				.abs();
				top: 0;
				height: @s;
				opacity: 0;
				visibility: hidden;
				.transition(all .3s ease);
				.thumb {
					overflow: hidden;
					width: 40px;
					height: 40px;
					line-height: 40px;
					text-align: center;
					margin: 15px 0;
					.rounded(50%);
				}
				.dfd-content-title-big {
					font-size: 13px;
					letter-spacing: 0;
					width: 100%;
					margin-bottom: 5px;
				}
				.dfd-content-title-big,
				.entry-meta {
				}
			}
			&:hover {
				&:not(.empty) {
					.dfd-controler {
						opacity: 0;
						visibility: hidden;
					}
					.pagination-title {
						opacity: 1;
						visibility: visible;
					}
					&.nav-prev {
						.dfd-controler {
							.transform(translateX(-50px));
						}
						.pagination-title {
							.transform(translateX(0));
						}
					}
					&.nav-next {
						.dfd-controler {
							.transform(translateX(50px));
						}
						.pagination-title {
							.transform(translateX(0));
						}
					}
				}
			}
			&.nav-prev {
				float: left;
				.dfd-controler {
					.transform(translateX(0));
					> * {
						float: left;
					}
					i {
						margin-right: 10px;
					}
				}
				.pagination-title {
					left: 0;
					.transform(translateX(50px));
					> span {
						float: left;
						text-align: left;
						&:last-child {
							margin-left: 20px;
							> * {
								float: left;
							}
						}
					}
				}
			}
			&.nav-next {
				float: right;
				.dfd-controler {
					.transform(translateX(0));
					> * {
						float: right;
					}
					i {
						margin-left: 10px;
					}
				}
				.pagination-title {
					right: 0;
					.transform(translateX(-50px));
					> span {
						float: right;
						text-align: right;
						&:last-child {
							margin-right: 20px;
							> * {
								float: right;
							}
						}
					}
				}
			}
		}
		.dfd-blog-page-icon {
			.block();
			width: @s;
			height: @s;
			.abs();
			top: 0;
			left: 50%;
			margin-left: -@s / 2;
			border-left: 1px solid @border-color;
			border-right: 1px solid @border-color;
			> span {
				.block();
				width: 2px;
				height: 2px;
				.abs();
				top: 50%;
				left: 50%;
				margin-top: -1px;
				margin-left: -1px;
				background: #363636;
				.box-shadow(~"0 -4px 0 0 #363636, 0 4px 0 0 #363636");
				&:first-child {
					margin-left: -5px;
				}
				&:last-child {
					margin-left: 3px;
				}
			}
		}
	}
}

/* Single item pagination */
.dfd-single-inside-paginated-wrap {
	text-align: center;
	margin-top: 50px;
	.dfd-single-nav-links {
		.clearfix();
		.inline-block();
		line-height: .5;
		> * {
			float: left;
			height: 43px;
			line-height: 43px;
			padding: 0 18px;
			background: transparent;
			.rounded(50%);
			.box-shadow(0 5px 15px 0 transparent);
			.transform(perspective(0px) scale(1));
			.transition(all .3s ease);
			&:hover {
				background: @white-color;
				.transform(perspective(1200px) scale(1.05));
				.box-shadow(0 10px 25px 0 fade(@black-color , 20%));
			}
		}
		> span {
			opacity: .4;
		}
	}
}

/* Loop pagination */
.page-nav {
	margin-top: 50px;
	h2.screen-reader-text {
		.hide();
	}
	.dfd-pagination {
		.rel();
		.inline-block();
		.clearfix();
		* {
			font: inherit;
			text-transform: inherit;
			letter-spacing: inherit;
			line-height: inherit;
			color: inherit;
		}
		.dfd-prev-page,
		.dfd-next-page {
			float: left;
			> i, > span {
				opacity: .4;
			}
			* {
				.block();
				float: left;
			}
			i {
				font-size: 10px;
			}
		}
		.dfd-prev-page {
			* {
				float: right;
			}
		}
		.dfd-next-page {
			* {
				float: left;
			}
		}
		ul {
			float: left;
			margin: 0;
			> li {
				float: left;
				text-align: center;
				> * {
					.block();
					padding: 0 18px;
				}
				span {
					opacity: .4;
				}
			}
		}
		&:not(.dfd-pagination-style-5) {
			.dfd-prev-page,
			.dfd-next-page {
				.abs();
				top: 0;
				padding: 0 10px;
				width: 120px;
				span {
					width: 0;
					overflow: hidden;
					.transition(width .3s ease);
				}
				&:hover {
					span {
						width: 50px;
					}
				}
			}
			.dfd-prev-page {
				right: 100%;
			}
			.dfd-next-page {
				left: 100%;
			}
		}
		&.dfd-pagination-style-1 {
			.dfd-prev-page,
			.dfd-next-page {
				> a {
					border: 1px solid transparent;
					padding: 0;
					.rounded(43px);
					.transition(~"padding .3s ease, border-color .3s ease");
					&:hover {
						padding: 0 15px;
						border-color: @border-color;
					}
				}
			}
			ul {
				> li {
					background: transparent;
					.rounded(50%);
					.box-shadow(0 5px 15px 0 transparent);
					.transform(perspective(0px) scale(1));
					.transition(all .3s ease);
					&:hover {
						background: @white-color;
						.transform(perspective(1200px) scale(1.05));
						.box-shadow(0 10px 25px 0 fade(@black-color , 20%));
					}
				}
			}
		}
		&.dfd-pagination-style-2 {
			ul {
				> li {
					border: 1px solid transparent;
					.rounded(50%);
					.transition(border-color .3s ease);
					&:hover {
						border-color: @border-color;
					}
				}
			}
		}
		&.dfd-pagination-style-3,
		&.dfd-pagination-style-4 {
			.dfd-prev-page,
			.dfd-next-page {
				overflow: hidden;
				white-space: nowrap;
				width: 43px;
				height: 45px;
				padding: 0 15px;
				border-top: 1px solid @border-color;
				border-bottom: 1px solid @border-color;
				.transition(width .3s ease);
				&:hover {
					width: 100px;
				}
			}
			.dfd-prev-page {
				border-left: 1px solid @border-color;
				.rounded-top-left(6px);
				.rounded-bottom-left(6px);
			}
			.dfd-next-page {
				border-right: 1px solid @border-color;
				.rounded-top-right(6px);
				.rounded-bottom-right(6px);
			}
			ul {
				> li {
					> * {
						background: transparent;
						border-top: 1px solid @border-color;
						border-bottom: 1px solid @border-color;
						border-left: 1px solid @border-color;
						.transition(~"color .3s ease, background .3s ease, border-color .3s ease");
						&:hover {
							color: #2c2c2c;
							background: #ececec;
							border-color: #ececec;
						}
					}
					&:last-child {
						> * {
							border-right: 1px solid @border-color;
						}
					}
					span {
						color: #bdbdbd;
						background: #2e2e2e;
						border-color: #2e2e2e;
						opacity: 1;
					}
				}
			}
		}
		&.dfd-pagination-style-4 {
			.dfd-prev-page,
			.dfd-next-page {
				border-left: 1px solid @border-color;
				border-right: 1px solid @border-color;
				.rounded(6px);
			}
			.dfd-prev-page {
				margin-right: 5px;
			}
			.dfd-next-page {
				margin-left: 5px;
			}
			ul {
				> li {
					&:first-child {
						> * {
							.rounded-top-left(6px);
							.rounded-bottom-left(6px);
						}
					}
					&:last-child {
						> * {
							.rounded-top-right(6px);
							.rounded-bottom-right(6px);
						}
					}
					/*
					span {
						.rounded(6px);
					}
					*/
				}
			}
		}
		&.dfd-pagination-style-5 {
			border: 1px solid @border-color;
			.rounded(6px);
			.dfd-prev-page,
			.dfd-next-page {
				background: transparent;
				.transition(background .3s ease);
				&:hover {
					background: #ebebeb;
				}
				i {
					padding: 0 10px;
				}
			}
			.dfd-prev-page {
				padding-left: 20px;
				padding-right: 75px;
				border-right: 1px solid @border-color;
				> a {
					.rel();
					&:before {
						content: "";
						.block();
						.abs();
						top: 0;
						bottom: 0;
						left: -20px;
						right: -75px;
					}
				}
			}
			.dfd-next-page {
				padding-left: 75px;
				padding-right: 20px;
				> a {
					.rel();
					&:before {
						content: "";
						.block();
						.abs();
						top: 0;
						bottom: 0;
						left: -75px;
						right: -20px;
					}
				}
			}
		}
		&.ajax-pagination {
			#ajax-pagination-load-more {
				.rel();
				height: 37px;
				line-height: 37px;
				padding: 0 45px 0 30px;
				background: transparent;
				border: none;
				.rounded(20px);
				.box-shadow(0px 15px 50px 0px transparent);
				.transition(~"background .4s ease, box-shadow .4s ease, color .4s ease");
				i {
					.abs();
					width: 11px;
					height: 11px;
					line-height: 1;
					right: 25px;
					top: 50%;
					margin-top: -5.5px;
					color: #c3c3c3;
					font-size: inherit;
					.translate(0; 0);
					.rotate(0);
					.transition-transform(.3s ease);
				}
				&.loading {
					i {
						-webkit-animation: loadArrow .3s infinite linear;
						-moz-animation: loadArrow .3s infinite linear;
						-o-animation: loadArrow .3s infinite linear;
						animation: loadArrow .3s infinite linear;
					}
				}
				&.last-page {
					cursor: default;
					opacity: .4;
					&:hover {
						background: transparent;
						.box-shadow(none);
					}
				}
				&:hover {
					background: @white-color;
					color: @title-color;
					.box-shadow(0px 15px 50px 0px fade(@black-color, 25%));
					i {
						.rotate(90deg);
					}
				}
			}
		}
		&.dfd-lazy-load-pop-up {
			&.default {
				width: 48px;
				height: 48px;
				padding: 10px;
				background: @white-color;
				.rounded(50%);
				> img {
					width: 28px;
					height: 28px;
				}
			}
			opacity: 0;
			visibility: hidden;
			.transition(~"opacity .3s ease, visibility .3s ease");
			&.visible {
				opacity: 1;
				visibility: visible;
			}
			&.last-page {
				width: auto;
				height: auto;
				cursor: default;
				padding: 0;
				background: transparent;
				opacity: .4;
				visibility: visible;
				> img {
					.hide();
				}
			}
		}
	}
}