<template>
  <div class="overlay" :style="style">
    <section class="hero is-fullheight is-white">
      <div class="hero-body">
        <div class="container has-text-centered">
          <slot/>
        </div>
      </div>
    </section>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component({
  name: 'base-overlay'
})
export default class BaseOverlay extends Vue {
  @Prop({ default: 1 }) readonly opacity!: number

  get style () {
    return `opacity: ${this.opacity};`
  }
}
</script>

<style lang="scss" scoped>
@import "../../core/base/bulma.scss";
@import "bulma/sass/layout/hero.sass";

.overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 6000;
  left: 0;
  top: 0;
  overflow-x: hidden;
}
</style>
