<script>
    export let label;
    export let link;
    export let bgColor;
    export let iconColor;
    export let textColor = "text-blue-950"
</script>

<a href="{link}" class="-mt-8 relative group w-24">

    <div class=" {bgColor} {textColor} text-sm lg:text-md px-6 rounded font-bold w-full transition duration-300 hover:shadow-white hover:shadow text-nowrap whitespace-nowrap">
        {label}
    </div>

    <div class="absolute h-6 w-6  {iconColor}  hover:skew-y-3 rotate-45 bottom-[19px]   rtl:left-[80px] ltr:right-20 rounded-md">

    </div>
    <div class="absolute h-6 w-6  {iconColor} group-hover:animate-ping hover:skew-y-3 rotate-45 bottom-[19px]  rtl:left-[80px] ltr:right-20 rounded-md">

    </div>
</a>