<template>
    <div v-if="devFlags.showGrid" class="grid-overlay" aria-hidden="true">
        <div class="grid-col" v-for="n in columns" :key="n"></div>
    </div>
</template>

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

const devFlags = useDevFlags();
const columns = 12;
</script>

<style scoped>
.grid-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-gap, 8px);
    padding: 0 var(--space-page, 16px);
    pointer-events: none;
    z-index: 9999;
}
.grid-col {
    background: rgba(129, 140, 248, 0.06);
    border-left: 1px solid rgba(129, 140, 248, 0.12);
    border-right: 1px solid rgba(129, 140, 248, 0.12);
    height: 100%;
}
</style>
