<script lang="ts">
    import { type IndieButton } from "./indie-button";

    let {
        button
    }: {
        button: IndieButton;
    } = $props();
</script>

<a class="button" href="{button.link}">
    <img src="/common/buttons/{button.img}" alt="{button.alt}">
</a>

<style>
    .button {
        width: 88px;
        height: 31px;
        transition: scale var(--duration-animation) var(--anim-curve);
        margin: 0;
    }

    .button:hover {
        scale: 1.2;
        z-index: 10;
    }

    .button img {
        height: 100%;
        width: 100%;
    }
</style>