<template>
    <button class="text-light-100 dark:text-dark-100 font-semibold hover:bg-light-30 dark:hover:bg-dark-30 inline-flex items-center justify-center bg-light-25 dark:bg-dark-25 leading-none outline-none
    border border-light-25 dark:border-dark-25 hover:border-light-30 dark:hover:border-dark-30 active:border-light-40 dark:active:border-dark-40 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40"
    :class="{'p-1': icon, 'h-[35px] px-[15px]': !icon}" >
        <slot />
    </button>
</template>

<script setup lang="ts">
const { icon = false } = defineProps<{
    icon?: boolean
}>();
</script>