@import "../../helpers";
.sf-badge {
  display: inline-block;
  box-sizing: border-box;
  width: var(--badge-width);
  min-width: var(--badge-min-width);
  height: var(--badge-height);
  min-height: var(--badge-min-height);
  padding: var(--badge-padding, var(--spacer-xs) var(--spacer-sm));
  background: var(--badge-background, var(--c-primary));
  border: var(--badge-border);
  border-radius: var(--badge-border-radius);
  color: var(--badge-color, var(--c-white));
  text-align: var(--badge-text-align, center);
  @include font(
    --badge-font,
    var(--font-weight--semibold),
    var(--font-size--xs),
    1.6,
    var(--font-family--secondary)
  );
  &--full-width {
    --badge-width: 100%;
  }
  &--number {
    --badge-min-width: 1.25rem;
    --badge-min-height: 1.25rem;
    --badge-padding: 2px var(--spacer-2xs);
    --badge-border-radius: calc(var(--badge-line-height) * 1rem);
    --badge-background: var(--c-danger);
    --badge-font-size: var(--font-size--xs);
    --badge-line-height: 1;
    --badge-font-family: var(--font-family--primary);
  }
  @each $color, $map in $colors-map {
    $primary: map-get($map, "primary");
    &.color-#{$color} {
      --badge-background: #{$primary};
    }
  }
  @include for-desktop {
    &--number {
      --badge-padding: 1px var(--spacer-2xs);
    }
  }
}