$emoticons: jabber, jsxc, klaus, nextcloud, xmpp, owncloud;

[class*=jsxc-emoticon-] { //@REVIEW vs jsxc-emoticon
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 1em 1em;
  display: inline-block;
  height: 1em;
  line-height: normal;
  margin: -0.2ex 0.05em 0 0.1em;
  vertical-align: middle;
  width: 1em;
}

.jsxc-emoticon {
  background-size: contain;
  border: 0;
  display: inline-block;
  height: 19px;
  vertical-align: bottom;
  width: 19px;

  &--large {
    height: 40px;
    margin-bottom: 7px;
    width: 40px;

    #jsxc-roster & {
      height: 19px;
      width: 19px;
    }
  }

  @each $emoticon in $emoticons {
    &--#{$emoticon} {
      background-image: url("../images/emoticons/#{$emoticon}.svg");
    }
  }
}