.result-module > .result-item {
  border-top: $border-width solid $border-color;
  &:first-child {
    border-top: none;
  }
}

.result-header {
  display: flex;
  flex-direction: row;
  justify-content: end;
  padding-right: $btn-height;
}

.result-header-item {
  display: flex;
  flex-direction: row;
}

.result-header-item.vertical-labels {
  flex-direction: column-reverse;
  flex-wrap: wrap;
  align-content: center;
  justify-content: end;
  width: $btn-height;
  white-space: nowrap;
  user-select: none;
  padding-bottom: $spacing-xs;
  .label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    padding-top: $spacing-xxs;
  }
}

.result-item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  padding-left: $spacing;
}

.result-item-buttons {
  display: flex;
  flex-direction: row;
  margin-left: auto;
}

.result-item-buttons .btn {
  align-items: center;
  justify-content: center;
  width: $btn-height;
  height: 100%;
  padding: $spacing-xxs;
  border-radius: 0;
  border-left: $border-width solid $border-color;
  border-top: none;
  border-bottom: none;
}

details.result-item {
  grid: none;
  border-top: none;
}

details.result-item > summary {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto auto;
}

details.result-item[open] > summary {
  border-bottom: $border-width solid $border-color;
}

details.result-item > summary:hover .result-item-title {
  color: $link-hover-color;
}

.result-item::before {
  position: absolute;
  content: "";
  display: inline-block;
  width: $icon;
  height: $icon;
  top: $spacing-xs;
  left: 0;
  mask-repeat: no-repeat;
}

.result-item.feature::before {
  mask-image: url("@images/feature.svg");
  background-color: $gray-dark;
}

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

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

.result-item.pending::before {
  mask-image: url("@images/clock.svg");
  background-color: $gray-dark;
}

.result-item.testcase::before {
  mask-image: url("@images/testcase.svg");
  background-color: $black;
}

details.result-item .collapse-btn {
  width: $btn-height;
  padding: $spacing-xxs;
  justify-content: center;
  top: 0;
  right: (-$btn-height);
  height: 100%;
  border-radius: 0;
  border-left: $border-width solid $border-color;
  border-top: none;
  border-bottom: none;
  &:hover:after {
    background-color: $white;
  }
}

details.result-item .collapse-btn:after {
  content: "";
  display: inline-block;
  width: $spacing-sm;
  height: $icon;
  background-color: $primary;
  mask-image: url("@images/arrow-down.svg");
  mask-repeat: no-repeat;
}

details.result-item[open] .collapse-btn:after {
  mask-image: url("@images/arrow-up.svg");
}

details.result-item .issue-item {
  margin-right: $btn-height;
  padding-top: $spacing-xs;
  padding-bottom: $spacing-xs;
  border-bottom: $border-width solid $border-color;
  &:last-child {
    border-bottom: none;
  }
}

details.result-item .result-item {
  padding-left: ($spacing + $spacing-sm);
  margin-right: $btn-height;
  background-color: $gray-lightest;
  border-bottom: $border-width solid $border-color;
  &::before {
    left: $spacing-sm;
  }
  &:last-child {
    border-bottom: none;
  }
}

.result-item-title {
  padding-top: $spacing-xs;
  padding-bottom: $spacing-xs;
  padding-right: $spacing-md;
}

.result-item-metrics {
  padding-top: $spacing-xs;
  padding-bottom: $spacing-xs;
  padding-right: $spacing-xxs;
}

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