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

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

<template>
  <Transition name="fade">
    <div v-if="fullLoading" class="spinner-container">
      <div class="spinner-line"></div>
    </div>
  </Transition>
</template>

<style scoped>
.spinner-container {
  @apply fixed inset-0 bg-black/90 flex items-center justify-center z-[900];
}
.spinner {
  @apply w-[80px] h-[80px] bg-cover bg-center bg-no-repeat bg-[url('/images/common/publisning_template_loader_black.png')];
}

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