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

  cursor: pointer;
  margin: 0;
  padding: $space-normal $space-small $space-normal $space-two;

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

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

  .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 {
    font-size: $font-size-small;
    margin: 0;
    text-transform: capitalize;
  }
}

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

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

    div {
      width: 100%;
    }

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

    .business-hours {
      margin: $space-normal;
      text-align: center;
    }
  }
}