How to override Bootstrap badge color

Html structure

td.sm-down-hidden
  - if payment?
    span.badge.badge-pill.badge-payment--verified = 'verified'
  - else
    span.badge.badge-pill.badge-payment--pending = 'pending'

What does not work

.badge-payment {
  &--verified {
    background: $verified-background;
    color: $verified-color;
  }

  &--pending {
    background: $pending-background;
    color: $pending-color;
  }
}

What work

.badge-pill {
  &.badge-payment {
    &--verified {
      background: $verified-background;
      color: $verified-color;
    }

    &--pending {
      background: $pending-background;
      color: $pending-color;
    }
  }
}

What is BEM? #

https://css-tricks.com/bem-101/

What are the Building Blocks? #

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance