<template>
  <div class="sv-toast" :class="[toastPositionClass, {'is-active': visible}]">
    <div class="sv-toast-icon" v-if="icon">{{icon}}</div>
    <div class="sv-toast-text">{{message}}</div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'svToast',
    data () {
      return {
        position: 'bottom',
        message: '',
        icon: '',
        visible: true
      }
    },
    computed: {
      toastPositionClass () {
        return `sv-toast-${this.position}`
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "../../styles/base";
 .sv-toast{
   position: fixed;
   left: 50%;
   transform: translateX(-50%);
   z-index:9999;
   display: flex;
   flex-direction: column;
   justify-content: center;
   max-width: 90%;
   padding: pxToRem(16 20);
   border-radius: pxToRem(10);
   background: rgba(0, 0, 0, .8);
   color: #f2f2f2;
   font-size: pxToRem(32);
   @keyframes fade-in {
     from{
       opacity: 0;
     }
     to {
       opacity: 1;
     }
   }
   @keyframes fade-out {
     to{
       opacity: 0;
     }
     from {
       opacity: 1;
     }
   }
   animation: fade-out .5s;
   &.is-active{
     animation: fade-in .5s;
   }
   &.sv-toast-top{
     top: pxToRem(100);
   }
   &.sv-toast-middle{
     top: 50%;
     transform: translate(-50%, -50%);
   }
   &.sv-toast-bottom{
     bottom: pxToRem(100);
   }
   .sv-toast-icon{
     margin-bottom: pxToRem(20);
   }
   .sv-toast-text{
   }
 }
</style>
