.carta-emoji {
	--background: #fafafa;
	--group-color: #3b3b3b;
	--title-color: #232323;
	--description-color: #313030;
	--contrast-background: #f1f1f1;
	--hover-background: #e3e1e1;

	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;

	width: 19rem;
	max-height: 14rem;
	overflow-x: auto;
	overflow-y: auto;
	border-radius: 4px;
	font-family: inherit;
	background-color: var(--background);
	padding: 6px;
	word-break: break-word;
	scroll-padding: 6px;
}

.carta-emoji button {
	background: var(--contrast-background);

	cursor: pointer;
	display: inline-block;
	border-radius: 4px;
	border: 0;
	padding: 0;
	margin: 0.175rem;

	min-width: 2rem;
	height: 2rem;
	font-size: 1.2rem;
	line-height: 100%;
	text-align: center;
	white-space: nowrap;
}

.carta-emoji button:hover,
.carta-emoji button.carta-active {
	background: var(--hover-background);
}