.euiBadge {
  font-size: $euiSizeM;
  line-height: $euiSizeL;
  display: inline-block;
  text-decoration: none;
  border: solid 1px transparent;
  border-radius: $euiSizeL;
  padding: 0 $euiSizeS;
  background-color: transparent;
  white-space: nowrap;
  vertical-align: middle;

  .euiBadge__content {
    display: flex;
    align-items: center;
  }

  .euiBadge__icon {
    margin-right: $euiSizeXS;
  }

  &.euiBadge--iconRight .euiBadge__content {
    flex-direction: row-reverse;

    .euiBadge__icon {
      margin-left: $euiSizeXS;
      margin-right: 0;
    }
  }
}


// Modifier naming and colors.
$badgeTypes: (
  default: $euiColorLightShade,
  primary: $euiColorPrimary,
  secondary: $euiColorSecondary,
  warning: $euiColorWarning,
  danger: $euiColorDanger,
  accent: $euiColorAccent
);

@each $name, $color in $badgeTypes {
  .euiBadge--#{$name} {
    border-color: $color;
    background-color: transparentize($color, .9);
  }
}
