.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
  transition: all 150ms;
  color: #bfbfbf;
}

.badge i,
.badge img {
  width: 1.4em;
  height: 1.4em;
  margin-top: -99px;
  margin-bottom: -99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  object-fit: contain;
  border-radius: 2px;
  flex-shrink: 0;
}

.icon-center {
  height: 1.4em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.badge-sm {
  padding: 0px 3px;
  font-size: 11px;
}

.badge-md {
  padding: 3px 6px;
  font-size: 14px;
  font-weight: 700;
  gap: 6px;
}

a.badge {
  cursor: pointer;
}
a.badge:not([class*="text-"]) {
  color: #3b82f6;
  background: #222222;
}
a.badge:not([class*="bg-"]):hover {
  background: color-mix(in srgb, currentColor 20%, transparent);
  border-color: color-mix(in srgb, currentColor 30%, transparent);
}

button.badge {
  cursor: pointer;
}
button.badge:not([class*="text-"]) {
  color: #10b981;
}
button.badge:hover {
  transform: scale(1.05);
}
button.badge:active {
  transform: scale(0.95);
}