$chips-padding: $spacing-xs;
$chips-height: $size-s;
$chips-radius: $radius-button;
$chips-text-color: $color-control;
$chips-primary-background-color: $color-chipsprimary;
$chips-primary-border-color: $color-chipsprimary--lighten;
$chips-secondary-background-color: $color-chipssecondary;
$chips-secondary-border-color: $color-chipssecondary--lighten;

.chips {
  display: inline-flex;
  align-items: center;
  height: $chips-height;
  padding: 0 $chips-padding;
  border: 1px solid;
  border-radius: $chips-radius;
  @include font-control-smallbutton();
  color: $chips-text-color;

  &.chips--color-primary {
    background: $chips-primary-background-color;
    border-color: $chips-primary-border-color;
    color: $color-primary-text;
  }

  &.chips--color-secondary {
    background: $chips-secondary-background-color;
    border-color: $chips-secondary-border-color;
  }

  &.chips--color-bordered {
    background: $chips-secondary-background-color;
    border-color: $chips-primary-border-color;
  }
}