vaadin-badge {
  color: var(--vaadin-badge-text-color, var(--aura-accent-text-color));
  background: var(--vaadin-badge-background, var(--aura-accent-surface) padding-box);
  border-color: var(--vaadin-badge-border-color, var(--aura-accent-border-color));
  font-size: var(--vaadin-badge-font-size, var(--aura-font-size-s));
  --aura-surface-level: 1;
}

vaadin-badge:is([theme~='filled'], [theme~='dot']) {
  background: var(--aura-accent-color);
  color: var(--aura-accent-contrast-color);
}

/* Inside filled component variants, increase the opacity of default badge variants so that they retain their color */
:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'] > *,
vaadin-tabs[theme~='filled'] > vaadin-tab[selected] > :not([slot='tooltip']),
vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current] > :not([slot='children']):not([slot='tooltip']),
:is(
    vaadin-combo-box-item,
    vaadin-context-menu-item,
    vaadin-item,
    vaadin-menu-bar-item,
    vaadin-multi-select-combo-box-item,
    vaadin-select-item[role]
  )[theme~='filled']:not([disabled], [aria-disabled='true']):hover
  > vaadin-badge {
  --vaadin-icon-color: currentColor;
  --aura-surface-opacity: 1;
  --aura-surface-level: 3;

  /* Badges that are not explicitly colored (i.e. default/inherited accent color and neutral accent color) inherit their color from the parent container */
  &:not(
    .aura-accent-color,
    .aura-accent-red,
    .aura-accent-orange,
    .aura-accent-yellow,
    .aura-accent-green,
    .aura-accent-blue,
    .aura-accent-purple,
    [theme~='info'],
    [theme~='success'],
    [theme~='warning'],
    [theme~='error']
  ) {
    --aura-surface-opacity: 0.5;
    --aura-surface-level: 1;
    --aura-accent-text-color: currentColor;
    --aura-accent-border-color: color-mix(in srgb, currentColor 30%, transparent);
    --aura-accent-surface: color-mix(in srgb, currentColor 10%, transparent);

    /* Invert the colors of filled, non-explicitly colored badges */
    &[theme~='filled'] {
      background: var(--aura-accent-contrast-color);
      color: var(--aura-accent-color);
      border-color: transparent;
    }
  }
}