<!--
    announcement.svelte

    used to display a short announcement at the top of the site
-->

<script>
    import { slide } from 'svelte/transition';
    export let message;
    export let color = 'red';
    export let link;
    let noderef;

    let visible = true;
</script>

{#if visible}
    <div transition:slide bind:this={noderef} class="announcement prevent-select" style="background-color: {color};">
        {#if link}
            <a href={link}>{message}</a>
        {:else}
            {message}
        {/if}
        
        <input class="close-button" type="button" value="" on:click={() => visible = false}>
    </div>
{/if}

<style>
    .announcement {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        height: 36px;
        font-size: 18px;
        color: white;
    }

    .close-button {
        cursor: pointer;
        background-color: white;
        object-fit: contain;
        -webkit-mask-image: url('$lib/images/icons/ui/cross.svg');
        mask-image: url('$lib/images/icons/ui/cross.svg');
        mask-repeat: no-repeat;
        mask-size: contain;
        height: 25px;
        width: 25px;
    }

    a, a:visited, a:hover, a:active {
        text-decoration: none; 
        color: inherit;
    }
</style>