<template>
    <component :is="tag" class="btn">
        <svg-btn-outline />

        <slot />
    </component>
</template>

<script setup>
import SvgBtnOutline from '@/components/svg/BtnOutline.vue'

const props = defineProps({
    tag: {
        type: String,
        default: 'button',
    },
})
</script>

<style lang="scss">
.btn {
    text-transform: uppercase;
    padding: desktop-vw(5px) desktop-vw(16px) desktop-vw(6px);
    color: var(--grey-100);
    position: relative;
    cursor: pointer;

    &:hover {
        color: var(--theme-accent);
    }
}
</style>
