<script lang="ts">
    import { cn } from "$lib/utils";

    interface Props {
        cls?: string;
    }

    let { cls = "" }: Props = $props();
</script>

<div class={cn("relative grid w-full place-items-center", cls)}>
    <div class="loader">
        <div class="square" id="sq1"></div>
        <div class="square" id="sq2"></div>
        <div class="square" id="sq3"></div>
        <div class="square" id="sq4"></div>
        <div class="square" id="sq5"></div>
        <div class="square" id="sq6"></div>
        <div class="square" id="sq7"></div>
        <div class="square" id="sq8"></div>
        <div class="square" id="sq9"></div>
    </div>
</div>

<style>
    /* From Uiverse.io by JkHuger */
    @keyframes loader_5191 {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .square {
        width: 10px;
        height: 10px;
        position: absolute;
        margin-top: -5px;
        margin-left: -5px;
    }

    @media (prefers-color-scheme: dark) {
        .square {
            background-color: #fff;
        }
    }

    @media (prefers-color-scheme: light) {
        .square {
            background-color: #000;
        }
    }

    #sq1 {
        margin-top: -25px;
        margin-left: -25px;
        animation: loader_5191 675ms ease-in-out 0s infinite alternate;
    }

    #sq2 {
        margin-top: -25px;
        animation: loader_5191 675ms ease-in-out 75ms infinite alternate;
    }

    #sq3 {
        margin-top: -25px;
        margin-left: 15px;
        animation: loader_5191 675ms ease-in-out 150ms infinite;
    }

    #sq4 {
        margin-left: -25px;
        animation: loader_5191 675ms ease-in-out 225ms infinite;
    }

    #sq5 {
        animation: loader_5191 675ms ease-in-out 300ms infinite;
    }

    #sq6 {
        margin-left: 15px;
        animation: loader_5191 675ms ease-in-out 375ms infinite;
    }

    #sq7 {
        margin-top: 15px;
        margin-left: -25px;
        animation: loader_5191 675ms ease-in-out 450ms infinite;
    }

    #sq8 {
        margin-top: 15px;
        animation: loader_5191 675ms ease-in-out 525ms infinite;
    }

    #sq9 {
        margin-top: 15px;
        margin-left: 15px;
        animation: loader_5191 675ms ease-in-out 600ms infinite;
    }
</style>
