@import "var";

$dock-pin-width: 9px;

.behavior-editor-dialog {

}

.process-editor-dialog {
	flex: 1;
	display: flex;
	flex-direction: column;

	.editor-wrapper{
		flex: 1;
		display: flex;
		height: 0;
	}
	.behavior-editor {
		flex: 1;
	}

	.bottom-bar {
		display: flex;
		justify-content: space-between;
		padding: 10px;
	}
}

.process-pane {

}

.process-tree {
	display: flex;
	flex-direction: column;

	.scrollbar {
		flex: 1;

		.process-tree-node {
			flex: 1;
			flex-direction: row;
			display: flex;
			padding-right: 10px;

			.node-name {
				flex: 1;
				width: 0;
				text-overflow: ellipsis;
				overflow: hidden;
				font-size: 14px;

				.current-node {
					background-color: $--color-text-secondary;
					color: $--color-white;
					border-radius: 5px;
					padding: 0 2px;
				}
			}

			.edit-button {
				visibility: hidden;
			}
		}
	}
}

.behavior {
	//border: 1px solid $--border-color-base;

	.background {
		background-color: $--background-color-base;

	}

	.center {
		display: flex;
		flex-direction: column;

		.el-button {
			padding: 3px;
			margin-top: 2px;
			margin-right: 2px;
		}

		.top-bar {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;

			.edit-path {
				flex: 1;
				padding: 5px;
				height: 14px;

				border-bottom: 1px solid $--border-color-light;
			}
		}


		.operate-bar {
			padding: 3px;

			border-bottom: 1px solid $--border-color-light;
		}
	}

	.board {
		flex: 1;

		.svg-board {
			.line {
				stroke: #979797;

				&.hover, &:hover {
					stroke: $--color-primary;
					stroke-dasharray: 5, 1;
				}

				&.contact {
					stroke: $--color-primary;
				}
			}

			.node {
				display: flex;
				flex-direction: column;
				min-width: 100px;
				background-color: $--background-color-base;
				border: 1px solid $block-border-blur-background-color;
				position: relative;
				border-radius: 5px;
				outline: none;
				user-select: none;
				margin: 0 $dock-pin-width;

				&:hover {
					& > .top-bar {
						visibility: visible;
					}
				}

				/*&:hover {
					border-color: $block-border-hover-background-color;

					& > .header {
						background-color: $block-border-hover-background-color;
					}
				}*/

				/*&:focus {
					border-color: $block-border-focus-background-color;

					& > .header {
						background-color: $block-border-focus-background-color;
					}
				}*/

				.top-bar {
					height: 19px;
					padding: 0 3px;
					margin: -20px 5px 0;
					border-top-left-radius: 3px;
					border-top-right-radius: 3px;
					background-color: rgba(0, 0, 0, 0.1);
					align-self: flex-end;
					visibility: hidden;

					.el-link {
						padding: 3px 2px 2px 2px;
					}

					.el-link + .el-link {
						margin-left: 5px;
					}
				}

				.header {
					min-height: 12px;
					background-color: $block-border-blur-background-color;
					border-top-left-radius: 3px;
					border-top-right-radius: 3px;
					padding: 3px;
					font-size: 12px;
					color: white;
					display: flex;

					i {
						display: block;
						//color: $--color-warning;
						margin-right: 3px;
					}

					.title {
						flex: 1;
					}
				}

				.body {
					display: flex;
					flex-direction: column;
					padding: 3px;
					font-size: 12px;
					color: $--color-text-regular;

					.field-item {
						display: flex;
						align-items: center;

						& > * {
							flex: 1;

							white-space: nowrap;
							overflow: hidden;
						}

						.key {

						}

						.linked-value {
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}

						.string-value {
							text-align: right;

							.tag {
								color: $--color-success;
							}
						}

						.color-value {
							width: 15px;
							height: 15px;
							border-radius: 3px;
							float: right;
							border: 1px solid $--border-color-base;
						}
					}

				}

				.dock {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					display: flex;
					flex-direction: column;

					.pin {
						border: 1px solid $block-border-blur-background-color;
						padding: 1px;
						margin-bottom: 5px;
						background-color: white;

						div {
							width: 3px;
							height: 3px;
							border: 1px solid $block-border-blur-background-color;
							border-radius: 3px;
						}

						&:hover {
							border-color: $--color-primary;

							& > div {
								border-color: $--color-primary;
							}
						}

						&:last-child {
							margin-bottom: 0;
						}
					}
				}

				.input {
					@extend .dock;
					left: -$dock-pin-width;
				}

				.output {
					@extend .dock;
					right: -$dock-pin-width;
				}
			}

			.active {
				border-color: $block-border-focus-background-color;

				& > .header {
					background-color: $block-border-focus-background-color;
				}

				/*& > .top-bar {
					visibility: visible;
				}*/
			}
		}
	}

	.properties {
		display: flex;
		flex-direction: column;


		.wrapper {
			padding: 5px;
			flex: 1;
			display: flex;
			flex-direction: column;

			.name-input {

			}

			.scrollbar {
				margin-right: -5px;
				padding-top: 5px;
				flex: 1;

				.scrollbar-view {
					padding-right: 10px;
				}
			}

			.inside-code {
				flex: 1;
				height: 0;
				border-top: 1px solid $--border-color-base;

				.scrollbar {
					height: 100%;

					.code-body {
						tab-size: 1.5em;
						width: 100%;
						margin: 0;
						font-size: 12px;
						white-space: pre-wrap;
					}
				}
			}
		}
	}
}

