<script lang="ts">
  import { get } from "svelte/store";
  import { overlayOpen, overlayClose } from "$lib/overlay-store";
  import { useTranslate } from "$lib/translations";
  import { T } from "$lib/translations";

  const t = useTranslate();

  function handleClick() {
    get(overlayClose)?.();
  }
</script>

{#if $overlayOpen}
  <button
    type="button"
    class="fixed inset-0 z-[15] bg-black/50 cursor-default"
    aria-label={t(T.header_overlay_close)}
    onclick={handleClick}
  ></button>
{/if}
