Special Drops Button

---
// Drops Button v1.0
const { ...attr } = Astro.props
---

<div {...attr}>
  <div class="aspect-square w-full">
    <div class="relative h-full rounded-2xl bg-blue-400">
      <div x-data>
        <div
          class="absolute left-1/2 top-1/2 z-20 aspect-square w-1/3 -translate-x-1/2 -translate-y-1/2 cursor-pointer rounded-full bg-white"
          @mousedown.prevent="$event.target.after($refs.template.content.cloneNode(true))"
          @touchstart.prevent="$event.target.after($refs.template.content.cloneNode(true))">
        </div>
        <template x-ref="template">
          <div
            class="absolute left-1/2 top-1/2 z-10 aspect-square w-1/3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white"
            :class="'opacity-100 transition ease-out duration-[2000ms]'"
            x-init="$nextTick(() => $el.classList.add('!opacity-0', 'scale-[3]'))"
            x-on:transitionend="$el.remove()">
          </div>
        </template>
      </div>
    </div>
  </div>
</div>