<script setup lang="ts">
defineProps<{
  visible: boolean
}>()
</script>

<template>
  <Transition>
    <div v-if="visible" class="tw:h-full tw:overflow-hidden tw:isolate" style="background-color: var(--main-background-color);">
      <div class="tw:h-full">
        <slot />
      </div>
    </div>
  </Transition>
</template>

<style scoped>
@property --screen-transition-duration {
  syntax: "<time>";
  inherits: false;
  initial-value: 0.5s;
}

/* this placeholder is needed, because Vue.js can not figure out transition duration based on nested styles */
.v-enter-active,
.v-leave-active {
  transition: opacity var(--screen-transition-duration) linear;
}

.v-enter-active>div,
.v-leave-active>div {
  transition: transform var(--screen-transition-duration) ease-out;
}

.v-leave-to {
  opacity: 0;
}
.v-leave-to>div {
  transform: scale(130%);
}
</style>
