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

@margin: 50px;

:host {
	background-color: rgba(0, 0, 0, 0.3);
	color: white;
	width: 40px;
	margin-bottom: 5px;

	.buttons {
		display: flex;
		justify-content: center;
		&:hover:not(.active):not(.disabled) {
			background: rgba(0, 0, 0, 0.5);
		}

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

		&.disabled {
			opacity: 0.3;
			cursor: not-allowed;
			pointer-events: none;
		}

		button {
			i {
				margin: unset;
			}
			color: white;

			&.small-icon-button {
				font-size: 17px;
				background: transparent;
				border: none;
				outline: none;
				align-items: center;
				z-index: 1;
				height: 33px;
			}

			.icon::before {
				font-size: 18px;
			}
		}
	}

	.popup {
		position: absolute;
		display: flex;
		flex-flow: row wrap;
		align-items: flex-start;
		width: 250px;
		height: 200px;
		bottom: -161px;
		left: 70px;
		background-color: @background-color-1;
		overflow-y: auto;

		.map {
			width: 30%;
			position: relative;
			box-sizing: content-box;
			margin: 3px;


			button {
				flex: 1;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				cursor: pointer;
				background-color: transparent;
				border: none;
				outline: none;
				color: white;

				img {
					width: 40px;
					height: 40px;
				}
				p {
					width:65px;
					font-size: 10px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

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

				button {
					cursor: default;
				}
			}
		}
	}
}

.imageries-container {
	&.layout3, &.layout5, &.layout6 {
		:host {
			.popup {
				top: unset;
				bottom: 0;
			}
		}
	}

	&.layout4 {
		div.map-container-wrapper:not(:first-child) {
			:host {
				.popup {
					top: unset;
					bottom: 0;
				}
			}
		}
	}
}
