<template>
  <div class="red-dot-container">
    <div class="red-dot" v-if="show"></div>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'

const props = defineProps({
  show: Boolean,
})
const show = computed(() => props.show)
</script>

<style scoped lang="scss">
.red-dot-container {
  display: flex;
  width: 30px;
  overflow: hidden;
  padding-bottom: 5px;
  .red-dot {
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--aie-text-color);
    border-bottom: 2px solid var(--aie-text-color);
    rotate: -45deg;
    margin: auto;
  }
}
</style>
