.report-card {
  @include custom-border-top(3px, transparent);

  cursor: pointer;
  margin: 0;
  padding: var(--space-normal);

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

  .heading {
    align-items: center;
    color: var(--color-heading);
    display: flex;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);
    margin: 0;
  }

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

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

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

  .metric-trend {
    font-size: var(--font-size-small);
    margin: 0 var(--space-small);
  }

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

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

  .desc {
    font-size: var(--font-size-small);
    margin: 0;
    text-transform: capitalize;
  }
}