<!-- Popover component wrapper -->
<script setup lang="ts">
import { ElPopover } from 'element-plus';

// Props
const { placement = 'bottom', width } = defineProps<{
    placement?: 'bottom' | 'top';
    width: string;
}>();
</script>

<template>
    <ElPopover :width :placement popper-class="popover" :teleported="false">
        <template #reference>
            <slot name="trigger"></slot>
        </template>

        <slot name="body"></slot>
    </ElPopover>
</template>

<style lang="scss">
.el-popper.popover {
    --el-popover-padding: 0;
    --el-popover-border-radius: 0.5rem;
    --el-border-color-light: theme('colors.neutral-500');

    max-width: calc(100% - 16px);
}
</style>
