@props([
    'variant' => 'to-dark',
])

@php
    $isToDark = $variant === 'to-dark';
    $row1Bg = $isToDark ? 'bg-white' : 'bg-[#09090b]';
    $row2Bg = $isToDark ? 'bg-[#09090b]' : 'bg-white';
    $cols = 12;
@endphp

<div class="chess-divider relative w-full overflow-hidden select-none pointer-events-none" aria-hidden="true">
    <div class="grid grid-cols-6 sm:grid-cols-12 {{ $row1Bg }}">
        @for ($c = 0; $c < $cols; $c++)
            <div
                class="chess-tile h-6 sm:h-7 {{ $c % 2 === 0 ? ($isToDark ? 'bg-[#09090b]' : 'bg-white') : 'bg-transparent' }} {{ $c >= 6 ? 'hidden sm:block' : '' }}"
                style="transition-delay: {{ ($c % 6) * 45 }}ms; transform-origin: bottom;"
            ></div>
        @endfor
    </div>
    <div class="grid grid-cols-6 sm:grid-cols-12 {{ $row2Bg }}">
        @for ($c = 0; $c < $cols; $c++)
            <div
                class="chess-tile h-6 sm:h-7 {{ $c % 2 === 1 ? ($isToDark ? 'bg-white' : 'bg-[#09090b]') : 'bg-transparent' }} {{ $c >= 6 ? 'hidden sm:block' : '' }}"
                style="transition-delay: {{ (($c % 6) * 45) + 95 }}ms; transform-origin: top;"
            ></div>
        @endfor
    </div>
</div>