<script setup>
import { onMounted, watch, ref } from 'vue';
import { SetupContextMenu } from '../../services/ContextMenu';


onMounted(() => {
    SetupContextMenu();
});

</script>

<template>
<div id="context-menu" class="context-menu">
    <!--
    <div class="context-menu-element">
        <span>Hola</span> <img src="/icons/iconoir/regular/nav-arrow-right.svg">
    </div>
    <div class="context-menu-element">
        <span>Holaa</span>
    </div>
    <div class="context-menu-element">
        <span>Holaa</span>
    </div>
    <div class="context-menu-element">
        <span>Holaaaaaaa</span>
    </div>
    -->
</div>
</template>

<style lang="scss">
.context-menu {
    position: absolute;
    z-index: 214748363;

    flex-direction: column;
    background-color: var(--color-tooltip-background);
    border: 1px solid var(--color-border);
    overflow: visible;

    .context-menu-divider {
        height: 1px;
        margin: 4px 0;
        border-top: 1px solid var(--color-border);
        background-color: transparent;
        border: none;
    }

    .context-menu-element {
        &:last-child {
            border-width: 1px 1px 1px 1px;
        }
        border: solid 1px var(--color-border);
        border-width: 1px 1px 0px 1px;
        padding: 6px 10px 6px 8px;
        cursor: default;
        user-select: none;
        background-color: var(--color-tooltip-background);
        transition: background-color 100ms;
        display: flex;
        align-items: center;
        position: relative;

        span {
            flex-grow: 1;
            padding-right: 24px;
            white-space: nowrap;
        }

        img {
            filter: invert(1);
            width: 16px;
            height: 16px;
        }

        &:hover {
            background-color: var(--color-background-softest);
        }

        > .context-menu {
            display: none !important;
        }

        &:hover > .context-menu {
            display: flex !important;
        }
    }
}
</style>