.jodit-emoji {
	display: flex;

	width: calc( var(--font-size-large) * 6 + var(--padding-default) * 12 );
	height: 450px;

	flex-direction: column;

	&__navigate {
		//height: 87px;
		padding: calc(var(--padding-default)*2) 0;
		//border-bottom: 1px solid var(--color-border);
		background-color: var(--color-white);
	}

	&__categories {
		display: flex;
		justify-content: space-between;
		margin-bottom: calc(var(--padding-default) * 2);
	}

	&__category {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding-bottom: 5px;
		border-bottom: 2px solid transparent;
		cursor: pointer;
		opacity: 0.8;

		&_active_true {
			border-color: var(--color-border-selected);
			opacity: 1;
		}

		&:before {
			display: inline-block;
			width: 21px;
			height: 21px;
			background: data-uri('./assets/categories.png') no-repeat;
			background-position: 0 0;
			content: '';
		}

		&[title='People & Body']:before {
			background-position: -21px 0;
		}

		&[title='Animals & Nature']:before {
			background-position: -42px 0;
		}

		&[title='Food & Drink']:before {
			background-position: -63px 0;
		}

		&[title='Activities']:before {
			background-position: -84px 0;
		}

		&[title='Travel & Places']:before {
			background-position: -42px -21px;
		}

		&[title='Objects']:before {
			background-position: -21px -21px;
		}

		&[title='Symbols']:before {
			background-position: -42px -21px;
		}

		&[title='Flags']:before {
			background-position: -63px -21px;
		}
	}

	&__input {
		margin-bottom: 0px;
	}

	&__emojis {
		display: flex;
		overflow: auto;
		//height: calc(100% - 87px);
		flex: 1;
		flex-wrap: wrap;
		padding: var(--padding-default) 0;
	}

	&__emoji {
		cursor: pointer;
		font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
			serif;
		font-size: var(--font-size-large);
		line-height: var(--font-size-large);
		padding: var(--padding-default);
	}

	&__category-title {
		flex: 100%;
		color: var(--color-label);
		font-weight: 700;
		line-height: 40px;
	}
}