<template>
    <div class="dot-container">
        <div class="dot" :style="{ '--size': props.size + 'px', '--background': props.background }"></div>
        <slot />
    </div>
</template>

<script lang="ts" setup>

const props = defineProps({
    size: {
        type: Number,
        default: 10
    },
    background: {
        type: String,
        default: '#fff'
    },
    text: {
        type: String,
        default: ''
    }
})

</script>


<style lang="less" scoped>
.dot-container {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    margin-right: 3px;
}

.dot {
    --size: 10px;
    --background: '#fff';
    width: var(--size);
    height: var(--size);
    background: var(--background);
    border-radius: 100%;
    margin-right: 5px;
}
</style>