.quality-info {
  .label {
    color: $color-text-desc;
  }

  .commit-id {
    color: $color-primary;
  }
}

.quality-data-panel {
  min-width: 750px;

  .quality-data {
    padding: $p20;
    color: $color-text-desc;
    font-size: 24px;
    background: $white;
    border-radius: $radius;
    @extend %shallow-shadow;

    &:hover {
      @extend %hover-shadow;
    }

    .data-detail {
      display: flex;
      align-items: center;
    }

    .num {
      color: $color-text;
    }

    .rate {
      display: inline-block;
      width: $p24;
      margin-left: $p12;
      color: $white;
      font-weight: 600;
      font-size: $p16;
      line-height: $p24;
      text-align: center;
      background: $darkgray;
      border-radius: $p12;
    }

    .rate-a {
      background: #6cb38b;
    }

    .rate-b {
      background: $palegreen;
    }

    .rate-c {
      background: #f7c36b;
    }

    .rate-d {
      background: #de6f57;
    }

    .rate-e {
      background: #de5757;
    }

    i {
      font-size: 32px;
    }
  }
}

.quality-data-detail {
  min-height: 200px;
  padding: $p4 $p16 $p28;
  background: $white;
  border-radius: $radius;
  @extend %shallow-shadow;

  tbody {
    cursor: pointer;
  }

  .file-header {
    height: 40px;
    margin: 0;
    padding: 0 $p16;
    background: $whitesmoke;
    border-bottom: 1px solid $color-border;
    border-radius: 3px 3px 0 0;

    i {
      color: $color-text-desc;

      &:hover {
        color: $color-primary;
      }
    }
  }

  .file-content {
    min-height: 200px;

    .error-marker {
      position: absolute;
      left: 0 !important;
      width: 100% !important;
      background: $color-danger-bg;
    }
  }
}
