.article-tag-chip {
  --_chip-size: var(--chip-size, 36px);
  --_chip-icon-size: var(--chip-icon-size, 24px);
  --_chip-font: var(--chip-font, var(--typography-body-medium));
  --icon-wrapper-width: var(--chip-icon-size);
  --_chip-background: var(--chip-background, var(--color-primary));
  --chip-on-background: var(--color-on-primary);

  display: inline-flex;
  gap: var(--spacing-xxs);
  line-height: 1;
  height: var(--_chip-size);
  background: var(--_chip-background);
  color: var(--chip-on-background);
  border-radius: var(--_chip-size);
  padding-inline: var(--spacing-sm);
  align-items: center;
  font: var(--_chip-font);
  font-weight: 500;
}

.article-tag-chip__counter {
  font: var(--typography-label-small);
  font-weight: 700;
  border-radius: var(--_chip-size);
  background: color-mix(in srgb, var(--_chip-background), white 90%);
  color: var(--_chip-background);
  height: var(--_chip-icon-size);
  width: var(--_chip-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: var(--spacing-xxs);
}