[class*="fizz-chip"] {
  background-color: $color-gray-100;
  font-size: $text-medium-font-size;
  line-height: $text-medium-line-height;
  padding: $spacing-4 $spacing-12;
  border: $border-width-thin solid transparent;
  border-radius: $border-radius-xlarge;
  display: flex;
  align-items: center;
  gap: $spacing-4;
  white-space: nowrap;
}

[class*="fizz-chip"] span + svg {
  position: relative;
  left: $spacing-4;
}

[class*="fizz-chip"]:not(.fizz-surface-inverse):hover {
  background-color: $color-background-inactive;
}

[class*="fizz-chip"]:focus {
  outline: none;
  border-color: $color-border-brand-secondary;
  box-shadow: $box-shadow-input-focus;
}