<template>
    <Teleport to="body">
        <div
            v-if="visible"
            class="chart-tooltip glass glass-border"
            :style="{ top: y + 'px', left: x + 'px' }"
        >
            <slot />
        </div>
    </Teleport>
</template>

<script setup lang="ts">
defineProps<{
    visible: boolean
    x: number
    y: number
}>()
</script>

<style>
.chart-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    padding: 8px 12px;
    font-size: 13px;
    min-width: 140px;
}

.ct-sub {
    font-size: 11px;
    color: #556677;
    margin-bottom: 8px;
}

.ct-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    margin-bottom: 6px;
    color: #a0b0c0;
}

.ct-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.ct-label {
    color: #556677;
}

.ct-val {
    font-weight: 500;
}
</style>
