/// Badge
///
/// @group notifications
///
/// @example scss - usage
///
///   @include k-Badge;
///
/// @example html
///
///   <span class="k-Badge">42</span>

@mixin k-Badge {
  $color: map-get($k-colors, 'background-1');
  $background-color: map-get($k-colors, 'primary-1');

  .k-Badge {
    padding: k-px-to-rem(3px) k-px-to-rem(6px);
    background-color: $background-color;
    border-radius: k-px-to-rem(10px);
    color: $color;
    @include k-typographyFont('regular');
    @include k-typographyFontSize(-4, 1.2);
  }

  .k-Badge--spaced {
    margin: 0 k-px-to-rem(5px);
  }
}