<script>
    import { createEventDispatcher } from "svelte";

    const dispatch = createEventDispatcher();

    function event() {
        dispatch("click");
    }
</script>

<button on:click={event} id="open">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/></svg>
</button>

<style>
    #open {
        cursor: pointer;
        height: 75%;
        width: 30px;
        text-align: center;
        margin-top: 5px;
        border: none;
        background-color: transparent;
        border-radius: 3px;
        /*display: none;*/
    }

    #open:hover{
        background-color: #a0a0a038;
    }

    #open:active{
        background-color: #c0c0c038;
    }

    #open path {
        fill: #303030;
    }

    :global(body.dark) #open path {
        fill: #e9e9e9;
    }

    #open svg {
        height: 15px;
        vertical-align: middle;
    }
</style>
