/* =============================================================================
- Pagination
============================================================================= */
.gwel-pagination {
	margin-top: 6%;
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		li {
			width: 2.250em;
			margin: 0 0.250rem;
			svg {
				display: block;
				width: 2.000rem;
			}
			a {
				transition: color .3s ease;
			}
		}
	}
	.prev {
		display: flex;
		justify-content: flex-start;
		svg {
			transform: rotate(180deg);
		}
	}
	.next {
		display: flex;
		justify-content: flex-end;
	}

	a.prev,
	a.next {
		display: flex;
		flex-direction: row;
		align-items: center;
		.gwel-arrow-point {
			transform: translateX(-50%);
			transition: all .25s cubic-bezier(0.25, 0.8, 0.25, 1);
		}
		.gwel-arrow-line {
			transform: translateX(-100%);
			transition: all .25s cubic-bezier(0.25, 0.8, 0.25, 1);
		}
		&:hover {
			.gwel-arrow-point,
			.gwel-arrow-line {
				transform: translateX(0);
			}
		}
	}

}

/* =============================================================================
- Infinite Pagination
============================================================================= */

.gwel-infinite-pagination {
	display: none;
}

.gwel-infinite-button-wrapper {
	text-align: center;
	.gwel-infinite-button {
		margin-top: 6%;
		display: inline-block;
		vertical-align: bottom;
		cursor: pointer;
		position: relative;
		@include underline_animation;
		&.gwel-is-loading {
			animation: gwel_infinite_anim 0.4s infinite ease-in-out both;
		}
	}
}
.gwel-load-more-btn {
	padding: 18px;
	margin-top: 2.000rem;
	text-align: center;
	transition: all 0.3s ease;
	color: inherit;
	border-style: solid;
	border-width: 1px;
	display: block;
	position: relative;
	&:hover {
		color: inherit;
	}
	span {
		position: relative;
		z-index: 1;
	}
	&.loading span {
		animation: gwel_load_more_anim .6s linear infinite;
	}
	.gwel-progress-bar {
		position: absolute;
		height: 100%;
		width: 0;
		top: 0;
		left: 0;
		background-color: currentColor;
		z-index: 0;
		transition: width 1s ease;
		span {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			padding: 18px;
			white-space: nowrap;
		}
	}
	&.loading .gwel-progress-bar {
		width: 5%;
	}
}

.gwel-infinite-page-load {
	display: none; /* hidden by default */
	text-align: center;
	margin-top: 6%;
	.gwel-loader-ellips {
		position: relative;
		width: 88px;
		height: 4px;
		margin: 0 auto;
		.gwel-loader-ellips-dot {
			display: block;
			width: 24px;
			height: 2px;
			border-radius: 0.5em;
			border: 2px solid;
			position: absolute;
			animation-duration: 0.5s;
			animation-timing-function: ease;
			animation-iteration-count: infinite;
			&:nth-child(1),
			&:nth-child(2) {
				left: 0;
			}
			&:nth-child(3) {
				left: 32px;
			}
			&:nth-child(4) {
				left: 64px;
			}
			&:nth-child(2),
			&:nth-child(3) {
				animation-name: slide;
			}
		}
	}
}

// Move Up Animation
@keyframes gwel_load_more_anim {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes gwel_infinite_anim {
	0%, 100% {
		opacity: 1;
	} 50% {
		opacity: 0.3;
	}
}

@keyframes slide {
	to { transform: translateX(32px) }
}