rocketchat_ynh/sources/programs/server/assets/packages/rocketchat_emojione/emojiPicker.less

.emoji-picker-icon {
	cursor: pointer;

	font-size: 18px;
	color: @info-font-color;

	&:before {
		.transition(transform 0.2s ease);
	}
	&:hover {
		&:before {
			.transform(scale(1.2));
		}
	}
}
.emoji-picker {
	width: 100%;
	max-width: 365px;
	background-color: @secondary-background-color;
	border-radius: 5px;
	box-shadow: 0px 1px 1px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0,0,0,.16);
	position: absolute;
	z-index: 200;

	.transition(transform 0.2s ease, visibility 0.2s ease, opacity 0.2s ease);

	.transform(translateY(30px));
	opacity: 0;
	visibility: hidden;

	&.show {
		.transform(translateY(0px));
		opacity: 1;
		display: block;
		visibility: visible;
	}

	.filter {
		text-align: center;
		box-shadow: 0px 2px 2px -1px rgba(0,0,0,0.2);

		> ul {
			display: table;
			width: 100%;

			> li {
				display: table-cell;
				margin: 0 2px;
				padding: 6px 0;

				border-bottom: 2px solid @secondary-background-color;

				.category-link {
					i {
						color: @info-font-color;
						font-size: 24px;
					}
				}

				&:hover {
					border-bottom: 2px solid @info-font-color;
				}

				&.active {
					border-bottom: 2px solid @primary-background-color;
				}

				&.change-tone {
					opacity: 1;
					border-bottom: 2px solid transparent;

					> a {
						position: relative;
						z-index: 10;
					}

					.current-tone {
						display: inline-block;
						width: 20px;
						height: 20px;
						border-radius: 10px;
					}

					.tone-selector {
						position: absolute;
						background-color: @secondary-background-color;
						border-radius: 4px;
						box-shadow: 0px 1px 1px 0 rgba(0,0,0,0.2), 0 2px 10px 0 rgba(0,0,0,.16);

						padding: 4px 2px;
						margin-left: -4px;
						z-index: 8;

						.transition(transform 0.2s ease, visibility 0.2s ease, opacity 0.2s ease);

						.transform(translateY(-20px));
						opacity: 0;
						visibility: hidden;

						&.show {
							.transform(translateY(0px));
							opacity: 1;
							display: block;
							visibility: visible;
						}

						li {
							display: block;
							padding: 0 4px;
						}

						span {
							display: inline-block;
							width: 20px;
							height: 20px;
							border-radius: 10px;

							.transition(transform 0.2s ease);
						}
					}

					.tone-0 {
						background-color: #ffcf11;
					}

					.tone-1 {
						background-color: #fae3c3;
					}

					.tone-2 {
						background-color: #e2cfa1;
					}

					.tone-3 {
						background-color: #dba373;
					}

					.tone-4 {
						background-color: #a88054;
					}

					.tone-5 {
						background-color: #5f4e43;
					}
				}
			}
		}
	}

	.emojis {
		height: 160px;
		overflow-y: auto;
		padding: 3px 0px 0px 2px;

		.custom-scroll(transparent, #DDD);
		.emoji-list {
			display: none;

			li {
				display: inline-block;
				margin: 2px;
				padding: 4px 2px 2px 2px;
				border-radius: 4px;
				cursor: pointer;

				.transition(transform 0.2s ease);

				&:hover {
					.transform(scale(1.2));
					background-color: #DDD;
				}
			}

			&.visible {
				display: block;
			}
		}
	}
}