<!-- AppLink.vue -->
<script setup lang="ts">
import { Link } from "@inertiajs/vue3";

defineProps<{
    href: string;
}>();
</script>

<template>
    <Link :href="href" class="app-link">
        <slot />
    </Link>
</template>

<style scoped>
.app-link {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
    text-underline-offset: 3px;
}

.app-link:visited {
    color: var(--accent);
}

.app-link:hover {
    color: var(--accent-soft);
    text-decoration: underline;
    text-decoration-color: rgba(56, 189, 248, 0.4);
}
</style>
