/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

.ouiStat {
  // Modifier naming and colors.
  $titleColors: (
    subdued: $ouiTextSubduedColor,
    primary: $ouiColorPrimaryText,
    secondary: $ouiColorSecondaryText,
    success: $ouiColorSuccessText,
    danger: $ouiColorDangerText,
    accent: $ouiColorAccentText,
  );

  .ouiStat__title {
    color: $ouiColorFullShade;

    // Create color classes based upon the map.
    @each $name, $color in $titleColors {
      &--#{$name} {
        color: $color;
      }
    }
  }

  .ouiStat__title-isLoading {
    animation: ouiStatPulse 1.5s infinite ease-in-out;
  }

  .ouiStat__description {
    color: map-get($titleColors, dark);
  }

  &.ouiStat--leftAligned {
    text-align: left;
    align-items: flex-start;
  }

  &.ouiStat--centerAligned {
    text-align: center;
    align-items: center;
  }

  &.ouiStat--rightAligned {
    text-align: right;
    align-items: flex-end;
  }
}

@keyframes ouiStatPulse {
  0% { opacity: 1; }
  50% { opacity: .25; }
  100% { opacity: 1; }
}