.euiStat {
    // Modifier naming and colors.
    $titleColors: (
      subdued: $euiTextSubduedColor,
      primary: $euiColorPrimaryText,
      secondary: $euiColorSecondaryText,
      danger: $euiColorDangerText,
      accent: $euiColorAccentText,
    );
  
    .euiStat__title {
      color: $euiColorFullShade;
  
      // Create color classes based upon the map.
      @each $name, $color in $titleColors {
        &--#{$name} {
          color: $color;
        }
      }
    }
  
    .euiStat__title-isLoading {
      animation: euiStatPulse 1.5s infinite ease-in-out;
    }
  
    .euiStat__description {
      color: map-get($titleColors, dark);
    }
  
    &.euiStat--leftAligned {
      text-align: left;
      align-items: flex-start;
    }
  
    &.euiStat--centerAligned {
      text-align: center;
      align-items: center;
    }
  
    &.euiStat--rightAligned {
      text-align: right;
      align-items: flex-end;
    }
  }
  
  @keyframes euiStatPulse {
    0% { opacity: 1; }
    50% { opacity: .25; }
    100% { opacity: 1; }
  }