@import "../../../css/colors.less";

.uiNodeInfo {
	position: absolute;
	right: 10px;
	top: 10px;
	padding: 10px;
	width: 250px;
	background-color: #373041;
	text-align: center;

	&.picking {
		height: calc(100% - 15px);
	}

	.heading-text {
		color: @white;
		margin-bottom: 15px;
	}

	.content {
		height: calc(100% - 15px);
	}

	.lbl {
		color: @white;

		&:not(:empty) {
			&.lblId:before {
				content: 'Id: ';
			}

			&.lblGroup:before {
				content: 'Group: ';
			}

			&.lblType:before {
				content: 'Type: ';
			}

			&.lblPos:before {
				content: 'Pos: ';
			}

			&.lblLinks:before {
				content: 'Links: ';
			}
		}
	}

	.stats {
		&:not(:empty) {
			margin-top: 15px;
		}

		.item {
			width: 100%;
			height: 28px;
			color: @white;
			background-color: @blackA;
			padding: 5px 0px 5px 0px;
			margin-bottom: 5px;
			cursor: pointer;

			&:hover {
				background-color: @grayC;
			}

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

	.nodeCount {
		color: @white;
		margin-top: 10px;

		&:before {
			content: 'Selected: ';
		}
	}

	.lookup {
		display: none;
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		background-color: #373041;
		overflow: auto;

		.item {
			width: 100%;
			color: @white;
			background-color: @blackA;
			padding: 5px 0px 5px 0px;
			margin-bottom: 5px;
			cursor: pointer;

			&:hover {
				background-color: @grayC;
			}

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