<template>
  <transition
    enter-active-class="bx-animate-fade-in"
    leave-active-class="bx-animate-fade-out"
    >
    <div
      v-show="visible"
      class="bx-overlay"
      :style="style"
      @click="$emit('click', $event)"
      />
  </transition>
</template>
<script>
export default {
  name: 'overlay',
  props: {
    visible: Boolean,
    zIndex: {
      type: Number,
      default: 700,
    },
  },
  computed: {
    style() {
      return {
        zIndex: this.zIndex,
      }
    },
  },
}
</script>
<style>
@import '../../../src/style/tools.css';
.bx-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--overlay-zindex);
  background-color: var(--overlay-bg-color);
}
.bx-overlay-open {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}
</style>
