<script lang="ts" setup>
import type {PropType} from "vue";

defineProps({
  "title": {
    type: String,
    required: true,
  },
  "type": {
    type: String as PropType<'warn' | 'info' | 'success'>,
    default: 'info'
  }
});
</script>

<template>
  <aside :class="'toaster ' + type">
    <div class="toaster-content">
      <div class="toaster-content-title">{{ title }}</div>
      <div class="toaster-content-body">
        <slot/>
      </div>
    </div>
  </aside>
</template>


<style scoped lang="scss">

.toaster {
  display: flex;
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  padding: $small $small $xx_small;
  gap: $xxx_small;

  border-radius:  0 0 16px 16px;

  animation-name: fadeInRight;
  animation-duration: 300ms;
  animation-fill-mode: both;

  @include border-shadow();

  &.info {
    color: $info_text;
    background: $info_background;
  }
  &.warn {
    color: $warn_text;
    background: $warn_background;
  }
  &.success {
    color: $success_text;
    background: $success_background;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

.toaster-content {
  display: flex;
  flex-direction: column;
  gap: $xxx_small;

  font-size: $small-font-size;
  font-style: normal;
  font-weight: 400;
}

.toaster-content-title {
  font-weight: bold;
  line-height: 120%;
  font-size: $tertiary-font-size;
}

.toaster-content-body {
  line-height: 150%;
}
</style>
