@if (variant() === 'glass') {
  <!-- 玻璃胶囊(D11 学员端,demo .tabbar/.tabpill 口径) -->
  <div
    class="ui-m-tabbar--glass"
    [class.fixed]="fixed()"
    [class.inset-x-0]="fixed()"
    [class.bottom-0]="fixed()"
    [style.z-index]="fixed() ? 'var(--z-float)' : null"
  >
    <div class="ui-m-tabpill">
      @for (item of items(); track $index; let i = $index) {
        <button
          type="button"
          class="ui-m-tab"
          [class.on]="active() === i"
          (click)="select(i)"
          [attr.aria-label]="item.label"
          [attr.aria-current]="active() === i ? 'page' : null"
        >
          <span class="relative">
            <i [class]="item.icon" aria-hidden="true"></i>
            @if (item.badge !== undefined) {
              <span class="ui-m-tab-badge">{{ item.badge }}</span>
            } @else if (item.dot) {
              <span class="ui-m-tab-dot" aria-hidden="true"></span>
            }
          </span>
          <em>{{ item.label }}</em>
        </button>
      }
    </div>
  </div>
} @else {
  <div
    class="ui-m-tabbar flex min-h-[50px] border-t border-edge bg-surface"
    [class.fixed]="fixed()"
    [class.inset-x-0]="fixed()"
    [class.bottom-0]="fixed()"
    [style.z-index]="fixed() ? 'var(--z-float)' : null"
  >
    @for (item of items(); track $index; let i = $index) {
      <button
        type="button"
        class="flex min-w-0 flex-1 flex-col items-center justify-center gap-0.5 py-1.5"
        [class.text-primary]="active() === i"
        [class.text-muted]="active() !== i"
        (click)="select(i)"
        [attr.aria-label]="item.label"
      >
        <span class="relative">
          <i [class]="item.icon" class="text-[20px]" aria-hidden="true"></i>
          @if (item.badge !== undefined) {
            <span class="absolute -right-2.5 -top-1 rounded-full bg-danger px-1 text-[10px] leading-4 text-white">
              {{ item.badge }}
            </span>
          } @else if (item.dot) {
            <span class="absolute -right-1 -top-0.5 h-2 w-2 rounded-full bg-danger" aria-hidden="true"></span>
          }
        </span>
        <span class="text-[11px]">{{ item.label }}</span>
      </button>
    }
  </div>
}