.x-badge {
  white-space: nowrap;
  font-family: var(--default-font-family);
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
  align-items: center;
  height: fit-content;
  font-style: normal;
  line-height: 1;
  display: inline-flex;
}

.x-badge:where([data-size="1"]) {
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  letter-spacing: var(--letter-spacing-1);
  padding: calc(var(--space-1) * .5) calc(var(--space-1) * 1.5);
  gap: calc(var(--space-1) * 1.5);
  border-radius: max(var(--radius-1), var(--radius-pill));
}

.x-badge:where([data-size="2"], :not([data-size])) {
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  letter-spacing: var(--letter-spacing-1);
  padding: var(--space-1) var(--space-2);
  gap: calc(var(--space-1) * 1.5);
  border-radius: max(var(--radius-2), var(--radius-pill));
}

.x-badge:where([data-size="3"]) {
  font-size: var(--font-size-2);
  line-height: var(--line-height-2);
  letter-spacing: var(--letter-spacing-2);
  padding: var(--space-1) calc(var(--space-2) * 1.25);
  gap: var(--space-2);
  border-radius: max(var(--radius-2), var(--radius-pill));
}

.x-badge:where(:not([data-variant]), [data-variant="solid"]) {
  background-color: var(--accent-9);
  color: var(--accent-contrast);
}

.x-badge:where(:not([data-variant]), [data-variant="solid"])::selection {
  background-color: var(--accent-7);
  color: var(--accent-12);
}

.x-badge:where(:not([data-variant]), [data-variant="solid"]):where([data-high-contrast]) {
  background-color: var(--accent-12);
  color: var(--accent-1);
}

.x-badge:where(:not([data-variant]), [data-variant="solid"]):where([data-high-contrast])::selection {
  background-color: var(--accent-a11);
  color: var(--accent-1);
}

.x-badge:where([data-variant="surface"]) {
  background-color: var(--accent-surface);
  box-shadow: inset 0 0 0 1px var(--accent-a6);
  color: var(--accent-a11);
}

.x-badge:where([data-variant="surface"]):where([data-high-contrast]) {
  color: var(--accent-12);
}

.x-badge:where([data-variant="soft"]) {
  background-color: var(--accent-a3);
  color: var(--accent-a11);
}

.x-badge:where([data-variant="soft"]):where([data-high-contrast]) {
  color: var(--accent-12);
}

.x-badge:where([data-variant="outline"]) {
  box-shadow: inset 0 0 0 1px var(--accent-a8);
  color: var(--accent-a11);
}

.x-badge:where([data-variant="outline"]):where([data-high-contrast]) {
  box-shadow: inset 0 0 0 1px var(--accent-a7),
      inset 0 0 0 1px var(--neutral-a11);
  color: var(--accent-12);
}