.pagination,
.woocommerce-pagination {
	width: 100%;
	font-size: 16px;
	line-height: 1;
	padding: 30px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	.screen-reader-text {
		display: none;
	}
	@include min-break($break-small) {
		padding: 50px 0;
	}
	ul,
	.nav-links {
		list-style: none;
		display: block;
		text-align: center;
		margin: 0;
		li {
			display: inline-block;
			text-align: center;
		}
		.page-numbers {
			display: inline-flex;
			justify-content: center;
			align-items: center;
			line-height: 0;
			color: $black;
			font-size: 11px;
			margin: 0 3px;
			width: 32px;
			height: 32px;
			border-radius: 50%;
			vertical-align: middle;
			font-weight: 500;
			white-space: nowrap;
			background: #fff;
			&:not(.dots) {
				border: 1px solid $border;
			}
			&.current,
			&:not(.dots):hover {
				color: #fff;
				background: $accent;
				border-color: $accent;

				svg:not(.double_arrow) {
					fill: #fff;
				}
			}
			&.prev,
			&.next {
				display: inline-flex;
				align-items: center;
				position: relative;
			}
			&.dots {
				width: auto;
				background: transparent;
				color: $black;
			}
			svg {
				fill: $black;

				.rtl & {
					@include rotateY(180);
				}
			}
		}
	}
	& + .thb-preloader {
		padding: 30px 0;
		visibility: hidden;
		opacity: 0;
		@include min-break($break-small) {
			padding: 50px 0;
		}
	}
}
.thb-prevnext-row {
	flex: 1;
}
.thb-prevnext {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	svg {
		width: 10px;
		position: relative;
    top: -1px;

		@include ie11() {
			height: 18px;
			top: 1px;
		}
	}
	.nav-links {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
		width: 100%;

		.page-numbers {
			display: inline-block;
			position: relative;
			line-height: 18px;
			color: $black;
			border: 0 !important;
			width: auto;
			height: auto;
			background: none !important;
			&:not(.prev):not(.next) {
				display: none;
			}
			&:hover {
				color: $black !important;

				svg {

				}
			}
			&:after {
				content: '';
				position: absolute;
				top: 100%;
				left: 0;
				width: calc(100% - 19px);
				height: 2px;
				background: rgba(#000,0.1);
			}
			&:before {
				content: '';
				position: absolute;
				top: 100%;
				left: 0;
				width: calc(100% - 19px);
				height: 2px;
				background: $black;
				@include scale(0,1);
				@extend .mid-transition;
			}
			&:hover:before {
				@include scale(1,1);
			}
		}
		.next {
			margin-right: auto;
			svg {
				margin-right: 8px;
			}
			&:before,
			&:after {
				left: auto;
				right: 0;
				transform-origin: right center;
			}
		}
		.prev {
			margin-left: auto;
			svg {
				margin-left: 8px;
			}
			&:before {
				transform-origin: left center;
			}
		}
	}

}
.archive-pagination-container + .thb-preloader {
	visibility: hidden;
	opacity: 0;
}