@use "../../foundations/helpers/forward.helpers.scss" as *;

$ds-badge__min-size: 8px;

.ds-badge {
  display: inline-flex;
  box-sizing: content-box;

  .ds-badge__inner {
    background-color: $ds-color-surface-brand;
    border: $ds-color-border-primaryinvert-strongest ds-border-width(xs) solid;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: ds-px-to-rem($ds-badge__min-size);
    min-width: ds-px-to-rem($ds-badge__min-size);
    padding: ds-spacing($ds-s-025, rem);
    @include ds-typography($ds-typography-functional-meta-md, $lineHeight: 0, $fontWeight: $ds-fontweight-semibold) {
      color: $ds-color-neutral-white;
    }
    @at-root .ds-force-px#{&} {
      min-height: $ds-badge__min-size;
      min-width: $ds-badge__min-size;
      padding: ds-spacing($ds-s-025);
      @include ds-typography(
        $ds-typography-functional-meta-md,
        $forcePx: true,
        $lineHeight: 0,
        $fontWeight: $ds-fontweight-semibold
      );
    }
  }

  &.ds-badge--empty .ds-badge__inner {
    padding: 0;
  }
}