<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { inject } from 'vue'
import { cn } from '@/lib/utils'
import { DialogContextKey } from './context'

const props = defineProps<{ class?: HTMLAttributes['class'] }>()
const context = inject(DialogContextKey)!
</script>

<template>
  <Transition
    enter-active-class="animate-in fade-in-0 animation-duration-100"
    leave-active-class="animate-out fade-out-0 animation-duration-100"
  >
    <div
      v-if="context.open.value"
      data-slot="dialog-overlay"
      :class="cn('bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50', props.class)"
    />
  </Transition>
</template>
