.list-tasks,
.list-issues {
  display: grid;
  gap: $spacing-sm;
}

.task-item,
.issue-item {
  display: grid;
  grid-template-areas: "item-icon item-title item-metrics"
                       "item-icon item-info item-info";
  grid-template-columns: auto 1fr;
}

.task-item-wrapper,
.issue-item-wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
}

.task-item:hover,
.issue-item:hover,
.task-item.white:hover,
.issue-item.white:hover {
  .task-icon, 
  .task-title, 
  .task-info, 
  .task-metrics .icon,
  .issue-icon, 
  .issue-title, 
  .issue-info, 
  .issue-metrics .icon {
    color: $link-hover-color;
  }
}

.task-item .task-icon,
.issue-item .issue-icon {
  width: $spacing;
  margin-right: $spacing-xxs;
}

.task-item .task-title,
.issue-item .issue-title {
  grid-area: item-title;
  overflow: hidden;
  display: -webkit-box;
  padding-top: 2px;
  -webkit-box-orient: vertical;
  line-clamp: 3; 
  -webkit-line-clamp: 3; 
  line-height: 1.3;
  color: $black;
}

.task-item.white .task-title,
.issue-item.white .issue-title {
  color: $white;
}

.task-item .task-info,
.issue-item .issue-info {
  grid-area: item-info;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2; 
  -webkit-line-clamp: 2; 
  padding-top: 2px;
  font-size: $font-size-label;
  line-height: 1.2;
  color: $label-color;
}

.task-item .task-action
.issue-item .issue-action {
  grid-area: item-actions;
}

.task-item .task-metrics,
.issue-item .issue-metrics {
  grid-area: item-metrics;
}

.task-item .metric-item,
.issue-item .metric-item {
  margin-left: $spacing-xs;
}