<template>
    <ToastRoot class="ToastRoot bg-light-10 dark:bg-dark-10 p-3 border border-light-30 dark:border-dark-30" v-model:open="model">
        <ToastTitle asChild><slot name="title"></slot></ToastTitle>
        <ToastDescription asChild><slot></slot></ToastDescription>
        <ToastClose v-if="closeable"><button>×</button></ToastClose>
    </ToastRoot>

    <ToastViewport class="fixed bottom-0 right-0 flex flex-col p-6 gap-2 max-w-96 z-50 outline-none" />
</template>

<script setup lang="ts">
const model = defineModel<boolean>();

const { closeable = true } = defineProps<{
    closeable?: boolean
}>();
</script>

<style>
.ToastRoot[data-swipe='move'] {
  transform: translateX(var(--radix-toast-swipe-move-x));
}
.ToastRoot[data-swipe='cancel'] {
  transform: translateX(0);
  transition: transform 200ms ease-out;
}
.ToastRoot[data-swipe='end'] {
  animation: swipeRight 100ms ease-out;
}

@keyframes swipeRight {
  from {
    transform: translateX(var(--radix-toast-swipe-end-x));
  }
  to {
    transform: translateX(100%);
  }
}
</style>