<script lang="ts">
	export let count = 3;
</script>

{#each Array(count) as _, i}
	<div class="card card-small">
		<div class="skeleton-container">
			<div class="skeleton" />
		</div>
	</div>

	{#if i < count - 1}
		<p />
	{/if}
{/each}

<style>
	@keyframes progress {
		0% {
			background-position: -200px 0;
		}
		100% {
			background-position: calc(200px + 100%) 0;
		}
	}

	.skeleton-container {
		animation: progress 1.2s ease-in-out infinite;
		background-color: var(--base001);
		background-image: linear-gradient(90deg, var(--base0011), var(--base01), var(--base0011));
		background-size: 200px 100%;
		background-repeat: no-repeat;
		border-radius: 8px;
	}

	.skeleton {
		height: 100px;
		border-radius: 4px;
		display: inline-block;
		line-height: 1;
		width: 100%;
	}
</style>
