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

div.tasks-table {
	width: 100%;
	color: white;
	font-size: 14px;
	padding: 0 5px;
	box-sizing: border-box;

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

		div.tasks-table-head-row {
			padding: 0 15px;
			width: 100%;

			div.tasks-table-head-row-data {
				display: flex;
				align-items: center;
				position: relative;
				width: 100%;
				height: 57px;
				box-sizing: border-box;
				div.tasks-table-head-col {
					flex: 1;
				}
			}
		}
	}

	div.tasks-table-body {
		display: block;
		overflow-y: auto;
		height: 80vh;
		direction: ltr; // to flip the scrollbar location

		div.tasks-table-body-row:hover + div.tasks-table-body-row hr {
			display: block;
		}

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

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

		div.tasks-table-body-row:first-child div.tasks-table-body-row-data {
			border-top: 1px solid #EBF8FA;
		}

		div.tasks-table-body-row {
			padding: 0 15px;
			transition: background .3s, color .3s;
			overflow: hidden;
			height: 57px;
			position: relative;
			direction: rtl; // needs to be repeated here because of scrollbar place

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

				div.tasks-table-body-row-data div.task-menu-container div.task-menu {
					transform: translate(-10%, 50%);
					opacity: 1;
					visibility: visible;
					pointer-events: auto;
				}

			}

			&.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.tasks-table-body-row-data {
				position: relative;
				display: flex;
				align-items: center;
				cursor: pointer;
				box-sizing: border-box;
				height: 100%;

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

				div.tasks-table-body-col {
					flex: 1;
				}

				div.tasks-table-task-name-col {
					flex: 1.5
				}

				.tasks-table-auto-save-col {
					padding-top: 20px;
					flex: 2;
				}

				div.task-menu-container {
					flex: 0;

					div.task-menu {
						display: flex;
						transition: visibility .3s, transform .3s, opacity .3s;
						opacity: 0;
						visibility: hidden;
						z-index: @z-index-task-menu;
						position: fixed;
						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;
						transform: translate(50%, 50%);
						pointer-events: none;

						button {
							background: transparent;
							border: 1px solid transparent;
							font-size: 20px;

							&:hover {
								box-sizing: border-box;
								border: 1px solid #7b7b7b;
							}
						}
					}
				}

			}
		}
	}
}

p.no-tasks {
	width: 430px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	padding: 20px 0;
}
