<template>
  <svg 
    viewBox="0 0 32 32" 
    xmlns="http://www.w3.org/2000/svg"
    v-bind="$attrs"
  >
    <defs>
      <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="logo-gradient">
        <stop stop-color="#2AABEE" offset="0%"></stop>
        <stop stop-color="#229ED9" offset="100%"></stop>
      </linearGradient>
    </defs>

    <rect class="logo-bg" width="32" height="32" rx="4" ry="4" fill="url(#logo-gradient)" />
    
    <circle class="x" cx="16" cy="16" r="6" style="--t:scale(1.2)" fill="currentColor" />
    <circle class="c" cx="7" cy="7" r="3" style="--t:translate(9px,9px)" fill="currentColor" />
    <circle class="c" cx="28" cy="4" r="2" style="--t:translate(-12px,12px)" fill="currentColor" />
    <circle class="c" cx="6" cy="26" r="4" style="--t:translate(10px,-10px)" fill="currentColor" />
    <circle class="c" cx="26" cy="26" r="5" style="--t:translate(-10px,-10px)" fill="currentColor" />
    
    <line class="l" x1="16" y1="16" x2="7" y2="7" pathLength="1" stroke="currentColor" />
    <line class="l" x1="16" y1="16" x2="28" y2="4" pathLength="1" stroke="currentColor" />
    <line class="l" x1="16" y1="16" x2="6" y2="26" pathLength="1" stroke="currentColor" />
    <line class="l" x1="16" y1="16" x2="26" y2="26" pathLength="1" stroke="currentColor" />
  </svg>
</template>

<script setup lang="ts">
  defineOptions({
    inheritAttrs: false
  })
</script>
