@props(['position' => 'right'])

<div {{ $attributes->merge(['class' => 'flex relative items-center group']) }}>
    @if (isset($trigger))
        <div class="select-none">
            {{ $trigger }}
        </div>
    @endif

    @if (isset($content))
        <div
            class="absolute z-20 w-max overflow-hidden rounded-md bg-white shadow-[0px_10px_84px_rgba(0,0,0,0.1)] hidden group-hover:block top-full {{ $position == 'right' ? 'left-0' : 'right-0' }}">

            <div {{ $content->attributes->merge(['class' => 'p-5']) }}>
                {{ $content }}
            </div>
        </div>
    @endif
</div>