consul/ui-v2/app/styles/components/pill.scss

%pill-allow:before,
%pill-deny:before,
%pill-l7:before {
  @extend %as-pseudo;
  margin-right: 5px;
  font-size: 0.9em;
}
%pill-allow {
  color: $green-800;
  background-color: $green-100;
}
%pill-allow::before {
  @extend %with-arrow-right-color-mask;
}
%pill-deny {
  color: $red-800;
  background-color: $red-100;
}
%pill-deny::before {
  @extend %with-deny-color-mask;
}
%pill-l7 {
  @extend %frame-gray-900;
}
%pill-l7::before {
  @extend %with-layers-mask;
}
td strong {
  @extend %pill, %frame-gray-900;
  margin-right: 3px;
}

span.policy-service-identity,
span.policy-node-identity,
.consul-external-source,
.consul-kind,
.leader {
  @extend %reduced-pill;
}
span.policy-service-identity::before,
span.policy-node-identity::before {
  display: inline-block;
  width: auto;
  vertical-align: baseline;
}
span.policy-node-identity::before {
  content: 'Node Identity: ';
}
span.policy-service-identity::before {
  content: 'Service Identity: ';
}