<script>
    let { children, close } = $props();
</script>

<div class="dialog">
    <button
        class="close"
        onclick={() => {
            if (close) close();
        }}>X</button
    >
    {@render children()}
</div>

<style>
    .dialog {
        padding: 1rem;
        position: absolute;
        width: 50vw;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        color: white;
        border: none;
        border-radius: 3px;

        /*
        * Created with https://www.css-gradient.com
        * Gradient link: https://www.css-gradient.com/?c1=0b49d0&c2=8e0871&gt=l&gd=dtl
        */
        background: #0b49d0;
        background: linear-gradient(135deg, #0b49d0, #8e0871);

        .close {
            position: absolute;
            top: 0.5rem;
            left: 0.5rem;
            padding: 0 0.5rem;
            line-height: 1.25rem;
        }
    }
</style>
