<script lang="ts">
    export let fn = () => {};
    export let text: string;
</script>

<button class="script-button" on:click={fn} on:keypress={fn}>{text}</button>

<style>
    .script-button {
        color: aliceblue;
        border: none;
        border-radius: 20px;
        text-decoration: none;
        margin: 5px;
        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
        background-color: var(--island-button-color);
        padding: 20px;
        min-width: 40px;
        height: 25px;
        font-size: 16px;
        font-weight: 400;
        box-shadow: var(--box-shadow);
        transition: all 0.3s ease;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .script-button:hover {
        box-shadow: var(--box-shadow-dark);
        background-color: rgb(45, 45, 45);
    }
</style>
