.sui-a-badge {
  @extend %suBadgeBase;

  @include suiBadgeColor(
    $color-as-text: $sui-color-text-light,
    $border-color: transparent
  );

  // -------------------------
  //    Colors
  // -------------------------
  &.as--primary {
    @include suiBadgeColor(
      $background: $sui-color-primary,
      $border-color: transparent
    );
  }

  &.as--secondary {
    @include suiBadgeColor(
      $color: $sui-color-primary,
      $background: white,
      $border-color: $sui-color-primary,
      $color-as-text: $sui-color-text
    );
  }

  &.as--tertiary {
    @include suiBadgeColor(
      $color: $sui-color-brand-denim,
      $background: transparent,
      $border-color: $sui-color-brand-denim,
      $color-as-text: $sui-color-brand-denim
    );
  }

  &.as--new {
    @include suiBadgeColor(
      $background: $sui-color-heliotrope,
      $border-color: transparent
    );
  }

  &.as--newtwo {
    @include suiBadgeColor(
      $background: #F3EFFA,
      $color: #6B44C5,
      $border-color: transparent
    );
  }

  // -------------------------
  //    Sizes
  // -------------------------
  &.as--xs {
    padding: $sui-space-xxs*0.5 $sui-space-xxs;
    font-size: $sui-font-size-xxs;
  }

  &.as--sm {
    font-size: $sui-font-size-xxs;
  }

  &.as--lg {
    font-size: $sui-font-size-sm;
    font-weight: 600;
    text-transform: none;
  }

  &.as--xl {
    font-size: $sui-font-size-md;
    font-weight: 600;
    text-transform: none;
  }
}