@if (direction() === 'vertical') {
  <div [class]="'h-full ' + verticalLine()" role="separator" aria-orientation="vertical"></div>
} @else {
  <div class="flex items-center text-xs text-faint" role="separator" aria-orientation="horizontal">
    <span [class]="leftLine()"></span>
    @if (text()) {
      <span class="whitespace-nowrap px-4">{{ text() }}</span>
    }
    <span [class]="rightLine()"></span>
  </div>
}