.LinkTable {
  /* Table layout specific customization */
  td {
    @apply align-top;
  }

  td.LinkTable-main {
    @apply inline-flex items-center gap-2;
  }

  &.SearchResult-table th {
    @apply bg-gray-100 text-gray-900;
  }

  /* Search Result summary styling */
  td.LinkTable-main:has(.SearchResult-summary:not(:empty)) {
    @apply grid grid-cols-[minmax(auto,_max-content)_theme(size.7)] [row-gap:0];
  }

  td.LinkTable-main .SearchResult-summary:not(:empty) {
    @apply col-span-full;
  }

  /* List items */
  > li {
    --link-h-max: calc(theme(lineHeight.4) * 2 + theme(spacing.4));
    --link-h-min: calc(theme(lineHeight.4) + theme(spacing.2));

    @apply flex max-h-[--link-h-max] min-h-[--link-h-min] items-center rounded-lg;
  }

  > li.Message {
    @apply max-h-none;
  }

  > li:has(> *:hover) {
    @apply bg-gray-100;
  }

  &:not(.CollectionList) {
    > li:has(> a:focus-visible) {
      @apply ring-primary-100 ring-offset-1 z-[1] ring-4 ring-offset-primary-600 [&_a]:ring-offset-0 [&_a]:ring-0;
    }

    > li:has(> a.is-focusRegionTarget) {
      @apply ring-offset-1 ring-4 ring-primary-300 ring-offset-primary-700 transition-[box-shadow] duration-500 [&_a]:!ring-offset-0 [&_a]:!ring-0;
    }

    > li:has(> a.was-focusRegionTarget) {
      @apply transition-[box-shadow] duration-500 ease-out;
    }
  }

  > li > .LinkTable-noLinkText,
  > li > a {
    @apply my-2 line-clamp-2 w-full overflow-hidden text-ellipsis text-wrap break-words px-2 text-sm text-gray-700 no-underline;

    /* Prevents italic glyphs from being clipped by overflow:hidden + line-clamp */
    > em {
      @apply me-[0.25em];
    }
  }

  li.selected > a {
    @apply text-primary-800 more-contrast:text-white;
  }
}

/* Compact mode for narrow containers (element width < 500px, toggled via
   ResizeObserver in v4/LinkTable.js). Converts table rows into stacked card
   layout: label reordered to top, title full-width, metadata below. */
.LinkTable.is-compact {
  > thead {
    @apply hidden;
  }

  > tbody > tr {
    @apply flex flex-wrap px-6 py-4;

    > .LinkTable-label {
      @apply -order-1 p-0;
    }

    > .LinkTable-main {
      @apply w-full p-0 [overflow-wrap:anywhere];
    }

    > td:not(.LinkTable-main, .LinkTable-label) {
      @apply flex items-center p-0 text-xs text-gray-500;

      &:empty {
        @apply hidden;
      }
    }

    > td:not(.LinkTable-main, .LinkTable-label)
      ~ td:not(.LinkTable-main, .LinkTable-label)::before {
      @apply mx-1 inline-block size-0.5 rounded-full bg-gray-500 content-[''];
    }
  }
}

.LinkTable.is-scrollable {
  @apply __table-wrapper overscroll-x-contain;
}
