.chip {
  // local variables.
  $_chip-size: $chip-height;

  display: inline-flex;
  align-items: center;
  height: $chip-height;
  padding: 0 $_chip-size / 2;
  margin-right: $_chip-size / 4;
  margin-bottom: $_chip-size / 4;
  font-size: $chip-font-size;
  line-height: strip-unit($_chip-size);
  vertical-align: middle;
  background-color: $chip-bg-color;
  @include border-radius($_chip-size);

  img {
    width: $_chip-size;
    height: $_chip-size;
    margin-right: $_chip-size / 4;
    margin-left: -$_chip-size / 2;
    @include border-radius(50%);
  }

  .close-button {
    margin-right: -$space-1;
    margin-left: $space-1;
    font-size: 1.2em;
  }
}

a.chip {
  @include no-decoration;
  color: inherit;
  @include transition(box-shadow $transition-duration $transition-timing-function);

  &:hover,
  &:focus {
    @include box-shadow($box-shadow-sm);
  }
}