<script lang="ts">
    import InvertableIcon from "./InvertableIcon.svelte";


    export let label: string;
    export let icon: string;
    export let clickHandler: () => void;
</script>

<div class="h-full w-full text-center">
    <button class="border-none rounded-none bg-transparent p-0 m-0 h-full w-full" on:click={clickHandler}>
        <InvertableIcon bind:label bind:icon/>
    </button>
</div>

<style>
    .InvertableButton {
        border: None;
        border-radius: 0;
        background-color: transparent;
        /* width: 2em;
        height: 2em; */
        padding: 0 0;
        margin: 0 0;
        line-height: 0;
        height: 100%;
        width: 100%;
    }
    
    .InvertableButton:active {
        filter:invert(50%);
        /* background-color: #3e8e41;
        box-shadow: 0 5px #666;
        transform: translateY(4px); */
    }

    .buttonDiv {
        height: 100%;
        width: 100%;
        /* position: relative; */
        /* top: 0%; */
        text-align: center;
        /* border: 1px solid red; */
        line-height: 0;
    }

    /* div {
        border: 1px solid;
    } */
</style>