<script lang="ts">

</script>

<button class="fab" on:click>
    <slot />
</button>

<style>
 .fab {
     position: absolute;
     left: var(--left, calc(100% - 2 * var(--size, 48px)));
     top: var(--top, calc(100% - 2 * var(--size, 48px)));
     border-radius: 9999px;
     width: var(--size, 48px);
     height: var(--size, 48px);
     background: var(--background, white);
     border: none;
     z-index: 200;
     box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
     cursor: pointer;
 }

 .fab > * { z-index: 202; }

 .fab:active::before {
     content: "";
     position: absolute;
     display: block;
     width: 100%;
     height: 100%;
     z-index: 201;
     background: rgba(0,0,0, 0.1);
     left: 0;
     top: 0;
     border-radius: 9999px;
 }
</style>
