@import 'settings';

@mixin vf-p-badge {
  %vf-badge {
    @extend %x-small-text;
    background-color: $colors--theme--text-default; // inverse the theme by using the text color
    border-radius: 1rem;
    box-sizing: content-box;
    color: $colors--theme--background-default; // inverse the theme by using the baackground color
    margin-bottom: 0;
    max-width: 4ch;
    overflow: hidden;
    padding: 0 $spv--x-small;
  }

  .p-badge,
  .p-badge--negative {
    @extend %vf-badge;
  }

  .p-badge--negative {
    background-color: $colors--theme--button-negative-default;
    color: $colors--theme--button-negative-text;
  }

  .p-chip,
  [class*='p-chip--'] {
    .p-badge,
    .p-badge--negative {
      align-self: center;
      margin-left: $sph--small;
      margin-right: -0.15rem;
    }
  }
}