<script lang="ts">
    export let link: string;
    export let text: string;
</script>

<a class="link-button" href={link}>{text}</a>

<style>
    .link-button {
        color: aliceblue;
        border: none;
        border-radius: 20px;
        text-decoration: none;
        margin: 5px;
        background-color: var(--island-button-color);
        font-family: urwgothic, "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
        padding: 5px 25px;
        min-width: 40px;
        width: fit-content;
        height: 22px;
        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;
    }

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