open-consul/ui/packages/consul-ui/app/components/consul/intention/components.scss

%pill-allow::before,
%pill-deny::before,
%pill-l7::before {
  margin-right: 5px;
}
%pill-allow,
%pill-deny,
%pill-l7 {
  display: inline-block;
  font-weight: var(--typo-weight-normal);
  font-size: var(--typo-size-600);
}
%pill-allow {
  color: var(--token-color-foreground-success-on-surface);
  background-color: var(--token-color-border-success);
}
%pill-deny {
  color: var(--token-color-foreground-critical-on-surface);
  background-color: var(--token-color-border-critical);
}
%pill-l7 {
  @extend %frame-gray-900;
}
%pill-allow::before {
  @extend %with-allow-300;
}
%pill-deny::before {
  @extend %with-deny-300;
}
%pill-l7::before {
  @extend %with-l7-300;
}