<script setup lang="ts">
import AppLogoIcon from '@/components/AppLogoIcon.vue';
</script>

<template>
    <div class="app-logo__icon-container">
        <AppLogoIcon class="app-logo__icon" />
    </div>
    <div class="app-logo__text-container">
        <span class="app-logo__text">Laravel Starter Kit</span>
    </div>
</template>

<style scoped>
@reference "../../css/app.css";

.app-logo__icon-container {
    @apply flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground;
}

.app-logo__icon {
    @apply size-5 fill-current text-white dark:text-black;
}

.app-logo__text-container {
    @apply ml-1 grid flex-1 text-left text-sm;
}

.app-logo__text {
    @apply mb-0.5 truncate leading-tight font-semibold;
}
</style>
