.message {
	.reactions {
		padding: 0;
		margin-top: 4px;

		> li {
			cursor: pointer;
			position: relative;
			height: 22px;
			line-height: 20px;
			display: inline-block;
			border-radius: 5px;
			border: 1px solid #e7e7e7;
			background-color: #fcfcfc;
			padding: 0 4px 0 2px;
			color: #aaaaaa;

			.reaction-emoji {
				.emoji,
				.emojione {
					min-width: 16px;
					min-height: 16px;
					width: 16px;
					height: 16px;
					margin: -0.2ex 0.15em 0.2ex;
				}
			}

			.people {
				display: none;
			}

			.reaction-count {
				font-size: 0.65rem;
				margin-left: -3px;
				top: -1px;
				position: relative;

				html.rtl & {
					margin-right: -3px;
					margin-left: auto;
				}
			}

			&.add-reaction {
				visibility: hidden;
				margin-left: 10px;
				color: #888888;
				opacity: 0;
				padding: 0 2px;
				transition: opacity 0.2s ease;

				html.rtl & {
					margin-right: 10px;
					margin-left: 0;
				}
			}

			&:hover {
				border-color: #4fb0fc;
			}

			&.selected {
				border-color: #bde1fe;
				background-color: #f3f9ff;
				color: #4fb0fc;
			}
		}

		&:hover {
			> li.add-reaction {
				visibility: visible;
				opacity: 1;
			}
		}
	}
}
