<template>
    <span class="brand-mark-root">
        <img
            v-if="branding.assets.logoMark"
            :src="branding.assets.logoMark"
            alt=""
            aria-hidden="true"
            class="brand-mark-image"
        />
        <span v-else>{{ branding.shortName }}</span>
    </span>
</template>

<script setup>
    import { branding } from '@/branding/branding.js';
</script>

<style scoped>
    .brand-mark-root {
        @apply inline-flex items-center justify-center overflow-hidden;
    }

    .brand-mark-image {
        @apply h-full w-full object-contain;
    }
</style>
