@larva.io/webcomponents/dist/collection/components/internal/badge/badge.css

Fentrica SmartUnits WebComponents package

slot-fb[hidden], slot[hidden] {
  display: initial !important;
}

:host {
  border-radius: var(--lar-badge-border-radius, 0.2rem);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  padding: var(--lar-badge-padding-top, 0.15rem) var(--lar-badge-padding-right, 0.25rem) var(--lar-badge-padding-bottom, 0.15rem) var(--lar-badge-padding-left, 0.25rem);
  display: inline-block;
  line-height: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  contain: content;
  vertical-align: bottom;
}

:host(:empty) {
  display: none !important;
}

:host(.lar-color-primary) {
  background: var(--lar-color-primary, #780bb7) !important;
  color: var(--lar-color-primary-contrast, #fff) !important;
}

:host(.lar-color-secondary) {
  background: var(--lar-color-secondary, #7fb800) !important;
  color: var(--lar-color-secondary-contrast, #fff) !important;
}

:host(.lar-color-tertiary) {
  background: var(--lar-color-tertiary, #00a6ed) !important;
  color: var(--lar-color-tertiary-contrast, #fff) !important;
}

:host(.lar-color-success) {
  background: var(--lar-color-success, #7fb800) !important;
  color: var(--lar-color-success-contrast, #fff) !important;
}

:host(.lar-color-warning) {
  background: var(--lar-color-warning, #ffb400) !important;
  color: var(--lar-color-warning-contrast, #fff) !important;
}

:host(.lar-color-danger) {
  background: var(--lar-color-danger, #f6511d) !important;
  color: var(--lar-color-danger-contrast, #fff) !important;
}

:host(.lar-color-light) {
  background: var(--lar-color-light, #f4f5f8) !important;
  color: var(--lar-color-light-contrast, #000) !important;
}

:host(.lar-color-medium) {
  background: var(--lar-color-medium, #d6d6d6) !important;
  color: var(--lar-color-medium-contrast, #000) !important;
}

:host(.lar-color-dark) {
  background: var(--lar-color-dark, #222428) !important;
  color: var(--lar-color-dark-contrast, #fff) !important;
}