@use "sass:math";

@mixin suiBadgeColor (
  $background: $sui-color-brand-denim-300,
  $border-color: $background,
  $color: contrast($background),
  $color-as-text: $background
) {
  color: $color;
  background: $background;
  box-shadow: inset 0 0 0 $sui-size-border $border-color;

  &.as--text {
    color: $color-as-text;
  }
}

%suBadgeBase {
  display: inline-block;
  vertical-align: middle;
  padding: rem(7) rem(12) rem(6);
  margin-top: -.3em;
  font-size: $sui-font-size-xs;
  line-height: 1;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  border-radius: $sui-border-radius-rounded;
  font-family: $sui-font-family-primary;

  html body &.as--text {
    box-shadow: none;
    background: none;
    padding: 0;
  }

  &.as--start {
    margin-right: .5em;
  }

  &.as--between {
    margin-left: .5em;
    margin-right: .5em;
  }

  &.as--end {
    margin-left: .5em;
  }

  // -------------------------
  //    Sizes
  // -------------------------
  &.as--xs {
    padding: math.div($sui-space-sm, 3) $sui-space-sm;
    font-size: $sui-font-size-xxs;
  }

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

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

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