/* Skeleton placeholders while attribute strings are translated (RU/EN). */
.ab-attr-i18n {
	display: inline-block;
	vertical-align: middle;
	max-width: 100%;
	min-height: 1.25em;
	line-height: 1.25;
}

.ab-attr-i18n--loading .ab-attr-i18n__sk {
	display: inline-block;
	vertical-align: middle;
	height: 0.85em;
	min-width: 2.5rem;
	width: calc(var(--ab-sk-ch, 10) * 0.52em);
	max-width: min(100%, 18rem);
	border-radius: 0.25rem;
	background: linear-gradient(
		90deg,
		#e5e7eb 0%,
		#f3f4f6 45%,
		#e5e7eb 90%
	);
	background-size: 200% 100%;
	animation: ab-attr-shimmer 1.1s ease-in-out infinite;
}

.ab-attr-i18n--loading {
	color: transparent;
	user-select: none;
	pointer-events: none;
}

.ab-attr-i18n:not(.ab-attr-i18n--loading) {
	animation: ab-attr-fade-in 0.2s ease;
}

.ab-attr-i18n:not(.ab-attr-i18n--loading) .ab-attr-i18n__sk {
	display: none;
}

@keyframes ab-attr-fade-in {
	from {
		opacity: 0.4;
	}
	to {
		opacity: 1;
	}
}

@keyframes ab-attr-shimmer {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: -100% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ab-attr-i18n--loading .ab-attr-i18n__sk {
		animation: none;
		background: #e5e7eb;
	}

	.ab-attr-i18n:not(.ab-attr-i18n--loading) {
		animation: none;
	}
}