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