---
import Image from "astro/components/Image.astro"
import '/src/assets/css/main.scss';
---
    
    <div class="energy-wheel">
		<Image class="energy-wheel-item rounded-shadow" style="--i: 0" src="/src/svg/energy/colorless.svg?raw" alt="Colorless Energy" width={25} height={25}></Image>
		<Image class="energy-wheel-item rounded-shadow" style="--i: 1" src="/src/svg/energy/dark.svg?raw" alt="Dark Energy" width={25} height={25}></Image>
		<Image class="energy-wheel-item rounded-shadow" style="--i: 2" src="/src/svg/energy/dragon.svg?raw" alt="Dragon Energy" width={25} height={25}></Image>
		<Image class="energy-wheel-item rounded-shadow" style="--i: 3" src="/src/svg/energy/electric.svg?raw" alt="Electric Energy" width={25} height={25}></Image>
		<Image class="energy-wheel-item rounded-shadow" style="--i: 4" src="/src/svg/energy/fighting.svg?raw" alt="Fighting Energy" width={25} height={25}></Image>		
		<Image class="energy-wheel-item rounded-shadow" style="--i: 5" src="/src/svg/energy/fairy.svg?raw" alt="Fairy Energy" width={25} height={25}></Image>
		<Image class="energy-wheel-item rounded-shadow" style="--i: 6" src="/src/svg/energy/fire.svg?raw" alt="Fire Energy" width={25} height={25}></Image>
		<Image class="energy-wheel-item rounded-shadow" style="--i: 7" src="/src/svg/energy/grass.svg?raw" alt="Grass Energy" width={25} height={25}></Image>		
		<Image class="energy-wheel-item rounded-shadow" style="--i: 8" src="/src/svg/energy/psychic.svg?raw" alt="Psychic Energy" width={25} height={25}></Image>
		<Image class="energy-wheel-item rounded-shadow" style="--i: 9" src="/src/svg/energy/steel.svg?raw" alt="Steel Energy" width={25} height={25}></Image>
		<Image class="energy-wheel-item rounded-shadow" style="--i: 10" src="/src/svg/energy/water.svg?raw" alt="Water Energy" width={25} height={25}></Image>
	</div>
	<script>
		document.querySelectorAll(".energy-wheel-item").forEach((el, i, arr) => {
		el.style.zIndex = arr.length - i;
		});
	</script>