pf-tab-headers {
  @apply flex gap-1;
  &[vertical] {
    @apply flex-col;
  }
  pf-tab-header {
    @apply inline-block p-2 font-medium cursor-pointer outline-0 transition-all border-b border-b-border overflow-hidden text-ellipsis;
    &:hover {
      @apply border-primary text-gray-800;
    }
    &:focus-visible {
      @apply ring-1 ring-primary rounded-md;
    }
    &[aria-selected="true"] {
      @apply border-primary text-primary font-semibold;
    }
  }
}

pf-tab-pages {
  @apply block;
  pf-tab-page {
    @apply block;
    &[hidden] {
      @apply hidden
    }
  }
}