@php
    $duration = 'duration-500';
    $commonStyles = "transition-translate $duration";
    $position = $position ?? 'centre';
    switch ($position) {
        case 'top':
            $dialogStyles = "top-0 left-1/2 -translate-x-1/2 starting:-translate-y-full $commonStyles";
            break;
        case 'right':
            $dialogStyles = "max-w-[340px] left-auto right-0 top-0 starting:translate-x-full $commonStyles";
            break;
        case 'bottom':
            $dialogStyles = "bottom-0 left-1/2 -translate-x-1/2 starting:translate-y-full $commonStyles";
            break;
        case 'left':
            $dialogStyles = "left-0 top-0 starting:-translate-x-full $commonStyles";
            break;
        default:
            $dialogStyles = "max-w-[340px] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 starting:opacity-0 $duration";
            break;
    }
@endphp

<dialog
    class="dialog w-full h-full backdrop:bg-brand-dark-4/60 backdrop:starting:opacity-0 backdrop:transition-opacity backdrop:duration-500 {{ $dialogStyles }} {{ $class ?? '' }}"
    id="{{ $id ?? '' }}">
    <div class="h-full">
        {{ $slot }}
    </div>
</dialog>