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

@animation-duration: 0.3s;

:host {
	direction: rtl;

	&.component {
		position: relative;

		.app {
			/deep/ ansyn-popover.default-case div.pop-hover .pop-content {
				visibility: hidden !important;
			}
		}
	}

	.results-table {
		background: @background-color-1;
		position: absolute;
		color: white;
		border: solid 1px #EBF8FA;
		right: 10px;
		bottom: 10px;
		z-index: @z-index-results-table-button;
		font-size: 0.9rem;
		height: @timeline-area-height - 20px;
		width: 8%;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		border-radius: @ansyn-results-table-border-radius;
		outline: none;

		i {
			display: block;
			font-size: 3em;
			min-width: 30px;
		}

		span.badge {
			font-size: 14px;
			min-width: 30px;
		}

		span.results-title {
			font-size: 14px;
			width: 100%;
			min-width: 30px;
		}

		&:hover {
			background-color: @status-bar-hover;
		}

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

	.results {
		right: 0;
		position: fixed;
	}

	font-family: @app-font;
	font-size: 14px;

	div.app {
		display: flex;
		height: 100%;
		width: 100%;
		position: relative;
		overflow: hidden;
		flex-direction: row;
		background: @background-color-0;

		div.menu {
			flex-shrink: 1;
		}

		div.status {
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: @status-bar-height;
			z-index: @z-index-status-bar-navigation-area;

			&.expand {
				right: 0;
				width: 100%;
			}

			&.hide-status-bar {
				display: none;
			}
		}

		div.layer {
			width: 100%;
			height: calc(100% - @status-bar-height - @timeline-area-height);
			top: @status-bar-height;
			color: white;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			position: relative;

			&.isCollapse {
				height: calc(100% - @status-bar-height);
			}

			.maps-container {
				position: relative;
				flex-grow: 1;

				&.hide-status-bar {
					top: 0;
					height: 100%;
				}
			}
		}

		div.footer {
			position: absolute;
			bottom: 0;
			width: 100%;
			z-index: @z-index-footer;
		}

		&.animations {

			div.menu {
				animation: menu-init-rtl @animation-duration;
				transform: transitionX(0);
				position: relative;
				height: 100%;

				&.isCollapse {
					/deep/div.menu-wrapper > div.container {
						height: calc(100% - @status-bar-height);
					}
				}

				.ansynToolsAlone {
					background: @background-color-3;
					height: 100%;

				}

				.ansynToolsAlone /deep/ .tools-menu-item-container {
					padding: 0;
				}

			}

			div.layer div.maps-container {
				animation: map-init 0.7s;
				animation-delay: @animation-duration;
				opacity: 0;
				animation-fill-mode: forwards;
			}

			div.layer ansyn-footer {
				animation: timeline-init @animation-duration;
			}
		}
	}
}

@media screen and (max-width: 959px) {
	div.app > div.menu {
		box-shadow: 0 0 10px black;
		z-index: @z-index-menu-container;
	}

	.ansynToolsAlone {
		display: block;
	}
}

@media screen and (min-width: 959px) {
	.ansynToolsAlone {
		display: none;
	}
}

.credentials {
	position: absolute;
	bottom: 80px;
	right: 7px;
}

// time picker: set font
/deep/ .owl-dt-container {
	font-family: @app-font;
}

/deep/ .ngx-slider {
	margin: 0 5px !important;
}

/deep/ .ngx-slider-bubble {
	color: white !important;
	margin-bottom: 5px !important;
}

/deep/ .ngx-slider-pointer {
	background-color: gray !important;
}

/deep/ .ngx-slider-selection {
	background: gray !important;
}

/deep/ .ngx-slider-active {
	outline: none;
}

/deep/ .ngx-slider-pointer:after {
	visibility: hidden;
}

/deep/ .ngx-slider-ceil {
	visibility: hidden !important;
}

/deep/ .mat-slide-toggle-thumb {
	width: 15px !important;
	height: 15px !important;
	margin-top: 2px;
}

/deep/ .mat-slide-toggle-bar {
	width: 30px !important;
}

/deep/ .mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
	background-color: lightgreen;
}

/deep/ .mat-slide-toggle:not(.mat-checked) .mat-slide-toggle-bar {
	background-color: red;
}

/deep/ .mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
	background-color: white !important;
}

/deep/ .mat-slide-toggle:not(.mat-checked) .mat-slide-toggle-label {
	color: red !important;
}

/deep/ .mat-slide-toggle.mat-checked .mat-slide-toggle-label {
	color: lightgreen !important;
} 

/deep/ .mat-slide-toggle-label {
	font-size: larger !important;
}

/deep/ .ngx-slider-pointer-min, /deep/ .ngx-slider-pointer-max {
	width: 24px !important;
	height: 24px !important;
	margin-top: 3%;
}


@keyframes menu-init-ltr {
	from {
		transform: translateX(-100%);
	}
	to {
		transform: translateX(0);
	}
}

@keyframes menu-init-rtl {
	from {
		transform: translateX(100%);
	}
	to {
		transform: translateX(0);
	}
}

@keyframes map-init {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes timeline-init {
	from {
		top: 100%;
	}
	to {
		top: 0;
	}
}

@keyframes collapsedVertical {
	from {
		transform: scale(1) translateY(-100px);
	}
	to {
		transform: scale(1) translateY(0);
	}
}

@keyframes unCollapsedVertical {
	from {
		transform: scale(1.2) translateY(100px);
	}
	to {
		transform: scale(1) translateY(0);
	}
}
