/**
 * Load More Component
 * 
 * Styles for the load more button, progress bar, and loading states
 * Used on archive pages and search pages
 */

/* Load More Container */
.load-more {
	text-align: center;
	margin-top: 64px;
}

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

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

progress::-webkit-progress-bar {
	background-color: #ddd;
}

progress::-webkit-progress-value {
	background-color: #4a4a4a;
	/* TODO: Please add a branded background color for progress bar value */
}

/* 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 {
	&:before {
		content: "";
		background-repeat: no-repeat;
		background-position: center;
		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAtSURBVHgB7ZEhDgAACALR//9ZixWDziRX2Y0NAEIULHcM+SBat9xJI0U/LsQE7poUBJTrBFEAAAAASUVORK5CYII=");
	}
}

.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;
	display: none;
}

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

.placeholder-block__inner {
	flex-grow: 1;
	background-color: #0000000d;
}

.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);
	}
}