[data-hj]:not([data-hj-hydrated]) [data-hj-content] {
	display: none;
}

[data-hj][data-hj-hydrated] [data-hj-fallback] {
	display: none;
}

[data-hj-skeleton] {
	position: relative;

	&::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			to right,
			hsl(var(--bg-2)) 33.33%,
			hsl(var(--fg-2)) 50%,
			hsl(var(--bg-2)) 66.67%
		);
		background-size: 300% 100%;
		border-radius: var(--radius);
		border: 1px solid hsl(var(--border) / 0.5);
		animation: hj-skeleton 1s var(--ease-in-out) infinite;
	}
}

@keyframes hj-skeleton {
	from {
		background-position: 100% 50%;
	}

	to {
		background-position: 0 50%;
	}
}

[data-hj][data-hj-hydrated] [data-hj-skeleton] {
	opacity: 0;
}