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

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

  props: {
    zIndex: {
      type: [Number, String],
      default: 1000,
    },
  },

  computed: {
    style() {
      return {
        'z-index': this.zIndex,
      }
    },
  },

  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);
    animation: start 0.2s forwards;
  }

  @keyframes start {
    from {
      opacity: 0;
    }

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