.badge {
  height: var(--height-badge);
  border-radius: var(--border-radius);
  font-size: var(--font-small);
  padding-right: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-s);
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  align-items: center;
}

.badge--tag {
  @extend .badge;
  background-color: var(--color-primary-alt);
  color: var(--color-primary);
}

.badge--tag-mature {
  @extend .badge;
  background-color: var(--color-tertiary-alt);
  color: var(--color-tertiary);
}

.badge--cost {
  @extend .badge;
  background-color: var(--color-warning);
  color: var(--color-black);
}

.badge--alert {
  @extend .badge;
  background-color: var(--color-danger-alt);
  color: var(--color-danger);
}