table.thing-table { padding-inline: 2rem; }

.thing-table {
  --thing-table-preview-size: 3.5rem;

  a { text-decoration: none; }

  .title { color: var(--color--max-text); }

  .time {
    width: 180px;
    color: var(--color--aa-text);
  }

  .timestamp { display: none; }

  .time:hover {
    .relative-time { display: none; }

    .timestamp { display: inline; }
  }

  .image-cell {
    width: calc(var(--thing-table-preview-size) + (var(--space--small) * 2));
    min-width: calc(var(--thing-table-preview-size) + (var(--space--small) * 2));
    padding: var(--space--small);
    vertical-align: top;
  }

  .thing-table-row {
    .images {
      display: flex;
      flex: 0 0 auto;
      overflow: hidden;
      align-items: center;
      justify-content: center;
      inline-size: var(--thing-table-preview-size);
      block-size: var(--thing-table-preview-size);
      aspect-ratio: 1 / 1;
      border-radius: var(--border-radius--small);
      img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
  }

  .bookmark-toggle:not(.bookmarked) { visibility: hidden; }

  .actions {
    visibility: hidden;
    gap: 0.75rem;
    width: max-content;
    white-space: nowrap;
  }

  tbody tr.private { background-color: var(--color--bg-1); }

  tbody tr:hover {
    .bookmark-toggle:not(.bookmarked) { visibility: visible; }

    .actions { visibility: visible; }
  }
}