<script lang="ts">
  import Loader from '../loader/Loader.svelte';
  /**
   * A loading overlay is a full-screen or container-level layer that indicates a process is in progress, preventing user interaction until the task is completed. It includes a progress indicator, and a message to inform users about the loading state. Loading Overlays are commonly used in data-heavy applications, form submissions, and page transitions to enhance user experience by managing wait times effectively.
   */
  interface Props {
    [key: string]: any;
    /**
     * Controls the visibility of the loading overlay.
     */
    isvisible?: boolean;
    /**
     * Text of the loading overlay.
     */
    text?: string;
  }

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

<div class={['mc-loading-loader', isvisible && 'is-visible', className]}>
  <div role="dialog" tabindex="-1" aria-label={text} {...attrs}>
    <Loader size="l" appearance="inverse" {text} />
  </div>
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.mc-loading-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-loading-loader.is-visible {
  opacity: 1;
  pointer-events: all;
  transition: opacity 0.4s ease, visibility 0ms;
  visibility: visible;
}
.mc-loading-loader {
  align-items: center;
  display: flex;
  justify-content: center;
}</style>
