.badge {
  font: var(--grapes-body-m);
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: var(--grapes-unit-20);
  padding: 0 var(--grapes-unit-8);
  border-radius: var(--grapes-border-radius-12);
  box-sizing: border-box;

  &[data-variant='primary'] {
    background-color: var(--grapes-color-background-primary-selected);
    color: var(--grapes-color-content-selected);
  }

  &[data-variant='secondary'] {
    background: var(--grapes-color-background-secondary-default);
    color: var(--grapes-color-content-secondary-bg-secondary);
  }
}