<template>

    <div class="contact-decoration" aria-hidden="true">
        <div class="contact-decoration__icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
                <path d="M 3.2 3.2 L 20.8 3.2 C 22.01 3.2 23 4.19 23 5.4 L 23 18.6 C 23 19.81 22.01 20.8 20.8 20.8 L 3.2 20.8 C 1.99 20.8 1 19.81 1 18.6 L 1 5.4 C 1 4.19 1.99 3.2 3.2 3.2 Z"/>
                <polyline points="23 5.4 12 13.1 1 5.4"/>
            </svg>
        </div>
        <div class="contact-decoration__separator"></div>
    </div>

</template>

<script setup>
</script>

<style lang="scss" scoped>

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

    .contact-decoration {
        display: none;

        @media screen and (min-width: $tablet-media-query) {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            height: 100%;
            margin: 0 -1rem;

            &__icon {
                width: calc(var(--regular-icon-size) + 1rem);
                height: calc(var(--regular-icon-size) + 1rem);
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: var(--primary-color);
                border: 1px solid var(--accent-color);
                border-radius: 50%;

                svg {
                    stroke: var(--secondary-color);
                    width: var(--regular-icon-size);
                    height: var(--regular-icon-size);
                }
            }

            &__separator {
                width: 1px;
                height: 0;
                background-color: var(--accent-color);
                animation: expand-height 600ms ease-in-out 600ms forwards;
            }
        }
    }

</style>
