{{--
Credits Plus Navigation Component

Created by: Exp (Discord: exp_yt)
Company: ExpHost - https://www.exphost.net/

This code is the intellectual property of Exp and ExpHost.
Unauthorized copying, modification, or distribution is prohibited.
--}}
<style>
    .credits-plus-text {
        background: linear-gradient(75deg,
                hsl(178, 46.40%, 11.00%) 0%,
                hsl(211, 57.80%, 17.60%) 30%,
                hsl(220, 98%, 61%) 45%,
                hsl(207, 53.00%, 50.80%) 55%,
                hsl(214, 82.50%, 31.40%) 70%,
                hsl(222, 47%, 11%) 100%);
        background-size: 400% auto;
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: creditsFlowAnimation 8s linear infinite;
    }

    @keyframes creditsFlowAnimation {
        to {
            background-position: 400% center;
        }
    }
</style>

<a href="{{ route('account.credits') }}" 
   wire:navigate
   class="text-sm font-semibold px-3 py-2 whitespace-nowrap hover:opacity-80 transition-opacity duration-200 credits-plus-text">
    Credits: {{ $creditsDisplay }}
</a>