@use 'sass:map';
@use '../utils/tokens.scss';
@use '../utils/constants.scss';
@use './badge.vars.scss' as vars;

@import '@viasat/beam-tokens/components/Badge';

$badgeSizes: (
  'sm': (
    'height': tokens.$bm-comp-badge-size-sm-height,
    'font': tokens.$bm-comp-badge-typo-sm,
  ),
  'md': (
    'height': tokens.$bm-comp-badge-size-md-height,
    'font': tokens.$bm-comp-badge-typo-md,
  ),
);

$badgeBaseClass: '#{constants.$prefix}badge';

.#{$badgeBaseClass} {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: tokens.$bm-comp-badge-radius;
  padding-left: tokens.$bm-comp-badge-space-x;
  padding-right: tokens.$bm-comp-badge-space-x;
  max-width: -moz-fit-content;
  width: fit-content;
  gap: tokens.$bm-comp-badge-space-gap;
  box-shadow: tokens.$bm-comp-badge-shadow;

  &__icon {
    width: tokens.$bm-comp-badge-size-icon;
    height: tokens.$bm-comp-badge-size-icon;
    transform: translate3d(0, 0, 0);
  }

  &__label {
    text-wrap: nowrap;
  }

  // Generate sizes modifiers
  // ex. .badge--sm
  @each $sizeName, $sizeStyles in $badgeSizes {
    &--#{$sizeName} {
      height: map.get($sizeStyles, 'height');
      font: map.get($sizeStyles, 'font');
    }
  }

  // Generate appearance × emphasis modifier classes from the shared color map.
  // ex. .bm-badge--infoPrimary-strong
  @each $appearance-name, $emphases in vars.$badgeColors {
    @each $emphasis-name, $c in $emphases {
      &--#{$appearance-name}-#{$emphasis-name} {
        background-color: map.get($c, bg);
        color: map.get($c, fg);
        border: tokens.$bm-comp-badge-border-width solid map.get($c, border);
      }
    }
  }
}