@import "ansyn/less/z-index-globals";
@import 'ansyn/less/common';

:host {
	display: flex;
	flex: 1;
	flex-direction: column;
	height: 100%;
	color: white;
	font-size: 14px;
	box-sizing: border-box;

	div.title-row {
		padding: 5px 0 10px 0;
		margin-right: 10px;
		display: flex;

		span.title {
			font-family: @app-font;
			font-style: normal;
			font-weight: bold;
			font-size: 1.5em;
			line-height: 100%;
			color: #FFFFFF;
		}

		button.down-arrow {
			width: 10px;
			height: 10px;
			padding: 0;
			background: transparent;
			border: none;
			border-bottom: 2px solid #FFFFFF;
			border-left: 2px solid #FFFFFF;
			margin-left: 17px;
			margin-top: 2px;
			cursor: pointer;
			outline: none;
		}
	}

	div.entities-table {
		display: flex;
		flex-direction: column;
		height: calc(100% - 36px);

		div.entities-table-head {
			display: flex;

			div.entities-table-head-row {
				display: flex;
				padding: 10px 15px;
				flex: 1;

				div {
					flex: 1;

					&.entities-table-head-col {
						justify-content: center;
					}

					&.menu-placeholder {
						flex: 0
					}
				}

				div.entities-table-head-row-data {
					display: flex;
					align-items: center;
					flex: 1;
					padding: 10px 0;
					box-sizing: border-box;

					div {
						flex: 1;

						&.entities-table-head-col {
							justify-content: center;
						}

						&.menu-placeholder {
							flex: 0
						}
					}
				}
			}
		}

		div.entities-table-body {
			display: flex;
			flex-direction: column;
			flex: 1;
			direction: ltr;

			div.entities-table-body-row {
				transition: background .3s, color .3s;
				margin: 0 5px;
				border-top: 1px solid #EBF8FA;

				&:last-child {
					margin-bottom: 50px; //for showing tooltip without scrolling
					border-bottom: 1px solid #EBF8FA;
				}

				&.mouse-enter {
					background-color: @background-color-7;
					color: white;

					div.entities-table-body-row-data div.entity-menu-container div.entity-menu {
						transform: translateX(7px);
						opacity: 1;
						visibility: visible;
						pointer-events: auto;
					}
				}

				&.active {
					background: #9deeff;
					color: #156879;
				}

				&.selected {
					color: #156879;
					background: #EBF8FA;
				}

				div.entities-table-body-row-data {
					margin: 9px 0;
					display: flex;
					align-items: center;
					cursor: pointer;
					box-sizing: border-box;
					position: relative;
					direction: rtl;

					div.entities-table-body-col {
						flex: 1;
						margin: 0 5px;
					}

					div.entities-table-entity-name-col {
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						padding: 0 3px;
					}

					div.entity-menu-container {
						flex: 0;
						direction: ltr;

						div.entity-menu {
							display: flex;
							visibility: hidden;
							transition: visibility .3s, transform .3s, opacity .3s;
							width: fit-content;
							opacity: 0;
							z-index: @z-index-entity-menu;
							border: 0.5px solid #404040;
							box-sizing: border-box;
							box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24), 0 0 2px rgba(0, 0, 0, 0.12);
							border-radius: 4px;
							background: #FFFFFF;
							pointer-events: none;
							position: relative;

							&.transparent {
								background: transparent;
								box-shadow: unset;
								border: none;
							}
						}
					}
				}
			}
		}
	}

	p.no-entities {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		color: white;
		padding: 20px 0;
	}

}
