// Nesting increases specificity so that pf list styles are always overridden
.project-overview {
  .project-overview__additional-info {
    align-items: center;
    display: grid;
    grid-column-gap: 1%;
    grid-row-gap: 10px;
    grid-template-columns: auto minmax(min-content, 1fr) 85px;
    width: 100%;
    @media (min-width: $screen-xs-min) {
      grid-template-columns: auto minmax(min-content, 1fr) 135px;
    }
    @media (min-width: $screen-md-min) {
      grid-template-areas: "alert memory cpu status";
      grid-template-columns: 23% 21% 25% 28%;
    }
  }

  .project-overview__detail--alert {
    min-width: 0; // To enable text-overflow: ellipsis within a css-grid area
    @media (max-width: $screen-sm-max) {
      grid-row: 2;
    }
    @media (min-width: $screen-md-min) {
      grid-area: alert;
    }
  }

  .project-overview__detail--cpu {
    min-width: 0; // To enable text-overflow: ellipsis within a css-grid area
    @media (min-width: $screen-md-min) {
      grid-area: cpu;
    }
  }

  .project-overview__detail--memory {
    min-width: 0; // To enable text-overflow: ellipsis within a css-grid area
    @media (min-width: $screen-md-min) {
      grid-area: memory;
    }
  }

  .project-overview__detail--status {
    text-align: right;
    @media (min-width: $screen-md-min) {
      grid-area: status;
    }
  }

  .project-overview__item {
    min-height: 71px;
  }

  .project-overview__item--selected {
    background-color: $color-pf-blue-100 !important;

    &::after {
      @include font-awesome-free-solid;
      align-self: center;
      content: fa-content($fa-var-chevron-right);
      display: block;
      position: absolute;
      right: 30px;
    }
  }

  .project-overview__item .project-overview__item-chevron {
    visibility: hidden;
  }

  .project-overview__item:hover .project-overview__item-chevron,
  .project-overview__item.project-overview__item--selected .project-overview__item-chevron {
    visibility: visible;
  }

  .project-overview__item-heading {
    font-size: 16px;
    margin: 0;
    @media(max-width: $screen-sm-max) {
      margin-bottom: 10px;
    }
  }

  .project-overview__item-heading--name {
    @include co-truncate;
    font-family: var(--pf-global--FontFamily--redhatfont--heading--sans-serif);
    font-size: 16px !important;
    white-space: nowrap;
  }


  .project-overview__group {
    margin-bottom: 40px;
  }

  .project-overview__group-heading {
    font-size: 18px;
    line-height: normal;
    margin: 0;
    overflow: hidden;
    padding: 5px 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .project-overview__list {
    margin-top: 0;
  }

  .project-overview__metric-value {
    font-size: 18px;
  }

  .project-overview__metric-unit {
    color: $color-text-muted;
    font-size: ($font-size-base - 1);
    margin-left: 1px;
  }

  @media (min-width: $screen-md-min) {
    .project-overview__detail--cpu,
    .project-overview__detail--memory {
      text-align: right;
    }
  }
}

.project-overview__metric-tooltip {
  display: flex;
  min-width: 225px;
}

.project-overview__metric-tooltip-name {
  flex: 2;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-overview__metric-tooltip-title {
  margin-bottom: 5px;
}

.project-overview__metric-tooltip-value {
  flex: 1;
  text-align: right;
}

.project-overview__status .co-icon-and-text {
  display: inline-flex;
  margin-right: 12px;

  .project-overview__builds & {
    margin-right: 4px;
  }
}

@media (min-width: $screen-md-min) {
  // Metrics are hidden when the sidebar is open. Adjust list row styles.
  .overview--sidebar-shown .project-overview {
    .list-view-pf-additional-info {
      width: 50%;
    }

    .list-view-pf-description {
      flex-basis: 50%;
      width: 50%;
    }

    .project-overview__additional-info {
      grid-column-gap: 5%;
      grid-template-columns: 35% 55%;
    }
    .project-overview__detail--status {
      grid-column: 2;
      // Give enough margin for the chevron.
      margin-right: 40px;
    }
  }
}
