<script lang="ts">
  /**
   * An overlay is a semi-transparent layer that appears on top of the main content, typically used to dim the background and focus user attention on a specific element. It is often combined with modals, popovers, or loading states to create a visual separation between the foreground and background. Overlays help prevent unintended interactions while keeping the primary content accessible.
   *
   * @slot default - Use this slot to insert a centered content inside the overlay.
   */
  interface Props {
    [key: string]: any;
    /**
     * Controls the visibility of the overlay.
     */
    isvisible?: boolean;
    /**
     * Accessible label for the overlay dialog.
     */
    dialoglabel: string;
    /**
     * Callback fired when the overlay is clicked.
     */
    onOverlayClick?: () => void;
  }

  let { isvisible, dialoglabel, onOverlayClick, class: className, ...attrs }: Props = $props();
</script>

<div
  class={['mc-overlay', isvisible && 'is-visible', className]}
  onclick={onOverlayClick}
  {...attrs}
>
  <div role="dialog" tabindex="-1" aria-labelledby={dialoglabel}>
    <slot />
  </div>
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-overlay {
  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
  inset: 0;
  opacity: 0;
  position: fixed;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0ms 0.4s;
  z-index: var(--overlay-z-index, 4);
}
.mc-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.4s ease, visibility 0ms;
  visibility: visible;
}

.mc-overlay-loader {
  background-color: var(--overlay-color-background, rgba(0, 0, 0, 0.5));
  inset: 0;
  opacity: 0;
  position: fixed;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0ms 0.4s;
  z-index: var(--overlay-z-index, 4);
}
.mc-overlay-loader.is-visible {
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.4s ease, visibility 0ms;
  visibility: visible;
}
.mc-overlay-loader {
  align-items: center;
  display: flex;
  justify-content: center;
}</style>
