@import "_ColorGroups";

/*
 * 
 *   Copyright 2016 RIFT.IO Inc
 *
 *   Licensed under the Apache License, Version 2.0 (the "License");
 *   you may not use this file except in compliance with the License.
 *   You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 *   Unless required by applicable law or agreed to in writing, software
 *   distributed under the License is distributed on an "AS IS" BASIS,
 *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *   See the License for the specific language governing permissions and
 *   limitations under the License.
 *
 */

@function dim-color($color) {
	@return hsl(hue($color), 50%, 80%);
}

/* TODO this CSS has to be complete refactored - most of it may not even be used anymore!!! */

.DescriptorGraph {
	background-color: transparent;
	border: 1px solid transparent;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	.grid {
		line {
			stroke: #CBD1D1;
			stroke-width: 0.5px;
			shape-rendering: geometricPrecision;
		}
	}
	.selection-indicator {
		stroke-dasharray: 2, 2;
	}
	.connector {
		&.-is-not-connected {
			fill: white !important;
		}
		&.-is-connected {
			fill: #9fc4f4 !important;
		}
	}
	.connection,
	.new-connection {
		/* note colors are also defined in ColorGroups.js */
		//stroke: #295725;
		stroke-width: 5px;
		&.-selected {
			stroke-width: 7px;
			stroke: red;
		}
	}
	.connection-point {
		&:hover {
			cursor: pointer;
		}
		&.-is-highlight {
			stroke: red !important;
		}
	}

	.connection-point-number {
		text-shadow: 0 0 10px rgba(171, 161, 161, 0.89);
		font-size: 18px;
		fill: white;
		stroke: white;
		&.-is-highlight {
			fill: red;
			stroke: red;
		}
	}

	.relation-marker-end {
		stroke: transparent;
		fill: transparent;
	}

	&.-is-dragging-connection-point {
		cursor: no-drop !important;
		.border,
		.background,
		&.connector,
		&.connector:hover,
		.connector,
		.connector:hover {
			cursor: no-drop !important;
			fill-opacity: 0.33;
			stroke-opacity: 0.33;
		}
		.-is-valid-drop-target {
			cursor: copy !important;
			.border,
			.background,
			&.connector,
			&.connector:hover,
			.connector,
			.connector:hover {
				cursor: copy !important;
				fill-opacity: 1;
				stroke-opacity: 1;
			}
			&.-is-drag-over {
				.border {
					stroke-width: 3px;
				}
			}
		}
	}

	.forwarding-graph-paths {
		pointer-events: none;
	}

	text {

		pointer-events: none;
		fill: $common-foreground-color;
		stroke: $common-foreground-color;
		font-size: 14px;

		&.type {
			text-transform: uppercase;
			stroke: white;
			fill: white;
		}

		&.vld-type {
			display: none;
		}

		&.internal-vld-type {
			display: none;
		}

		&:hover {
			cursor: default;
		}

	}

	path {

		stroke-linejoin: round;

		&.relation {
			display: none;
		}

	}

	.color-legend {
		display: none;
		&.vnffgd-rsp-color-legend {
			display: block;
			text {
				font-size: xx-small;
				color: white;
			}
		}
	}

}