.report-card {
  @include padding($space-normal $space-small $space-normal $space-two);
  @include margin($zero);
  cursor: pointer;
  @include custom-border-top(3px, transparent);

  &.active {
    @include custom-border-top(3px, $color-woot);
    @include background-white;
    .heading,
    .metric {
      color: $color-woot;
    }
  }

  .heading {
    @include margin($zero);
    font-size: $font-size-small;
    font-weight: $font-weight-bold;
    color: $color-heading;
  }

  .metric {
    font-size: $font-size-bigger;
    font-weight: $font-weight-feather;
  }

  .desc {
    @include margin($zero);
    font-size: $font-size-small;
    text-transform: capitalize;
  }
}


.report-bar {
  @include margin(-1px $zero);
  @include background-white;
  @include border-light;
  @include padding($space-small $space-medium);

  .chart-container {
    @include flex;
    flex-direction: column;
    @include flex-align(center, middle);

    div {
      width: 100%;
    }

    .empty-state {
      @include margin($space-jumbo);
      font-size: $font-size-default;
      color: $color-gray;
    }
  }
}