:host {
  --tds-badge-background-color: var(--tds-red-400);
  --tds-badge-color-text: var(--tds-white);
  box-sizing: border-box;
  display: block;
}
:host * {
  box-sizing: border-box;
}

.tds-badge {
  display: block;
  border-radius: 12px;
  background-color: var(--tds-badge-background-color);
  text-align: center;
}
.tds-badge.tds-badge-sm {
  height: 8px;
  width: 8px;
  line-height: 8px;
}
.tds-badge.tds-badge-lg {
  height: 20px;
  line-height: 20px;
  width: 20px;
}
.tds-badge.tds-badge-pill {
  display: inline-block;
  width: unset;
  padding-left: 8px;
  padding-right: 8px;
}
.tds-badge.tds-badge-hidden {
  display: none;
}

.tds-badge-text {
  font-size: 12px;
  color: var(--tds-badge-color-text);
  font-weight: bold;
}