<template>
  <div class="back-drop">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'Backdrop',

  created() {
    this.$root.$el.parentElement.classList.add('back-drop-open')
  },

  beforeDestroy() {
    this.$root.$el.parentElement.classList.remove('back-drop-open')
  },
}
</script>

<style lang="postcss">
  .back-drop-open {
    overflow: hidden; /* Kill the scroll on the body */
  }
</style>

<style lang="postcss" scoped>
  .back-drop {
    width: 100vw;
    height: 100vh;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    backdrop-filter: blur(10px);
    background-color: rgba(142, 142, 147, 0.4);
    z-index: 1000; /* side bar is 999. use 1000 to also be above sidebar */
    animation: start 0.2s forwards;
  }

  @keyframes start {
    from {
      opacity: 0;
    }

    /* stylelint-disable-next-line block-no-empty */
    to {}
  }
</style>
