.smilie
{
	vertical-align: text-bottom;
	max-width: none;

	&.smilie--emoji
	{
		width: 1.467em;
	}

	&.is-clicked
	{
		transform: rotate(45deg);
		transition: all 0.25s;
	}
}

.contentRow-figure--emoji
{
	.smilie.smilie--emoji
	{
		width: 22px;
	}

	img
	{
		max-width: 24px;
		max-height: 24px;
		vertical-align: top;
	}
}

<xf:if is="$smilieSprites">
	<xf:foreach loop="$smilieSprites" key="$smilieId" value="$smilieSprite">
		<xf:if is="$smilieSprite.sprite_css">
			.smilie--sprite.smilie--sprite{$smilieId}
			{
				{$smilieSprite.sprite_css|raw}
			}
		</xf:if>
	</xf:foreach>
</xf:if>