@use './typo';

@mixin badge {
  @include typo.text-xxs--bold;

  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--sbb-spacing-fixed-1x);
  border-radius: var(--sbb-border-radius-infinity);
  background-color: var(--sbb-color-primary);
  color: var(--sbb-color-1-negative);
  min-width: var(--sbb-spacing-fixed-4x);
  max-height: var(--sbb-spacing-fixed-4x);

  // Transparent outline is visible in forced colors mode to ensure readability
  outline: var(--sbb-border-width-1x) solid transparent;
}

@mixin badge-attribute {
  [sbb-badge] {
    --sbb-badge-position-offset: calc(var(--sbb-spacing-fixed-2x) * -1);

    position: relative;

    &::after {
      @include badge;

      content: attr(sbb-badge);
      position: absolute;
      inset-block-start: var(--sbb-badge-position-offset);
    }

    &:where([sbb-badge-position='before'])::after {
      inset-inline-start: var(--sbb-badge-position-offset);
    }

    &:where(:not([sbb-badge-position]), [sbb-badge-position='after'])::after {
      inset-inline-end: var(--sbb-badge-position-offset);
    }
  }
}