frontend/magic-flow/src/MagicExpressionWidget/style/index.less
.connector-input-expression {
	// width: 100%;
	// display: flex;
	// align-items: stretch;
	// .custom-icon-container {
	// 	display: flex;
	// 	flex: none;
	// 	align-items: center;
	// 	justify-content: center;
	// 	width: 46px;
	// 	height: 32px;
	// 	border-top: 1px solid #d9d9d9;
	// 	border-bottom: 1px solid #d9d9d9;
	// 	border-left: 1px solid #d9d9d9;
	// }
	// .icon-select-container {
	//     flex: auto;
	//     height: 32px;
	//     background-color: pink;
	// }
	.icon-container {
		position: relative;
		display: flex;
		flex: auto;
		width: 100%;

		input {
			flex: auto;
			background: #fff !important;
		}

		.icon-input-disabled {
			background: #f5f5f5 !important;
		}

		.clean-icon {
			position: absolute;
			top: 0;
			right: 0;
			z-index: 13;
			display: flex;
			flex: none;
			align-items: center;
			justify-content: center;
			width: 32px;
			height: 32px;
			font-size: 12px;
			color: rgb(0 0 0 / 25%);
		}

		.icon-component-select {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 12;
			width: 100%;
			height: 100%;
			background: rgb(255 255 255 / 0%);
			border: 1px solid #d9d9d9;
		}
	}
}

.icon-modal-wrapper {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 70vh;

	.icon-select-filter {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 54px;

		.magic-input-affix-wrapper {
			width: 88%;
			background-color: #f5f5f5;
		}

		input {
			background-color: #f5f5f5;
		}
	}

	.icon-select-scroll-view {
		flex: auto;
		width: 100%;
		overflow-y: scroll;

		&::-webkit-scrollbar {
			width: 2px;
			height: 2px;
			background-color: #314559;
			appearance: none;
		}

		&::-webkit-scrollbar-track {
			width: 0;
			background-color: #fff;
		}

		&::-webkit-scrollbar-thumb {
			background-color: #aaa;
			border-radius: 0;
		}
	}

	.icon-box {
		display: flex;
		align-items: center;
		justify-content: center;
		float: left;
		width: 20%;
		height: 68px;
		border: 1px solid #fff;
		transition: all linear 0.1s;

		&:hover {
			font-size: 24px;
			border-color: #43a4ff;
		}
	}

	.icon-box-active {
		font-size: 24px;
		border-color: #1890ff;
	}

	.btn-block {
		display: flex;
		justify-content: space-around;
		padding: 18px 0;

		button {
			width: 150px;
		}
	}

	.icon-modal-footer {
		width: 100%;
		margin: 20px 0;
		text-align: right;

		button:nth-child(1) {
			margin-right: 18px;
		}
	}
}
