<script lang="ts">
  export let width: string = '100%';
  export let height: string = '12px';
  export let radius: string = '6px';
</script>

<div class="skeleton" style={`width:${width};height:${height};border-radius:${radius};`} />

<style>
  .skeleton {
    background: linear-gradient(90deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12), rgba(0,0,0,0.06));
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
  }
  @keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  @media (prefers-color-scheme: dark) {
    .skeleton {
      background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.16), rgba(255,255,255,0.08));
    }
  }
</style>
