<script lang="ts">
  // variant 0/1 = zwei leicht unterschiedliche Wolkenformen für Abwechslung.
  let {
    size = 100,
    opacity = 1,
    variant = 0,
    fill = 'var(--c-cloud)',
    stroke = '#cad6e8',
  }: { size?: number; opacity?: number; variant?: number; fill?: string; stroke?: string } = $props();
</script>

<svg width={size} height={size * 0.6} viewBox="0 0 120 70" xmlns="http://www.w3.org/2000/svg" {opacity} aria-hidden="true">
  <g {fill} {stroke} stroke-width="2">
    {#if variant === 1}
      <ellipse cx="26" cy="44" rx="20" ry="16" />
      <ellipse cx="52" cy="30" rx="24" ry="20" />
      <ellipse cx="80" cy="36" rx="26" ry="22" />
      <ellipse cx="100" cy="46" rx="16" ry="14" />
      <rect x="20" y="44" width="84" height="18" rx="9" />
    {:else}
      <ellipse cx="30" cy="42" rx="22" ry="18" />
      <ellipse cx="60" cy="32" rx="28" ry="22" />
      <ellipse cx="90" cy="42" rx="22" ry="18" />
      <rect x="22" y="42" width="76" height="18" rx="9" />
    {/if}
  </g>
</svg>
