<script setup lang="ts">
withDefaults(defineProps<{
    muted?: boolean
    dark?: boolean
    small?: boolean
    smaller?: boolean,
    smallest?: boolean,
    uppercase?: boolean
    smallSpacing?: boolean
    largeSpacing?: boolean
}>(), {
    size: 'medium',
    muted: false,
    uppercase: false
})
</script>

<template>
    <span class="mono-tag" :class="{ 'muted': muted, 'dark' : dark ,'text-sm': small, 'text-smaller': smaller, 'text-smallest': smallest, 'uppercase': uppercase, 'small-spacing': smallSpacing, 'large-spacing': largeSpacing}">
        <slot />
    </span>
</template>

<style scoped>
.mono-tag {
    font-family: 'Share Tech Mono', monospace;
    letter-spacing: 0.06em;
}

.dark{
    color: rgb(85, 85, 102);
    letter-spacing: 0.05em;
}

.text-sm{
    font-size: 0.82rem;
 }

.text-smaller{
    font-size: 0.72rem;
 }

.text-smallest{
    font-size: 0.62rem;
 }

.muted{
    color: rgb(119, 136, 153);;
}

.uppercase{
    text-transform: uppercase;
}

.small-spacing{
    letter-spacing: 0.04em;
}

.large-spacing{
    letter-spacing: 0.18em;
}
</style>
