.aura-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  font-size: var(--aura-font-size-s);
  font-weight: var(--aura-font-weight-medium);
  height: calc(1lh - 2px);
  border: 1px solid var(--aura-accent-border-color);
  background: var(--aura-accent-surface) padding-box;
  background-clip: padding-box;
  color: var(--aura-accent-text-color);
  padding: 0 0.5em;
  border-radius: var(--vaadin-radius-l);
  min-width: calc(1lh - 1em - 2px);
  --vaadin-icon-size: 0.75lh;
}

.aura-badge.aura-badge-filled {
  background: var(--aura-accent-color);
  color: var(--aura-accent-contrast-color);
}

/* Special case for filled badges within filled variants */

/* TODO is there a way to solve this without explicitly listing the special cases */

:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'],
vaadin-tabs[theme~='filled'] > vaadin-tab[selected],
vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current] {
  > .aura-badge-filled:not(
      .aura-accent-red,
      .aura-accent-orange,
      .aura-accent-yellow,
      .aura-accent-green,
      .aura-accent-blue,
      .aura-accent-purple
    ) {
    border-color: transparent;
    background: var(--aura-accent-contrast-color);
    color: var(--aura-accent-color);
  }
}

.aura-badge.aura-badge-point::before {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
}