.list-test-items {
  display: grid;
  gap: $spacing-sm;
}

.test-item {
  position: relative;
  display: grid;
  padding-left: $spacing;
}

.test-item .test-title::before {
  content: "";
  position: absolute;
  display: inline-block;
  mask-repeat: no-repeat;
  width: $icon;
  height: $icon;
  left: 0;
  top: -2px;
  background-color: $black;
  mask-repeat: no-repeat;
}

.test-item.test-initialized .test-title::before {
  mask-image: url("@images/test-initialized.svg");
} 

.test-item.test-running .test-title::before {
  mask-image: url("@images/test-running.svg");
} 

.test-item.test-stopped .test-title::before {
  mask-image: url("@images/test-stopped.svg");
} 

.test-item.test-locked .test-title::before {
  mask-image: url("@images/test-locked.svg");
} 

.test-item.test-failed .test-title::before {
  mask-image: url("@images/test-failed.svg");
  background-color: $danger;
} 

.test-item.test-archived .test-title::before {
  mask-image: url("@images/test-archived.svg");
} 

.test-item.test-success .test-title::before {
  mask-image: url("@images/test-check.svg");
  background-color: $success;
} 

.test-item.test-promoted .test-title::before {
  mask-image: url("@images/test-promoted.svg");
} 

.test-item .test-title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; 
  line-height: 1.3;
  color: $black;
  &:hover, &:focus {
    color: $link-hover-color;
    &::before {
      background-color: $link-hover-color;
    }
  }
}

.test-item .test-info {
  overflow: hidden;
  display: -webkit-box;
  margin-top: 2px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  font-size: $font-size-xs;
  line-height: 1.3;
  color: $label-color;
}

.test-item .test-progress {
  margin-top: $spacing-xxs;
  margin-bottom: $spacing-xxs;
}

.test-item .test-metrics {
  padding-top: $spacing-xxs;
}

.test-item .metric-item {
  margin-right: $spacing-xs;
}