@layer base {
  table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    font-size: var(--text-7);
  }

  thead {
    border-bottom: 1px solid var(--border);
  }

  th, td {
    overflow-wrap: break-word;
  }

  th {
    padding: var(--space-3) var(--space-2);
    text-align: start;
    font-weight: var(--font-medium);
    color: var(--muted-foreground);
  }

  td {
    padding: var(--space-3) var(--space-2);
  }

  tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background-color var(--transition-fast);

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      background-color: rgb(from var(--muted) r g b / 0.5);
    }
  }
}