// Badge
.c-badge {
  @include badge-base();

  .c-avatar { // support avatar in badges
    @include avatar-size($badge-size);

    margin-right: $space-sm;
    margin-left: -($space-sm);

    img {
      border: 0;
    }

    i {
      padding: $space-0;
    }
  }

  // Badge Small
  &-sm {
    @include badge-size($badge-sm-size, $badge-sm-font-size);

    padding: $space-0 ($space-sm - 2);


    .c-avatar {
      @include avatar-size($badge-sm-size);

      margin-right: $space-xs;
      margin-left: -($space-xs);
    }

    .c-badge-close {
      margin-left: $space-xs;
      margin-right: -($space-sm - 2);
    }
  }

  // Badge Large
  &-lg {
    @include badge-size($badge-lg-size, $badge-lg-font-size);

    padding: $space-0 ($space-xs + $space-sm);

    .c-avatar {
      @include avatar-size($badge-lg-size);

      margin-right: $space-sm;
      margin-left: -($space-sm + $space-xs);
    }

    .c-badge-close {
      @include close-size(($badge-lg-size - 8), 3px);

      margin-right: -$space-sm;
    }
  }

  // Badge top
  &-top {
    vertical-align: top;
  }

  // Badge Square
  &-square {
    border-radius: $radius-sm;

    .c-avatar,
    .c-avatar img {
      border-radius: $radius-sm;
    }

    .c-badge-close {
      border-radius: $radius-sm;
    }
  }
}

// All default Badge color classes
@each $name, $hex in $theme-colors {
  .c-badge-#{$name} {
    @include badge-style($hex);
  }
}

// Extended Badge color classes
@if $enable-extended-badge-colors == true {
  @each $name, $hex in $extended-palette-light {
    .c-badge-#{$name} {
      @include badge-style($hex, $color-gray-9);

      .c-badge-close {
        @include close-style($style: "bg-light");
      }
    }
  }

  @each $name, $hex in $extended-palette {
    .c-badge-#{$name} {
      @include badge-style($hex);
    }
  }
}

.c-badge-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  .c-badge {
    margin-bottom: $badge-group-spacing;

    &:not(:last-child) {
      margin-right: $badge-group-spacing;
    }
  }
}