.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;
    display: flex;
    align-items: center;
  }

  .info-icon {
    color: var(--b-400);
    margin-left: var(--space-micro);
  }

  .metric-wrap {
    align-items: baseline;
    display: flex;
  }

  .metric {
    font-size: $font-size-big;
    font-weight: $font-weight-feather;
    margin-top: $space-smaller;
  }

  .metric-trend {
    font-size: $font-size-small;
    margin-left: $space-small;
  }

  .metric-up {
    color: $success-color;
  }

  .metric-down {
    color: $alert-color;
  }

  .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;
    }
  }
}