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

.report-bar {
  @include background-white;
  @include border-light;
  margin: var(--space-minus-micro) 0;
  padding: var(--space-small) var(--space-medium);

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

    div {
      width: 100%;
    }

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

    .business-hours {
      margin: var(--space-normal);
      text-align: center;
    }
  }
}