<template>
  <div class="notifications">
    <div
      class="notification flex flex-row flex-nowrap top-xs hidden-overflow rel padding-small bottom-margin-small rounded-x-small shadow-large background-success text-success"
      :class="[`background-${apperance}`, `text-${apperance}`]"
      ref="container"
    >
      <i
        class="text-medium padding-small fas fa-check-circle"
        :class="{
          'fa-check-circle': apperance == 'success',
          'fa-info-circle': apperance == 'info',
          'fa-exclamation-circle': apperance == 'warning',
          'fa-times-circle': apperance == 'error',
        }"
      ></i>

      <span class="flex-1 text-small padding-small">
        <slot></slot>
      </span>

      <div class="flex-auto">
        <base-button size="small" square :apperance="apperance" @click.native="onAlertClose">
          <template #icon>
            <i class="fas fa-times"></i>
          </template>
        </base-button>
      </div>
    </div>
  </div>
</template>

<script src="./scripts.js"></script>
