.lazy-load-container {
	position: relative;
	width: 100%;
	margin: var(--space-12) auto;
	padding: 0 var(--space-5);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.lazy-load-container.active {
	display: block;
	min-height: var(--space-16);
	padding: 0;
	margin: 0;
}

.lazy-load-container .loading {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;
}

.lazy-load-container .loading[aria-hidden="true"],
.lazy-load-container [data-lazy-inner][aria-hidden="true"] {
	opacity: 0;
}

.lazy-load-container .loading[aria-hidden="false"],
.lazy-load-container [data-lazy-inner][aria-hidden="false"] {
	opacity: 1;
}

.lazy-load-container .loading[aria-hidden],
.lazy-load-container [data-lazy-inner][aria-hidden] {
	transition: opacity 250ms ease-in-out;
}

.lazy-load-container button.click-to-show {
	font-family: var(--font-body);
	font-weight: var(--font-weight-bold, 700);
	padding: var(--space-1) var(--space-4);
	font-size: var(--text-base);
	border-radius: var(--rounded-full);
	background-color: var(--sw-button-primary-bg, var(--primary-color-700));
	color: var(--sw-button-primary-color, var(--gray-100));
	min-height: var(--space-10);
}

@media (hover: hover) {
	.lazy-load-container button.click-to-show:hover {
		background-color: var(--sw-button-primary-bg-hover, var(--primary-color-800));
		color: var(--sw-button-primary-color-hover, var(--gray-100));
	}
}