---
interface Props {
    top: string;
    left: string;
    size: string;
    opacity?: string;
    blur?: string;
}

const {
    top = "0",
    left = "0",
    size = "2rem",
    opacity = "1",
    blur = "10rem",
} = Astro.props;
---

<div></div>

<style define:vars={{ top, left, size, opacity, blur }}>
    div {
        width: var(--size);
        height: var(--size);

        position: absolute;
        top: var(--top);
        left: var(--left);

        border-radius: 100%;
        background-color: var(--clr-ts-red-400);
        filter: blur(var(--blur));
        opacity: var(--opacity);

        z-index: -1;

        /* animation: 3s infinite alternate pulsate ease-out; */
    }

    /* @keyframes pulsate {
        from {
            transform: scale3d(0.8, 0.8, 1);
        }

        to {
            transform: scale3d(1, 1, 1);
        }
    } */
</style>