<script lang="ts">
    export let callback = (size: number) => {
        console.log("Unused RestartButton callback! requested size:", size);
    };
    let open = false;
</script>
<!-- svelte-ignore a11y-missing-attribute -->
<button class="restart-button {open ? "open" : ""}" on:click={() => {open = !open}}>
    <div class="uusi-jakso"><strong>Uusi Jakso</strong></div>
    <div class="size-selector">
      <button>&lt;</button>
      <button class="restart-3x3" on:click={()=>{callback(3)}}>3x3</button>
      <button class="restart-4x4" on:click={()=>{callback(4)}}>4x4</button>
    </div>
</button>
<style lang="scss">
    @import "../style/button";
    .restart-button {
        // Button
        @include button;
        //
        cursor: pointer;
        flex: content;
        text-align: center;
        display: flex;
        overflow: hidden;
        padding: 0;
        height: 50px;
        line-height: 52px;
        .uusi-jakso{
            transition: all 0.25s ease;
            transform: translateX(0);
            flex: 1;
            overflow: hidden;
        }
        .size-selector {
            transform: translateX(100%);
            transition: all 0.25s ease;
            flex: 0;
            overflow: hidden;
            padding: 2px;

            display: -webkit-flex;
            display: flex;
            button {
            flex: 1; // mf's browsers don't support flex: content???
            font-size: 1em;
            border: none;
            border-radius: 3px;
            margin: 3px;
            cursor: pointer;
            overflow: hidden;
            background: #ddd;
            color: black;
            }
            button:hover {
            background: #ccc;
            }
            button.restart-4x4::after {
            content: "oletus";
            display: block;
            line-height: 40%;
            font-size: 75%;
            margin-top: -1.5px;
            }
            button.restart-3x3::after {
            content: " ";
            display: block;
            line-height: 40%;
            font-size: 75%;
            margin-top: -1.5px;
            }
        }
    }
    .restart-button.open {
        .uusi-jakso {
            transform: translateX(-100%);
            flex: 0;
        }
        .size-selector {
            transform: translateX(0);
            flex: 1;
        }
    }
</style>