<template>
  <div class="notice p-2" ref="notice">
    <slot></slot>
  </div>
</template>
<style scoped lang="scss">
.notice {
  position: fixed;
  bottom: 10px;
  left: 50%;
  max-width: 740px;
  z-index: 10;
  opacity: 0;
  transition: all 0.3s ease;
  transform: translateX(-50%) translateY(100%) translateZ(0px);
  background: var(--bs-body-bg);
  box-shadow: 0 2px 10px 0 hsl(0 calc(1 * 0%) 0% /.1);
  overflow: hidden;
  border-radius: 5px;
  pointer-events: none;

  &.show {
    opacity: 1;
    pointer-events: all;
    transform: translate3d(-50%, 0%, 0px);
  }
}
</style>
<script>
import { Vue, Prop, Watch, Component } from 'vue-property-decorator';

export default @Component({
  components: {
  }
})
class NoticePopout extends Vue {
  @Prop(Boolean) visible;

  @Watch('visible')
  toggle(show = true) {
    if (show) {
      this.$refs.notice.classList.add('show');
    } else {
      this.$refs.notice.classList.remove('show');
    }
  }
}
</script>
