<script>
    import {twMerge} from "tailwind-merge";

    export let color = 'primary';
</script>

<button class={twMerge('link-button transition-colors', `text-${color}-600`, `hover:text-${color}-400`, $$props.class)} on:click>
    <slot>
        <span class="text-primary-600 hover:text-primary-400"></span>
        <span class="text-amber-600 hover:text-amber-400"></span>
        <span class="text-red-600 hover:text-red-400"></span>
    </slot>
</button>

<style>
    .link-button {
        background: none;
        border: none;
        padding: 0 0.25em;
        cursor: pointer;
    }
</style>
