<script>
    export let image = "";
    export let onclick;
    export let color = "var(--col_text_panel)";
    export let size = "25px";

    let externalClasses = "";
    export { externalClasses as class };

    const Clickablility = onclick ? "clickable" : "";

</script>

<input class="{externalClasses} {Clickablility} icon" type="button" value="" 
style="--icon-image: url({image}); --icon-color: {color}; --icon-size: {size};" 
on:click={onclick ? onclick : null}>

<style>
    :global(.icon) {

        height: var(--icon-size);
        width: var(--icon-size);

        background-color: var(--icon-color);

        object-fit: contain;
        -webkit-mask-image: var(--icon-image);
        mask-image: var(--icon-image);
        mask-repeat: no-repeat;
        mask-size: contain;
    }

    .clickable {
        cursor: pointer;
    }
    .clickable:hover {
        background-color: var(--col_text_hint) !important;
    }
</style>