<script lang="ts" setup>
defineProps<{
  active: boolean;
  priority?: boolean;
}>();
</script>

<template>
  <div v-if="active" class="overlay" :class="{ priority }">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: var(--bms-z-index-modal);
  background: rgba(82, 100, 118, 0.3);
}

.priority {
  z-index: calc(var(--bms-z-index-modal) + 10);
}
</style>
