@import "ansyn/less/common";

@footer-height: 141px;
@header-size: calc(~"(100vh - @{footer-height}) * 0.025");
@results-table-width: 350px;
@date-field-width: 95px;
@favorite-field-width: 24px;

:host {
	z-index: @z-index-footer;
	background: @background-color-3;
	height: 100%;

	div.results-table {
		width: @results-table-width;
		color: white;
		font-size: 14px;
		padding: 0 5px;
		box-sizing: border-box;
		height: 100%;
		display: grid;

		h2.header {
			color: white;
			margin: 15px;
		}

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

			div.results-table-head-row {
				margin-bottom: -5px;
				padding-right: 13px;
				width: 100%;

				div.results-table-head-row-data {
					display: flex;
					align-items: center;
					position: relative;
					height: 57px;
					cursor: pointer;
					box-sizing: border-box;

					div.results-table-head-col {
						flex: 1;

						&.date {
							flex: 0;
							min-width: @date-field-width;
						}

						&.sensorName  {
							margin-right: 10px;
							margin-left: 15px;
						}

						&.favorite {
							flex: 0;
							min-width: @favorite-field-width;
						}

						i.icon-arrow {
							margin-top: 5px;
							position: absolute;

							&.active {
								color: @application-primary-color;
							}
						}
					}
				}
			}
		}

		div.results-table-body {
			display: block;
			height: calc(100vh - @status-bar-height - @timeline-area-height - 110px);
			direction: ltr; // to flip the scrollbar location

			div.results-table-body-row:hover + div.results-table-body-row hr {
				top: -2px;
			}

			div.results-table-body-row-data.selected + div.results-table-body-row hr {
				top: -2px;
			}

			div.results-table-body-row {
				display: block;
				transition: background .3s, color .3s;
				overflow: hidden;
				position: relative;
				direction: rtl; // needs to be repeated here because of scrollbar place
				margin-right: 6px;
				border-top: 1px solid #EBF8FA;

				&:last-child {
					border-bottom: 1px solid #EBF8FA;
				}

				&.mouse-enter {
					color: #156879;
					background: #EBF8FA;
				}

				&:hover {
					background-color: @background-color-7;
					color: white;
				}

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

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

				hr {
					display: none;
					position: absolute;
					margin: 0;
					width: 100%;
					border: solid 1px #EBF8FA;
					top: -1px;
					left: 0;
					color: #ebf8fa;
				}

				/deep/ .slider-text {
					color: inherit;
				}

				div.results-table-body-row-data {
					display: flex;
					align-items: center;
					cursor: pointer;
					box-sizing: border-box;
					margin: 10px 0;

					hr {
						display: block;
						position: absolute;
						margin: 0;
						width: 100%;
						border: solid 1px #EBF8FA;
						top: -1px;
						left: 0;
						color: #ebf8fa;
					}

					div.results-table-body-col {
						flex: 1;
						text-align: center;
						direction: ltr;

						&.source-type {
							overflow: hidden;
							text-overflow: ellipsis;
						}

						&.overlay-favorite {
							flex: 0;
							min-width: @favorite-field-width;
						}

						&.overlay-time {
							flex: 0;
							min-width: @date-field-width;
							overflow: hidden;
							text-overflow: ellipsis;
							direction: ltr; // it is a date, so don't flip characters
							text-align: right; // but align it to the right
						}
					}
				}
			}
		}
	}
}

