<script setup lang="ts">
import { useLoadingStore } from '#layers/stores/useLoadingStore'

const loadingStore = useLoadingStore()
const { fullLoading } = storeToRefs(loadingStore)
</script>

<template>
  <Transition name="fade-out">
    <div v-show="fullLoading" class="spinner-wrap">
      <div class="spinner"></div>
    </div>
  </Transition>
</template>

<style scoped>
.spinner-wrap {
  @apply fixed inset-0 bg-black pt-[96px] flex items-center justify-center sm:pt-[112px] z-[150];
}
.spinner {
  @apply w-[80px] h-[80px] bg-cover bg-center bg-no-repeat bg-[url('/images/common/publisning_template_loader_white.png')];
}

[data-theme='light'] {
  .spinner-wrap {
    @apply bg-white/90;
  }
  .spinner {
    @apply bg-[url('/images/common/publisning_template_loader_black.png')];
  }
}
</style>
