{{-- An M3 divider: a thin outline-variant line between groups of content (DividerTokens).

     Horizontal by default; `vertical` stands it between items in a row (give the row a height).
     `inset` indents it from the start by 16px, as under a list's leading icon; `middle` from both
     ends. It is `role="separator"`; with `decorative` it is hidden from assistive tech. --}}

@props([
    'vertical' => false,
    'inset' => false,
    'middle' => false,
    'decorative' => false,
])

<div
    @if ($decorative) aria-hidden="true" @else role="separator" aria-orientation="{{ $vertical ? 'vertical' : 'horizontal' }}" @endif
    {{ $attributes->class([
        'shrink-0 bg-outline-variant',
        'h-px w-auto' => ! $vertical,
        'w-px self-stretch' => $vertical,
        'ms-4' => $inset && ! $vertical,
        'mx-4' => $middle && ! $vertical,
        'my-2' => $middle && $vertical,
    ]) }}
></div>