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

@attribute-default: 5px;
@attribute-minimize: @attribute-default + 10;
@attribute-on-hide-button: 22px;
@attribute-on-hide-button-minimize: @attribute-on-hide-button + 10;


:host {
	position: absolute;
	height: 100%;
	width: 100%;

	div.collapsable {
		&.layout2 {
			div.map-container-wrapper {
				&:first-child {
					/deep/ .ol-attribution {
						bottom: @attribute-on-hide-button;
					}
				}
			}
		}

		&.layout4 {
			div.map-container-wrapper {
				&:first-child {
					/deep/ .ol-attribution {
						bottom:  @attribute-on-hide-button;
					}
				}
			}
		}

		&.layout5 {
			div.map-container-wrapper {
				&:nth-child(2) {
					/deep/ .ol-attribution {
						bottom:  @attribute-on-hide-button;
					}
				}
			}
		}

		&.layout6 {
			div.map-container-wrapper {
				&:nth-child(3) {
					/deep/ .ol-attribution {
						bottom:  @attribute-on-hide-button;
					}
				}
			}
		}
	}

	div.imageries-container {
		position: relative;
		display: flex;
		height: 100%;
		flex-wrap: wrap;
		background: black;
		overflow: hidden;

		div.map-container-wrapper {
			position: absolute;
			overflow: hidden;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		div.active-border {
			position: absolute;
			width: 100%;
			height: 100%;
			background: transparent;
			top: 0;
			left: 0;
			box-sizing: border-box;
			z-index: @z-index-imageries-active-border;
			border: none;
			pointer-events: none;

			&.active {
				border: solid 4px @application-primary-color;
			}
		}

		/deep/ .ol-scale-line {
			bottom: 5px;
			height: @scale-line-height;
			min-width: 200px;
			direction: ltr; // does not change in app RTL mode
		}

		/deep/ .ol-scale-line-inner {
			margin-top: 16px;
		}

		/deep/ .ol-attribution {
			bottom: @attribute-default;
		}

		&.layout2 {
			div.map-container-wrapper {
				width: 50%;
				height: 100%;

				&:nth-child(1) {
					top: 0;
					right: 50%;
				}

				&:nth-child(2) {
					top: 0;
					right: 0;
				}
			}
		}

		&.layout3 {
			flex-direction: column;

			div.map-container-wrapper {
				width: 100%;
				height: 50%;

				&:nth-child(1) {
					top: 0;
					left: 0;
				}

				&:nth-child(2) {
					top: 50%;
					left: 0;
				}
			}
		}

		&.layout4 {
			div.map-container-wrapper {
				width: 50%;
				height: 50%;

				&:first-child {
					width: 50%;
					height: 100%;
				}

				&:nth-child(1) {
					top: 0;
					right: 0;
				}

				&:nth-child(2) {
					top: 0;
					right: 50%;
				}

				&:nth-child(3) {
					top: 50%;
					right: 50%;
				}
			}

			flex-direction: column;
		}

		&.layout5 {
			div.map-container-wrapper {
				width: 50%;
				height: 50%;

				&:nth-child(1) {
					top: 0;
					left: 0;
					width: 100%;
					height: 50%;
				}

				&:nth-child(2) {
					top: 50%;
					left: 0;
				}

				&:nth-child(3) {
					top: 50%;
					left: 50%;
				}
			}
		}

		&.layout6 {
			div.map-container-wrapper {
				width: 50%;
				height: 50%;

				&:nth-child(1) {
					top: 0;
					left: 0;
				}

				&:nth-child(2) {
					top: 0;
					left: 50%;
				}

				&:nth-child(3) {
					top: 50%;
					left: 0;
				}

				&:nth-child(4) {
					top: 50%;
					left: 50%;
				}
			}
		}
	}

	div.footer-collapsed {
		/deep/ .ol-attribution {
			bottom: @attribute-minimize;
		}

		&.layout2 {
			div.map-container-wrapper {
				width: 50%;
				height: 100%;

				&:nth-child(1) {
					top: 0;
					left: 0;

					/deep/ .ol-attribution {
						bottom:  @attribute-on-hide-button-minimize;
					}
				}

				&:nth-child(2) {
					top: 0;
					left: 50%;
				}
			}
		}

		&.layout3 {
			flex-direction: column;

			div.map-container-wrapper {
				width: 100%;
				height: 50%;

				&:nth-child(1) {
					top: 0;
					left: 0;
					/deep/ .ol-attribution {
						bottom: @attribute-default;
					}
				}

				&:nth-child(2) {
					top: 50%;
					left: 0;
				}
			}
		}

		&.layout4 {
			div.map-container-wrapper {
				width: 50%;
				height: 50%;

				&:nth-child(1) {
					width: 50%;
					height: 100%;
					top: 0;
					right: 0;

					/deep/ .ol-attribution {
						bottom: @attribute-on-hide-button-minimize;
					}
				}

				&:nth-child(2) {
					top: 0;
					right: 50%;
					/deep/ .ol-attribution {
						bottom: @attribute-default;
					}
				}

				&:nth-child(3) {
					top: 50%;
					right: 50%;
				}
			}
		}

		&.layout5 {
			div.map-container-wrapper {
				width: 50%;
				height: 50%;

				&:nth-child(1) {
					width: 100%;
					height: 50%;
					top: 0;
					left: 0;
					/deep/ .ol-attribution {
						bottom: @attribute-default;
					}
				}

				&:nth-child(2) {
					top: 50%;
					left: 0;

					/deep/ .ol-attribution {
						bottom: @attribute-on-hide-button-minimize;
					}
				}

				&:nth-child(3) {
					top: 50%;
					left: 50%;
				}
			}
		}

		&.layout6 {
			div.map-container-wrapper {
				width: 50%;
				height: 50%;

				&:nth-child(1) {
					top: 0;
					left: 0;
				}

				&:nth-child(2) {
					top: 0;
					left: 50%;
				}

				&:nth-child(1), &:nth-child(2) {
					/deep/ .ol-attribution {
						bottom: @attribute-default;
					}
				}

				&:nth-child(3) {
					top: 50%;
					left: 0;

					/deep/ .ol-attribution {
						bottom: @attribute-on-hide-button-minimize;
					}
				}

				&:nth-child(4) {
					top: 50%;
					left: 50%;
				}
			}
		}
	}
}

@media screen and (max-width: 1600px) {
	:host {
		div.imageries-container {
			&.layout2, &.layout4, &.layout6, &.layout5 div.map-container-wrapper:not(:first-child) {
				/deep/ ansyn-imagery-status {
					.buttons button.back-to-world-view {
						font-size: 0;
						overflow: visible;

						i {
							font-size: 13.33px;
						}
					}
				}
			}
		}
	}
}
