/// Icon Badge
///
/// @group notifications
///
/// @example scss - usage
///
///   @include k-IconBadge;
///
/// @example html
///
///   <span class="k-IconBadge">
///     <span class="k-IconBadge__content">A</span>
///   </span>

@mixin k-IconBadge {
  $font: 'regular';
  $font-step: -2; // 12px.
  $color: map-get($k-colors, 'background-1');
  $background-color: map-get($k-colors, 'primary-1');
  $size: k-px-to-rem(30px);
  $content-size: k-px-to-rem(11px);

  .k-IconBadge {
    display: flex;
    justify-content: center;
    align-items: center;

    min-width: $size;
    min-height: $size;
    padding: 0;
    border-radius: $size;
    background-color: $background-color;
  }

  .k-IconBadge__content {
    flex-basis: $content-size;
    fill: $color;
    color: $color;
    text-align: center;
    @include k-typographyFont($font);
    @include k-typographyFontSize($font-step, 0);
  }

  .k-IconBadge__svg {
    display: block;
    margin: 0;
    padding: 0;
    width: $content-size;
    height: $content-size;
  }
}