<template>
  <h2 class="ui-letter">{{ text }}</h2>
</template>

<script setup lang="ts">
defineProps<{
  text: string
}>();
</script>

<style lang="scss">
.ui-letter {
  --size: #{$letter-size};

  @include font-sm;

  display: grid;
  place-content: center;
  width: var(--size);
  height: var(--size);
  border-radius: $radius-full;
  background-color: $letter-bg;
  text-transform: uppercase;
  color: $letter-text;
  font-feature-settings: 'cv11' on;
  font-weight: 600;
}
</style>
