// Skeleton loader styles
@keyframes shimmer {
	0% {
		background-position: -468px 0;
	}
	100% {
		background-position: 468px 0;
	}
}

.rank-math-related-skeleton {
	display: grid;
	gap: 1rem;
	padding: 1rem 0;

	&.is-grid {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	}

	&.is-list {
		grid-template-columns: 1fr;
	}
}

.rank-math-related-skeleton-item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	background: #000;

	&.is-horizontal {
		flex-direction: row;
		align-items: flex-start;
	}
}

.rank-math-related-skeleton-thumb,
.rank-math-related-skeleton-title,
.rank-math-related-skeleton-title-line,
.rank-math-related-skeleton-line {
	background: linear-gradient(
		to right,
		#f0f0f0 0%,
		#e0e0e0 20%,
		#f0f0f0 40%,
		#f0f0f0 100%
	);
	background-size: 800px 100px;
	animation: shimmer 1.5s infinite linear;
	border-radius: 4px;
}

.rank-math-related-skeleton-thumb {
	width: 100%;
	height: 150px;
	flex-shrink: 0;

	.is-horizontal & {
		width: 140px;
		height: 140px;
	}
}

.rank-math-related-skeleton-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rank-math-related-skeleton-title {
	height: 20px;
	width: 80%;
}

.rank-math-related-skeleton-title-line {
	height: 20px;
	width: 60%;
}

.rank-math-related-skeleton-excerpt {
	margin-top: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.rank-math-related-skeleton-line {
	height: 14px;
	width: 100%;

	&.short {
		width: 70%;
	}
}

// Responsive adjustments
@media (max-width: 640px) {
	.rank-math-related-skeleton.is-grid {
		grid-template-columns: 1fr;
	}

	.rank-math-related-skeleton-item.is-horizontal {
		.rank-math-related-skeleton-thumb {
			width: 100px;
			height: 100px;
		}
	}
}