<div class="lane-selector">
    <div class="flex mt-2">
        <div class="cursor-pointer mr-4 lane-icon lane-filter opacity-40 hover:opacity-70" data-lane="Toplane">
            <x-icon-position-top class="text-orange-400"/>
        </div>
        <div class="cursor-pointer mr-4 lane-icon lane-filter opacity-40 hover:opacity-70" data-lane="Jungle">
            <x-icon-position-jungle class="text-orange-400"/>
        </div>
        <div class="cursor-pointer mr-4 lane-icon lane-filter opacity-40 hover:opacity-70" data-lane="Midlane">
            <x-icon-position-middle class="text-orange-400"/>
        </div>
        <div class="cursor-pointer mr-4 lane-icon lane-filter opacity-40 hover:opacity-70" data-lane="Botlane">
            <x-icon-position-bottom class="text-orange-400"/>
        </div>
        <div class="cursor-pointer lane-icon lane-filter opacity-40 hover:opacity-70" data-lane="Support">
            <x-icon-position-utility class="text-orange-400"/>
        </div>
    </div>
</div>
