<script setup lang="ts">
// Modal.vue 
// Assume component existing means it's open
// Closing a modal emits a close event
// Ensure everything outside of modal gets darkened to 80% opacity

const emit = defineEmits(['close']);

</script>

<template>
    <div>
        <div class="modal-overlay" @click="emit('close')">
            <div class="modal-content max-w-[50rem]" @click.stop>
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<style>
    .modal-overlay {
        @apply fixed top-0 left-0 flex justify-center w-screen h-screen;
        background-color: rgba(0, 0, 0, 0.2);
        overflow: scroll;
    }

    .modal-content {
        @apply bg-overlay-0 max-h-[48rem];
        padding: 1rem;
        border-radius: 0.5rem;
        overflow: scroll;
    }
</style>