<script setup>
const props = defineProps(['text'])
</script>

<template>
    <span class="inline-flex gap-[0.2em] align-middle px-0.5">
        <div v-for="(c, i) in props.text" :key="i" class="h-[0.2em] rounded-full"
            :style="`width: 0.${'-_'.includes(c) ? '6' : '2'}em; background-color: ${c === ' ' ? 'transparent' : 'currentColor'};`">
        </div>
    </span>
</template>