/**
* FX Load More
*/

/* Load More Progress Bar */
.load-more {
	text-align: center;
}

.load-more__progress {
	margin-top: 15px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	height: 10px;
	border: 0;
	border-radius: 0;
	min-width: 250px;
}

.load-more__progress::-webkit-progress-bar,
.load-more__progress::-webkit-progress-value,
.load-more__progress::-moz-progress-bar,
.load-more__progress {
	height: 10px;
	border: 0;
	border-radius: 0;
}

.load-more__progress::-webkit-progress-bar,
.load-more__progress {
	background-color: #ddd;
}

.load-more__progress::-webkit-progress-value {
	background-color: var(--primary-color);
}
.load-more__progress::-moz-progress-bar {
	background-color: var(--primary-color);
}
.load-more__progress {
	background-color: var(--primary-color);
}

/* Loading Indicator */
.is-loading:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 50px;
	height: 50px;
	border: 5px solid;
	border-color: #e3e3e3 #e3e3e3 transparent;
	border-radius: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-animation: simpleSpin 1.5s linear infinite;
	animation: simpleSpin 1.5s linear infinite;
}

/* Load More Button */
.load-more__btn {
	position: relative;
	border: 0;
	display: block;
	margin: 20px auto;
	padding: 8px 48px 8px 10px;
	background-color: var(--primary-color);
	color: var(--color-white);
	border-radius: var(--radius);
	font-size: 18px;
	font-family: var(--title-font-family);
	text-transform: uppercase;
	overflow: hidden;
	z-index: 1;
	transition:
		background-color 0.3s ease-in-out,
		color 0.3s ease-in-out;
}

.load-more__btn::after {
	content: "\e908";
	font-family: var(--font-icon);
	position: absolute;
	top: 50%;
	right: 9px;
	font-size: 29px;
	font-weight: normal;
	transform: translate(0, -50%);
	z-index: 1;
}

.load-more__btn:not(.is-loading)::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 34px;
	height: 100%;
	background: var(--primary-color-dark);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 35% 50%);
	z-index: -1;
}

.load-more__btn.is-loading::after {
	display: none;
}

@media (min-width: 1200px) {
	.load-more__btn {
		font-size: 20px;
		padding: 7px 48px 7px 10px;
	}

	.load-more__btn:not(.is-disabled):hover {
		color: var(--primary-color-dark);
		background: transparent;
		box-shadow: 0 0 0 2px var(--primary-color-dark);
	}

	.load-more__btn:not(.is-disabled):hover::before {
		background: var(--color-pink-tint);
	}
}

.load-more__btn.is-loading {
	position: relative;
	opacity: 0.6;
	cursor: not-allowed;
}

.load-more__btn.is-loading:before {
	width: 20px;
	height: 20px;
}

.load-more__btn.is-disabled {
	cursor: not-allowed;
	background-color: #f0f0f0;
	display: none;
}

/* Placeholder Space */
.placeholder-block {
	position: relative;
	display: flex;
}

.placeholder-block__inner {
	flex-grow: 1;
	background-color: #fafafa;
	height: 100%;
	margin-bottom: 32px;
}

.placeholder-block.is-loading:before {
	width: 50px;
	height: 50px;
}

@-webkit-keyframes simpleSpin {
	0% {
		-webkit-transform: translate(-50%, -50%) rotateZ(0deg);
		transform: translate(-50%, -50%) rotateZ(0deg);
	}

	100% {
		-webkit-transform: translate(-50%, -50%) rotateZ(360deg);
		transform: translate(-50%, -50%) rotateZ(360deg);
	}
}

@keyframes simpleSpin {
	0% {
		-webkit-transform: translate(-50%, -50%) rotateZ(0deg);
		transform: translate(-50%, -50%) rotateZ(0deg);
	}

	100% {
		-webkit-transform: translate(-50%, -50%) rotateZ(360deg);
		transform: translate(-50%, -50%) rotateZ(360deg);
	}
}