<script lang="ts" setup>
defineProps<{ bordered?: boolean; dark?: boolean }>();
</script>

<template>
  <div class="app-circle" :class="{ dark, 'app-circle__bordered': bordered }">
    <slot />
  </div>
</template>

<style scoped>
.app-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-round);
  background-color: var(--surface-1);
  aspect-ratio: var(--ratio-square);
}

.app-circle__bordered {
  border: 1px solid var(--border-color);
}
</style>
