/** table & table container styles **/
table {
  @apply w-full overflow-x-auto;
}

/** table header row & table header cells styling **/
thead > tr {
  @apply border-b border-b-gray-200;
}

th:has(input[type='checkbox']:only-child) {
  @apply w-[68px];
}

th,
thead td {
  @apply text-nowrap bg-gray-50 px-6 py-3 text-start text-xs font-medium text-gray-500 hover:text-gray-700;
}

/** table data row & data cell styling **/
tbody > tr {
  @apply border-b border-b-gray-200 bg-white hover:bg-gray-100;

  &:has(td input[type='checkbox']:checked) {
    @apply bg-gray-50;
  }
}

td {
  @apply px-6 py-4 text-sm font-normal text-gray-500;

  &.date,
  &.time {
    @apply whitespace-nowrap;
  }

  > a {
    @apply Link overflow-hidden text-sm text-gray-700 no-underline [word-break:break-word] hover:text-gray-900 hover:underline focus:text-gray-700;

    &.is-active {
      @apply text-gray-700 underline;
    }

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

  &.LinkTable-main > a,
  &.LinkList-main > a {
    @apply line-clamp-2;
  }

  button.ContentSummary-info {
    @apply flex-shrink-0;
  }

  /* For use cases where info button is a child of the link
  (ex. unpublished drafts dashboard widget , hierarchy view in search results) */
  .ContentSummary-link:has(.ContentSummary-info) {
    @apply inline-flex items-center gap-2;
  }

  a.ContentSummary-link > button.ContentSummary-info {
    @apply blokk;
  }
}

/** For tables that need horizontal scrolling (ex: Dashboard widgets) **/
.__table-wrapper {
  @apply overflow-x-auto @container;

  table {
    --col-width-sm: calc(theme(screens.xs) - theme(padding.14));
    --col-width-md: calc(theme(screens.sm) - theme(padding.12));
    --col-width-lg: calc(theme(screens.md) - theme(padding.12));

    @apply w-max min-w-full;
  }
  td {
    @apply max-w-[--col-width-sm] @[768px]:max-w-[--col-width-md] @[1200px]:max-w-[--col-width-lg];
  }
}

.__static-table {
  @apply w-full text font-normal text-gray-900;

  > tbody > tr {
    @apply last:border-b-0 hover:bg-inherit;

    > th,
    > td {
      @apply break-words align-text-top text-gray-900;
    }

    > th {
      @apply w-40 bg-gray-100 py-4 font-semibold;
    }

    > td {
      ol > li {
        @apply mt-4 first:mt-0;
      }
    }
  }
}
