nts-chip {
  @include border-radius;

  background-color: $color-grey-medium;
  font-size: $font-small;
  padding: $basic-padding / 10 $basic-padding / 5;

  &.primary{ background-color: $color-primary; color: white; .icon, .remove{ @include invert; } }
  &.success{ background-color: $color-success; color: white; .icon, .remove{ @include invert; } }
  &.warning{ background-color: $color-warning; color: white; .icon, .remove{ @include invert; } }
  &.error{ background-color: $color-error; color: white; .icon, .remove{ @include invert; } }

  .icon {
    margin-right: $basic-padding / 6;
  }
  .label {
    line-height: 1;
  }

  .remove {
    margin-left: $basic-padding / 6;
    opacity: 0.5;
    &:hover {
      opacity: 1;
    }
  }
}