div:has(> .table) {
  overflow: auto;
  max-width: 100%;
  scrollbar-width: thin;
  max-height: 60dvh;
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
}

.table {
  font-size: 13px;

  td,
  th {
    border: 1px solid var(--color-base-300);
    border-left: 0;
    border-top: 0;
  }

  td,
  th {
    max-width: 170px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

    &.wrap {
      white-space: wrap;
    }
  }

  td[colspan="100"] {
    text-align: center;
  }

  a {
    color: var(--color-primary);

    &:hover {
      text-decoration: underline;
    }
  }

  tbody tr:nth-child(odd of :not([style="display: none;"])) > * {
    background: color-mix(
      in oklab,
      var(--color-base-200) 40%,
      var(--color-base-100)
    );
  }

  tbody tr:nth-of-type(even) > *,
  th {
    background: var(--color-base-100);
  }

  &.table-pin-cols th {
    box-shadow: -1px 0 0px 0px inset var(--color-base-300);
  }
}