<template>
  <div class="toast" :class="type">
    <div class="icon"></div>
    <p><slot></slot></p>
    <div class="close" v-if="!auto_close" @click="close()"></div>
  </div>
</template>

<script>
export default {
    props: [
        'type',
        'auto_close'
    ],
    data(){
        return {}
    },
    methods: {
        close(){
            this.$destroy();
            this.$el.parentNode.removeChild(this.$el);
        }
    },
    mounted(){
        if(this.auto_close){
            setTimeout(this.close, this.auto_close);
        }
    }
}
</script>

<style scoped>



    div.toast {
        display: flex;
        align-items: stretch;
        align-content: space-between;
        justify-items: stretch;
        justify-content: space-between;

        padding: 16px;
        margin: 8px;
        color: var(--info);
        background-color: var(--info-light);
        border-left: 8px solid var(--info);

    }

    div.toast p {
        flex: 1;
        margin: 0 24px;
        vertical-align: middle;
        line-height: 24px;
        text-align: left;
        justify-self: flex-start;
        color: inherit;
    }

    div.icon {
        flex: 0 0 24px;
        mask-size: contain;
        mask-repeat: no-repeat;
        mask: url('../assets/icons/info-24px.svg');
        width: 24px;
        height: 24px;   
        transform: scale(1.2);
        background: var(--info);
    }


    div.close {
        background: black;
        mask-size: contain;
        mask-repeat: no-repeat;
        mask: url('../assets/icons/close-24px.svg');
        float: right;
        width: 24px;
        height: 24px;   
        transform: scale(0.6);
        background: var(--grey);
        cursor: pointer;
    }

    div.close:hover{
        background: var(--primary-blue-dark);
    }

    div.toast.warn { 
        color: var(--warn); 
        background-color: var(--warn-light); 
        border-color: var(--warn); 
    }
    div.toast.warn .icon {
        mask: url('../assets/icons/warning-24px.svg');
        background: var(--warn);
    }

    div.toast.error { 
        color: var(--error); 
        background-color: var(--error-light); 
        border-color: var(--error); 
    }
    div.toast.error .icon {
        mask: url('../assets/icons/error_outline-24px.svg');
        background: var(--error);
    }

    div.toast.success { 
        color: var(--success); 
        background-color: var(--success-light); 
        border-color: var(--success); 
    }
    div.toast.success .icon {
        mask: url('../assets/icons/check_circle_outline-24px.svg');
        background: var(--success);
    }
</style>