<template>
  <RouterLink to="/" class="back-link" aria-label="Back to home">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <polyline points="15 18 9 12 15 6" />
    </svg>
    <span class="back-link__brand">fete</span>
  </RouterLink>
</template>

<script setup lang="ts">
import { RouterLink } from 'vue-router'
</script>

<style scoped>
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--color-text-on-gradient);
  text-decoration: none;
  line-height: 1;
}

.back-link__brand {
  font-size: 1.3rem;
  font-weight: 700;
}
</style>
