<template>
    <div class="subsonics-logo">
        <LogoDark class="img" v-if="globalStore.theme == 'light'"/>
        <LogoLight class="img" v-else/>
        <h1>Subsonics</h1>
    </div>
</template>
<script setup>
import LogoDark from '@/assets/LogoDark.vue';
import LogoLight from '@/assets/LogoLight.vue';
import { useGlobalStore } from '@/stores/globalStore';

const globalStore = useGlobalStore();
</script>
<style scoped>
    .img {
      width: 100px;
      height: 100px;
    }  
    div {
        display: flex;
        align-items: center;
    }
    
    .subsonics-logo {
        width: 100%;
        justify-content: center;
    }

    @media screen and (max-width: 768px),
            screen and (max-height: 607px) {
        .img {
        width: 70px;
        height: 70px;
        }  
        h1 {
            font-size: 6vw;
        }
    }

</style>