.meta-editor-wrapper {
	display: flex;
	height: 100%;
	padding: 5px;
	flex-direction: column;

	.info-editor {
		margin-right: 5px;
	}

	.script-editor {
		flex: 1;
	}
}

.props-editor-dialog {
	.scrollbar {
		width: 100%;
		height: 40vh;
	}

	.add-button {
		margin-bottom: 5px;
	}

	.default-value {
		width: 100%;
	}

	.operate-bar {
		.el-button {
			padding: 4px;
		}

		.edit-enum-button {

		}

		.delete-button {
			margin-left: 3px;
		}
	}
}

.edit-enum-popover {
	.el-select {
		width: 400px;
	}
}

.node-select-popover {
	.tree-scrollbar {
		width: 100%;
		height: 200px;
	}

	.bottom-bar {
		margin-top: 5px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

}

.linked-prop-popover {
	div + div {
		margin-top: 5px;
	}
}

.property-name-popover {
	p {
		margin: 0;
		//text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.alias {
		line-height: 16px;
		font-size: 14px;
	}

	.property-name {
		line-height: 12px;
		font-size: 12px;
		color: $--color-text-secondary;
	}
}

.props-editor {
	.linked {
		display: block;
		height: 26px;
		overflow: hidden;
		border: 1px solid $--border-color-base;
		border-radius: 4px;
		background-color: $--background-color-base;
		flex: 1;
		padding: 0 5px;
		color: $--color-text-secondary;
	}

	.el-input-group__prepend {
		padding: 0 5px;
	}

	.el-select {
		width: 100%;
	}

	.input-wrapper {
		.label {
			p {
				margin: 0;
				//text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}

			.alias {
				line-height: 16px;
				font-size: 14px;
			}

			.property-name {
				line-height: 12px;
				font-size: 12px;
				color: $--color-text-secondary;
			}
		}

		.field-label {
			padding: 0 5px;
			color: $--color-text-secondary;
		}
	}

	.source-input {
		flex: 1;
	}

	.vector2-input {
		flex: 1;
		display: flex;
		width: 0;
	}

	.node-select-container {
		flex: 1;
	}

	.percent-on{
		color: $--color-primary;
	}

	.percent-off{
		color: $--color-text-placeholder;
	}
}

.source-input-popover {
	.wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}

.enum-input-comment {
	float: right;
	color: $--color-text-secondary;
}
