<template>
  <div  class="pill" v-if="props.text">{{ props.text }}</div>
</template>

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

<style scoped lang="scss">
  @import 'styles/helpers';

  .pill {
    background-color: white;
    color: $color-charcoal-dark; /* Replace with your desired text color */
    padding: $small-spacing $medium-spacing;
    border-radius: $round-border-radius;
    border: 1px solid $color-silver;
    display: inline-block; /* Ensures the pill takes only the necessary width */
    margin-right: $small-spacing;
    margin-top: 2px;
    @include small-text;
  }

</style>
