<script>
    import { fragmentQuote } from '../stores/quoteStore.js';
</script>

{#if $fragmentQuote}
    {#key $fragmentQuote.key}
        <div
            class="toast"
            style="border-color: {$fragmentQuote.color}; --accent: {$fragmentQuote.color}"
        >
            <p>{$fragmentQuote.text}</p>
        </div>
    {/key}
{/if}

<style>
    .toast {
        position: absolute;
        bottom: 22px;
        right: 18px;
        width: 230px;
        padding: 10px 13px;
        background: rgba(8, 8, 8, 0.88);
        border-left: 3px solid;
        color: #ccc;
        font-family: 'Courier New', Courier, monospace;
        font-size: 12.5px;
        line-height: 1.55;
        pointer-events: none;
        animation: toastIn 4.2s ease forwards;
        z-index: 20;
    }

    @keyframes toastIn {
        0%   { opacity: 0; transform: translateX(14px); }
        12%  { opacity: 1; transform: translateX(0);    }
        78%  { opacity: 1; }
        100% { opacity: 0; }
    }
</style>
