.editorskit-charmap-popover {

	.components-tab-panel__tabs {
		margin-bottom: 10px;

		.components-button {

			&.is-active-tab {

				&,
				&:hover {
					background: #555d66 !important;
					color: #fff !important;
				}
			}
		}
	}

	.components-popover__content {
		width: 530px;
		max-height: 400px;
		padding: 10px;
		overflow-y: auto !important;


		> div {
			height: auto;
		}
	}

	&.is-expanded {

		.components-popover__content {
			width: auto;
			max-width: 100%;
			max-height: 100%;
		}
	}

	&.is-searching {

		.components-tab-panel__tabs {
			opacity: 0.25;
		}
	}
}

ul.editorskit-charmap-list {
	list-style-type: none;
	margin: 0;
	padding: 0;

	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	height: 100%;

	li {
		border: 1px solid #c8c8c8;
		padding: 2px;
		margin: 0;

		.components-button {
			display: inline-block;
			font-size: 25px;
			width: 50px;
			height: 50px;
			color: #111;
			border: 1px solid transparent;
			text-align: center;
			padding: 0;

			&:hover {
				border-color: #111;
				color: #000 !important;
			}
		}
	}
}