@import "ui-variables";
@import "ui-mixins";

.contact-chip {
  padding-right: 6px;
  white-space: nowrap;

  .contact-img {
    border-radius: 50%;
    margin-top: -2px;
    margin-right: 3px;
    height: 14px;
    width: 14px;
  }
}

.contact-chip.clickable:hover {
  cursor: pointer;
  border-radius: 9px;
  background: darken(@background-color-secondary, 10%);
}

.contact-chip:not(:last-child) {
  &:after {
    content: ',';
    display: inline;
  }
}