@import "var";

.inspector-tabs {
	flex: 1;
	border: 0 !important;
	display: flex;
	flex-direction: column;

	& > :last-child {
		flex: 1;
		height: 0;
	}

	.zero-inspector-props-form {
		height: 100%;

		.form {
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		.top-bar {
			padding: 5px;
		}

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

		.cmd-input {
			.el-input__inner {
				color: $--color-primary;
			}
		}

		.add-item-bar {
			padding-top: 10px;
			padding-bottom: 6px;
			text-align: center;
		}
	}

	.zero-inspector-behavior {
		height: 100%;
		display: flex;
		flex-direction: column;

		.add-trigger {
			align-self: flex-start;
		}

		.scrollbar {
			margin-top: 5px;
			height: 100%;
		}

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

		.trigger-list {
			color: $--color-text-regular;
			font-size: 12px;
			padding-right: 10px;

			.trigger-item + .trigger-item {
				margin-top: 5px;
			}

			.trigger-item {
				border: 1px solid lightgray;
				border-radius: 3px;
				padding: 3px;

				.el-button {
					padding: 3px;
				}

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

					.name {
						color: $--color-primary;
						font-size: 14px;
						font-weight: bold;
						flex: 1;
						cursor: default;
					}
				}

				.behavior-list {

					.behavior-item {
						&:hover {
							& > .delete-button {
								visibility: visible;
							}
						}

						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 2px;

						.name-field {
							flex: 1;
							margin-left: 3px;
						}

						.missing-behavior {
							color: $--color-danger;
						}

						.name-input {
							border: 0;
							outline: transparent;
						}

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

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

.store-editor-dialog {
	.wrapper {
		height: 50vh;

		.tabs {
			height: 100%;
			display: flex;
			flex-direction: column;

			.el-tabs__content {
				flex: 1;

				& > div {
					height: 100%;
				}

				.editor {
					width: 100%;
					height: 100%;
				}

				.computed-editor {
					.editor {
						width: 100%;
						height: 200px;
					}
				}
			}
		}

	}

	.dialog-footer {
		.save-button {
			margin-left: 10px;
		}
	}
}

.asset-dependence-dialog {
	.wrapper {
		display: flex;
		flex-direction: column;
		height: 50vh;

		.assets-dep {
			flex: 1;
			height: 0;
			display: flex;
			flex-direction: column;
			margin-bottom: 5px;

			.explicit-tags {
				display: flex;

				div + div {
					margin-left: 10px;
				}

				div {
					display: flex;
					align-items: center;

					div {
						width: 10px;
						height: 10px;
						margin-right: 2px;
					}

					.explicit {
						background-color: $--color-danger;
					}

					.implicit {
						background-color: $--color-success;
					}
				}

			}

			.assets-scrollbar {
				flex: 1;
				border: 1px solid $--border-color-light;
			}
		}

		.custom-dep {
			display: flex;
			align-items: center;

			.select{
				flex: 1;
			}
		}
	}
}
