@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 background color
    display: inline-block;
    margin-bottom: 0;
    max-width: 4ch;
    // the minimum content width should be the total desired width (the line-height)
    // minus the space already taken up by the left and right padding
    // Makes the shortest badge a perfect circle and keeps it related to line-height (of %x-small-text) and padding (below)
    min-width: map-get($settings-text-x-small, line-height) - (2 * $spv--x-small);
    overflow: hidden;
    padding: 0 $spv--x-small;
    text-align: center;
    text-indent: 0;
  }

  .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;
    }
  }
}