Rocket.Chat/packages/rocketchat-emoji/emojiPicker.less

@import "lesshat.less";

.emoji-picker-icon {
	cursor: pointer;
	font-size: 18px;

	&::before {
		transition: transform 0.2s ease;
	}

	&:hover {
		&::before {
			.transform(scale(1.2));
		}
	}
}

.emoji-picker {
	width: 100%;
	max-width: 365px;
	border-radius: 5px;
	box-shadow:
		0 1px 1px 0 rgba(0, 0, 0, 0.2),
		0 2px 10px 0 rgba(0, 0, 0, 0.16);
	position: absolute;
	display: none;

	&.show {
		display: block;
	}

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

	.filter-list {
		display: flex;
		width: 100%;
		padding: 0 5px;
	}

	.filter-item {
		padding: 6px 0;
		border-style: solid;
		border-width: 0 0 2px;
		display: flex;
		justify-content: center;
		flex-grow: 1;

		.category-icon {
			font-size: 20px;
		}
	}

	.current-category-header {
		padding: 3px 5px;
	}

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

		.emoji-list {
			display: none;

			li {
				display: inline-block;
				margin: 2px;
				padding: 4px 2px 2px;
				border-radius: 4px;
				cursor: pointer;
				transition: transform 0.2s ease;

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

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

.emoji-top {
	display: flex;
	align-items: center;
	padding: 5px;

	.emoji-filter {
		width: 90%;
		margin-bottom: 0;
	}

	.change-tone {
		width: 10%;
		display: flex;
		justify-content: center;
		position: relative;

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

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

		.tone-selector {
			position: absolute;
			border-radius: 4px;
			box-shadow:
				0 1px 1px 0 rgba(0, 0, 0, 0.2),
				0 2px 10px 0 rgba(0, 0, 0, 0.16);
			padding: 4px 2px;
			top: 25px;
			z-index: 1;
			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;
		}
	}
}