<template>

    <a class="hero-arrow-down" tabindex="-1" aria-hidden="true" href="#services" target="_self">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <polyline points="19 12 12 19 5 12"></polyline>
        </svg>
    </a>

</template>

<script setup>
</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // STYLE
    // --------------------------------------------------

    .hero-arrow-down {
        width: var(--regular-icon-wrapper-size);
        height: var(--regular-icon-wrapper-size);
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: var(--button-gradient);
        background-size: 100%;
        background-position: right center;
        border-radius: 50%;
        cursor: pointer;
        transition: background-size 200ms ease-in-out;

        svg {
            width: var(--regular-icon-size);
            height: var(--regular-icon-size);
            stroke: var(--primary-color);
            transition: transform 200ms ease-in-out;
        }

        &:hover,
        &:focus,
        &:active {
            background-size: 300%;

            svg {
                transform: translateY(0.25rem);
            }
        }
    }

</style>
