<template>
    <div v-if="devFlags.showDebugInfo" class="bp-badge" aria-hidden="true">
        <span class="sm:hidden">xs</span>
        <span class="hidden sm:inline md:hidden">sm</span>
        <span class="hidden md:inline lg:hidden">md</span>
        <span class="hidden lg:inline">lg</span>
    </div>
</template>

<script setup lang="ts">
import { useDevFlags } from '../composables/useDevFlags';
const devFlags = useDevFlags();
</script>

<style scoped>
.bp-badge {
    position: fixed;
    bottom: 8px;
    right: var(--space-page);
    z-index: 9999;
    background: var(--accent);
    color: white;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0.8;
}
</style>
