.loader {
  width: 100%;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--light-gray) 25%,
    var(--faint-gray) 70%,
    var(--light-gray) 75%
  ); // Gradient for fading effect
  background-size: 200% 100%; // Double the width for the animation
  animation: loadingAnimation 1s infinite;
  border-radius: 16px;
}

@keyframes loadingAnimation {
  to {
    background-position: -200% 0; // Move the background to create the animation effect
  }
}

.flexLayout {
  display: flex;
  gap: 8px;
}

.headerMetricContainer {
  @extend .flexLayout;
}

.headerMetricColumn {
  @extend .flexLayout;
  flex-direction: column;
}

.cardContainer {
  @extend .flexLayout;
}

.cardFooterContainer {
  gap: 8px;
}

.cardFooterContent {
  @extend .headerMetricColumn;
  gap: 4px;
}