@import "./variables-lazyload";

/*
 * Visual Portfolio Lazyload Images
 *
 * - :first-of-type is used to prevent conflicts with hover image (Pro feature)
 */

// LazyLoad image
img.vp-lazyload,
img.vp-lazyloaded,
img.vp-lazypreload,
img.vp-lazyloading {
	opacity: 0;
	transition: var(--vp-lazyload-transition-duration) opacity;
}

img.vp-lazyloaded {
	opacity: 1;
}

:is(.vp-portfolio__item-img, .vp-portfolio__thumbnail-img) {
	// Extra check for lazy loading class on the inner image
	// to make sure image will be lazy loaded by Visual Portfolio.
	&:has(img:first-of-type:is(.vp-lazyload, .vp-lazyloading, .vp-lazyloaded))::before {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		// Fixed possible bug with inaccessible links on images in the Classic style.
		pointer-events: none;
		visibility: visible;
		content: "";
		background-image: var(--vp-lazyload-images__background);
		background-size: var(--vp-lazyload-images__background-size);
		opacity: 1;
		transition: var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) opacity, var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) visibility;
	}

	&:has(img:first-of-type.vp-lazyloading)::before {
		animation: vp-lazyload-placeholder var(--vp-lazyload-images__animation-duration) ease-in-out infinite;
	}

	&:has(img:first-of-type.vp-lazyloaded)::before {
		visibility: hidden;
		opacity: 0;
	}
}

@keyframes vp-lazyload-placeholder {
	0% {
		background-position: 200% 0;
	}

	100% {
		background-position: -200% 0;
	}
}