<script>import { BEM } from "../../models/BEM";
import Portal from "./Portal.svelte";
const bm = new BEM('UI-Overlay');
bm.append($$props.class);
export let show = false;
</script>
{#if show}
	<Portal>
		<div class="{bm.toString()}" style="{$$props.style}" class:show on:click>
			<slot/>
		</div>
	</Portal>
{/if}
<style>div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  transition-property: background-color;
  background-color: rgba(0, 0, 0, 0.4);
}

.show {
  display: flex;
}</style>
