.a-flash-post-focus-loader {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	width: var(--a-flash-post-focus-width, 58px);
	height: var(--a-flash-post-focus-height, 44px);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.a-flash-post-focus-loader::before {
	position: absolute;
	content: '';
	inset: 0;
	background:
		linear-gradient(#fff, #fff) left top / var(--a-flash-post-focus-horizontal, 17px) var(--a-flash-post-focus-stroke, 2px) no-repeat,
		linear-gradient(#fff, #fff) left top / var(--a-flash-post-focus-stroke, 2px) var(--a-flash-post-focus-vertical, 15px) no-repeat,
		linear-gradient(#fff, #fff) right top / var(--a-flash-post-focus-horizontal, 17px) var(--a-flash-post-focus-stroke, 2px) no-repeat,
		linear-gradient(#fff, #fff) right top / var(--a-flash-post-focus-stroke, 2px) var(--a-flash-post-focus-vertical, 15px) no-repeat,
		linear-gradient(#fff, #fff) left bottom / var(--a-flash-post-focus-horizontal, 17px) var(--a-flash-post-focus-stroke, 2px) no-repeat,
		linear-gradient(#fff, #fff) left bottom / var(--a-flash-post-focus-stroke, 2px) var(--a-flash-post-focus-vertical, 15px) no-repeat,
		linear-gradient(#fff, #fff) right bottom / var(--a-flash-post-focus-horizontal, 17px) var(--a-flash-post-focus-stroke, 2px) no-repeat,
		linear-gradient(#fff, #fff) right bottom / var(--a-flash-post-focus-stroke, 2px) var(--a-flash-post-focus-vertical, 15px) no-repeat;
	animation: a-flash-post-focus-lock 1s ease-in-out infinite;
}

.a-flash-post-focus-loader[hidden] { display: none; }

.a-flash-post-gallery-lightbox .a-flash-post-focus-loader {
	--a-flash-post-focus-width: 88px;
	--a-flash-post-focus-height: 68px;
	--a-flash-post-focus-horizontal: 27px;
	--a-flash-post-focus-vertical: 24px;
	--a-flash-post-focus-stroke: 4px;
	--a-flash-post-focus-min-opacity: .65;
}

.a-flash-post-lazy-frame { position: relative; }
.a-flash-post-lazy-frame.is-loaded > .a-flash-post-focus-loader,
.a-flash-post-lazy-frame.is-error > .a-flash-post-focus-loader,
.a-flash-post-gallery__image.is-loaded > .a-flash-post-focus-loader,
.a-flash-post-gallery__image.is-error > .a-flash-post-focus-loader,
.a-flash-compare.is-loaded > .a-flash-post-focus-loader,
.a-flash-compare.is-error > .a-flash-post-focus-loader { display: none; }

@keyframes a-flash-post-focus-lock {
	0%, 100% { opacity: var(--a-flash-post-focus-min-opacity, .45); transform: scale(1.12); }
	50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.a-flash-post-focus-loader::before { animation: none; }
}
