<template>
    <component
        class="btn"
        :is="tag"
    >
        <span v-if="arrow" class="leading-icon">→</span>
        <span class="text">
            <span><slot /></span>
            <span><slot /></span>
        </span>
        <span v-if="arrow" class="arrow">→</span>
        <!-- <span v-if="loading" class="loading">
            <svg-util-spinner />
        </span> -->
    </component>
</template>

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

<style lang="scss">
.btn {
    --t-duration: 350ms;
    --t-ease: var(--ease-out-quad);
    display: inline-flex;
    align-items: center;
    padding: rs(6px) rs(16px);
    background: var(--theme-contrast);
    color: var(--ivory);
    border-radius: rs(8px);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: color var(--t-duration) var(--t-ease);

    .leading-icon {
        position: absolute;
        width: rs(10px);
        height: 1em;
        display: flex;
        align-items: center;
        transform: translateX(-100%);
        opacity: 0;
        transition: transform var(--t-duration) var(--t-ease),
            opacity var(--t-duration) var(--t-ease);
    }
    .text {
        position: relative;
        display: block;
        overflow: hidden;
        transition: transform var(--t-duration) var(--t-ease);

        span {
            display: inline-block;
            transition: transform var(--t-duration) var(--t-ease);
            @include label;
        }
        span:first-child {
            color: var(--ivory);
        }
        span:last-child {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            transform: translateY(105%);
            color: var(--ivory);
        }
    }
    .arrow {
        transition: transform var(--t-duration) var(--t-ease),
            opacity var(--t-duration) var(--t-ease);

        &:not(:only-child) {
            margin-left: 0.5em;
        }
    }
    .loading {
        width: rs(10px);
        height: 1em;
        display: flex;
        align-items: center;

        svg {
            width: 100%;
            height: auto;
        }

    }

    &::before {
        content: '';
        display: block;
        position: absolute;
        inset: -2px;
        background: var(--theme-contrast);
        clip-path: inset(100% 0 0 0);
        transition: clip-path var(--t-duration) var(--t-ease);
    }

        &:hover,
        &.active,
        &.router-link-active {
            color: var(--ivory);

            &::before {
                clip-path: inset(0);
            }
            .text {
                span:first-child {
                    transform: translateY(-105%);
                }
                span:last-child {
                    transform: none;
                }
            }
            &.text-icon {
                .leading-icon {
                    transform: none;
                    opacity: 1;
                }
                .text {
                    transform: translateX(1.5em);
                }
                .arrow {
                    transform: translateX(100%);
                    opacity: 0;
                }
            }
        }

    &:disabled,
    &.disabled {
        opacity: 0.16;
        pointer-events: none;
    }
}
</style>
