<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(--main-text-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: 85vh;
    overflow-y: auto;
    max-width: 400px;
    margin: auto;
    margin-top: 25px;
    padding: 10px;
    background-color: var(--overlay-color);
    border-radius: 10px;
    z-index: 1000;
  }
</style>
