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

:host {
	z-index: @z-index-footer;
	display: contents;
	position: relative;
	direction: ltr;

	div.status-timeline-container {
		position: relative;
		width: 100%;

		.app-timeline-container {
			height: @timeline-area-height;

			ansyn-overlay-navigation-bar, ansyn-time-picker-container {
				position: absolute;
				top: 6.5px;
			}

			ansyn-overlay-navigation-bar {
				left: 50%;
				transform: translateX(-50%); // center element in  parent
			}

			ansyn-time-picker-container {
				right: 280px;
			}
		}

		button.hide-menu {
			position: absolute;
			bottom: calc(100% - 6px);
			left: 50%;
			transform: translateX(-50%); // center element in  parent
			width: 60px;
			background: @background-color-1;
			border: none;
			color: white;
			box-shadow: 2px 0 4px -2px black;
			outline: none;
			visibility: visible;
			transition: .5s;
			z-index: @z-index-hide-menu-button;

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

			div.show {
				transform: rotateX(180deg);
			}
		}

		&.collapsed {
			position: absolute;

			button.hide-menu {
				bottom: 100%;
			}
		}
	}
}


@media screen and (min-width: 1920px) { // in wider screen the timepicker is stick to date.
	:host {
		div.status-timeline-container {
			.app-timeline-container {
				ansyn-time-picker-container {
					right: 325px;
				}
			}
		}
	}
}
