<script setup lang="ts">
// Цвет-метка проекта (0.63): кружок перед названием — на карточке списка, в
// шапке страницы проекта и меткой у задач. Нет цвета — нет и кружка.
defineProps<{ color: string | null }>()
</script>

<template>
  <span v-if="color" class="proj-dot" :style="{ background: color }" aria-hidden="true" />
</template>

<style scoped>
.proj-dot {
  display: inline-block;
  flex: none;
  width: 0.65em;
  height: 0.65em;
  /* Кружок всегда стоит вплотную к имени проекта: без отступа он липнул к нему
     (0.73). 0.25em — это те же 3..4px при кегле бейджа 13px и имени 16px.
     Метка ProjectMark этот отступ снимает: там зазор задаёт flex-gap */
  margin-right: 0.25em;
  border-radius: 50%;
}
</style>