<script lang="ts">
 export let username: string = '';
 export let avatar: string = '/troll_haz2.png';
 export let color: string = 'var(--base-400)';
 export let size: string = 'var(--avatar-size)';
</script>

<button class="avatar pa-0 border-0" style:--color="{color}" style:--size="{size}" on:click>
    <img src="{avatar}" alt="{`${username}'s avatar`}">
</button>

<style>
 .avatar, .avatar > img {
     width: var(--size);
     height: var(--size);
     border-radius: 9999px;
     overflow: hidden;
     background-color: var(--color);
 }
</style>
