<script lang="ts">
    import { fade } from "svelte/transition";

    export let variables = { title: "" };
</script>

<div in:fade={{ duration: 150 }} out:fade={{ duration: 150 }}>
    <span>{variables.title}</span>
    <slot />
</div>

<style>
    span {
        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
        color: var(--island-header-color);
        font-weight: 600;
        font-size: 20px;
    }
    div {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 85%;
        height: auto;
        max-height: 75vh;
        overflow-y: auto;
        max-width: 400px;
        margin: auto;
        margin-top: 25px;
        padding: 10px;
        background-color: var(--island-bg-solid);
        border-radius: 10px;
        z-index: 1000;
    }
</style>
