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

@button-margin: 6px;

/deep/ .render {
	display: flex;
	align-items: center;
}

:host {
	position: absolute;
	height: @imagery-status-height;
	z-index: @z-index-imagery-status;
	display: flex;
	width: 100%;
	line-height: 24px;
	color: white;
	align-items: center;

	&.with-background {
		background: rgba(0, 0, 0, 0.6);
		box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.5);
		box-sizing: border-box;

		&.active {
			background: rgba(0, 0, 0, 0.8);
		}
	}

	.buttons {
		height: @imagery-status-height;
		display: flex;
		margin: 0 2.5px;

		&.hide {
			visibility: hidden;
		}

		button {
			position: relative;
			padding: 4px 6px;
			vertical-align: middle;
			color: white;
			line-height: 0;

			&.small-icon-button {
				background: transparent;
				border: none;
				outline: none;
				padding: 0;
				display: flex;
				align-items: center;
				z-index: 1;
				margin-right: @button-margin;


				&:hover:not(:disabled) {
					background: rgba(0, 0, 0, 0.5);
				}

				&:disabled {
					opacity: .6;
				}
			}

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

		}
	}

	.description {
		flex: 1;
		min-width: 0;
		height: 100%;
		justify-content: center;
		align-items: center;
		display: flex;
		white-space: nowrap;

		ansyn-popover {
			min-width: 0;
		}

		button.share-link {
			&:extend(.base-share-link);

			span.icon-status-bar-share-link {
				margin-right: 3px;
				font-size: 18px;
			}

			&:hover {
				border-top-color: white;
				border-bottom-color: white;
			}
		}
	}

	/deep/ ansyn-alerts-container {
		max-width: 33%;
	}
}

// Prevent collision of description and buttons in small resolution
@media screen and (max-width: 1280px) {
	:host {
		.description {
			padding-left: 0;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		&:not(.one-map){
			ansyn-popover {
				width: 120px;
			}
		}
	}
}

@media screen and (max-width: 1024px) {
	:host {
		&:not(.one-map){
			ansyn-popover {
				width: initial;
				position: relative;
				left: 100px;
			}
		}
	}
}
