//	=================
//    	Imports
//	=================

@import '../../../../assets/base/color_variables';   	// Color Variables
@import '../../../../assets/base/fonticons';   			// Fonticons Variables
@import '../../../../assets/base/urls';   				// URLS Variables
@import '../../../../assets/base/utilities_variables';  // Utilities Variables

/* Default Operator */
.flowchart-container {
	position: $pos-rel;
	overflow-x: auto;
	overflow-y: hidden;
}
.flowchart-links-layer {
	position: $pos-abs;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}
.flowchart-operators-layer {
	position: $pos-abs;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.flowchart-temporary-link-layer {
	position: $pos-abs;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	pointer-events: none;
	display: none;
}
.flowchart-link {
	cursor: default;
}
.flowchart-operator {
	cursor: default;
	position: $pos-abs;
	width: 140px;
	border: $b-width-1 $solid $light-gray;
	background: $white;
	pointer-events: initial;
	.flowchart-operator-title {
		width: 100%;
		padding: $p-5;
		font-weight: bold;
		box-sizing: border-box;
		border-bottom: $b-width-1 $solid $color_6;
		background: $color_56;
		height: auto;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		cursor: move;
		color: $white;
	}
	.flowchart-operator-inputs-outputs {
		display: table;
		width: 100%;
		margin-top: $m-5;
		margin-bottom: $m-5;
	}
	.flowchart-operator-inputs {
		display: table-cell;
		width: 50%;
	}
}
.flowchart-operator-connector {
	position: $pos-rel;
	padding-top: $p-5;
	padding-bottom: $p-5;
	&:hover {
		.flowchart-operator-connector-arrow {
			border-left: $b-width-10 $solid rgb(153, 153, 153);
		}
	}
}
.flowchart-operator-connector-label {
	font-size: small;
}
.flowchart-operator-inputs {
	.flowchart-operator-connector-label {
		margin-left: 14px;
	}
	.flowchart-operator-connector-arrow {
		left: -1px;
	}
	.flowchart-operator-connector-small-arrow {
		left: -1px;
	}
}
.flowchart-operator-outputs {
	.flowchart-operator-connector-label {
		text-align: $align-right;
		margin-right: $m-5;
	}
	.flowchart-operator-connector-arrow {
		right: -10px;
	}
	.flowchart-operator-connector-small-arrow {
		right: -7px;
	}
}
.flowchart-operator-connector-arrow {
	width: 0px;
	height: 0px;
	border-top: $b-width-10 $solid $color_none;
	border-bottom: $b-width-10 $solid $color_none;
	border-left: $b-width-10 $solid $additional-color-7;
	position: $pos-abs;
	top: 0px;
}
.flowchart-operator-connector-small-arrow {
	width: 0px;
	height: 0px;
	border-top: $b-width-5 $solid $color_none;
	border-bottom: $b-width-5 $solid $color_none;
	border-left: $b-width-5 $solid $color_none;
	position: $pos-abs;
	top: 5px;
	pointer-events: none;
}
.unselectable {
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.flowchart-operator.selected {
	border-color: $black;
}
.flowchart-default-operator {
	.flowchart-operator-outputs {
		display: table-cell;
		width: 50%;
	}
}