.badge {
  --badge-font-size: 12px;
  --badge-height: 24px;
  --badge-padding-x: 10px;
  --badge-color: #fff;
  --badge-bg-color: #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 9999px;
  font-weight: 500;
  text-transform: capitalize;
  white-space: nowrap;
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--badge-color);
  background-color: var(--badge-bg-color);
  font-size: var(--badge-font-size);
  height: var(--badge-height);
  padding: 0 var(--badge-padding-x);
}

.sm {
  --badge-font-size: 11px;
  --badge-height: 20px;
  --badge-padding-x: 6px;
  --badge-icon-size: 11px;
  --badge-icon-spacing: 2px;
}

.md {
  --badge-font-size: 12px;
  --badge-height: 24px;
  --badge-padding-x: 10px;
  --badge-icon-size: 14px;
  --badge-icon-spacing: 4px;
}

.lg {
  --badge-font-size: 14px;
  --badge-height: 32px;
  --badge-padding-x: 12px;
  --badge-icon-size: 16px;
  --badge-icon-spacing: 6px;
}

.numerical {
  min-width: var(--geist-space-6x);
}

.pill {
  --badge-color: var(--geist-foreground);
  --badge-bg-color: var(--geist-background);
  box-shadow: inset 0 0 0 1px var(--ds-gray-alpha-400);
  padding: 2px 6px;
}

.amber {
  --badge-color: #000;
  --badge-bg-color: var(--ds-amber-700);
}

.amber-subtle {
  --badge-bg-color: var(--ds-amber-200);
  --badge-color: var(--ds-amber-900);
}

.blue {
  --badge-bg-color: var(--ds-blue-700);
  --badge-color: var(--ds-background-100);
}

.blue-subtle {
  --badge-bg-color: var(--ds-blue-200);
  --badge-color: var(--ds-blue-900);
}

.pink {
  --badge-bg-color: var(--ds-pink-700);
  --badge-color: var(--ds-background-100);
}

.pink-subtle {
  --badge-bg-color: var(--ds-pink-200);
  --badge-color: var(--ds-pink-900);
}

.green {
  --badge-bg-color: var(--ds-green-700);
  --badge-color: var(--ds-background-100);
}

.green-subtle {
  --badge-bg-color: var(--ds-green-200);
  --badge-color: var(--ds-green-900);
}

.purple {
  --badge-bg-color: var(--ds-purple-700);
  --badge-color: var(--ds-background-100);
}

.purple-subtle {
  --badge-bg-color: var(--ds-purple-200);
  --badge-color: var(--ds-purple-900);
}

.red {
  --badge-bg-color: var(--ds-red-700);
  --badge-color: var(--ds-background-100);
}

.red-subtle {
  --badge-bg-color: var(--ds-red-200);
  --badge-color: var(--ds-red-900);
}

.gray {
  --badge-bg-color: var(--ds-gray-700);
  --badge-color: var(--ds-background-100);
}

.gray-subtle {
  --badge-bg-color: var(--ds-gray-200);
  --badge-color: var(--ds-gray-1000);
}

.trial {
  color: #fff;
  background: linear-gradient(135deg, #0070f3, #f81ce5);
}

.turbo {
  background: linear-gradient(135deg, #ff1e56, #0096ff);
  color: #fff;
}

.iconContainer svg {
  display: block;
  height: var(--badge-icon-size);
  width: var(--badge-icon-size);
  stroke-width: 1.5;
}

.contentContainer {
  display: flex;
  align-items: center;
  gap: var(--badge-icon-spacing);
}