<script lang="ts">
    export let onTileClick: () => void;
</script>

<button
    class="invisible"
    on:click={ onTileClick }
>
    <div class="hexagon">
        <div class="content">
            <slot></slot>
        </div>
    </div>
</button>

<style>
    .hexagon {
        aspect-ratio: 1;
        border: 0.2em solid;
        border-color: hsl(220, 75%, 75%);
        border-radius: 100%;
        box-sizing: border-box;
        cursor: pointer;
        font-size: 1.2vmin;
        height: 12em;
        margin: -0.8em 0.2em;
        text-align: center;
        position: relative;
    }

    .hexagon:hover {
        border-color: hsl(60, 75%, 75%);
    }

    .hexagon:active {
        border-color: hsl(60, 75%, 50%);
    }

    .hexagon .content {
        position: absolute;
        height: 100%;
        line-height: 1.2;
        width: 100%;
    }

    .hexagon .content > * {
        margin: auto;
    }
</style>
