@import "ansyn/less/common";

:host {
	&:extend(.default-menu-item);
	display: flex;
	flex-direction: column;
	width: 410px;
	align-items: flex-start;
	padding-top: 20px;
	margin: 0 10px;
	height: 100%;
	box-sizing: border-box;

	.layer-search{
		display: flex;
		width: 90%;
		justify-content: space-between;
		flex-direction: column;
		padding: 5px;
		color: @text-color;

		.search {
			display: flex;
			.search-container {
				border: 1px solid @background-color-12;
				justify-content: space-between;
				display: flex;
				flex: 1
			}
			.refresh-button {
				display: flex;
				position: relative;
				align-items: center;
				align-self: center;
				width: 30px;
				height: 30px;
				margin-right: 5px;

				i {
					cursor: pointer;

					&.animate {
						animation-name: refresh-animate;
						animation-duration: 2s;
						animation-iteration-count: infinite;
						animation-timing-function: ease;
					}
				}
				span {
					height: fit-content;
					cursor: pointer;
					font-size: 12px;
				}
			}
		}
		.error {
			display: flex;
			align-self: center;
			color: @error-text-color;
		}
	}

	.layers {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
		color: @text-color;
		margin-top: 10px;

		.layer {
			max-height: 25%;
			display: flex;

			ansyn-static-layers, ansyn-annotation-layers, ansyn-base-layers {
				width: 100%;
			}
		}
	}


	::ng-deep div.entity-menu {
		button {
			background: transparent;
			border: none;
			color: @text-color;
			outline: none;

			&:disabled {
				opacity: 0.3;
			}
		}
	}

}


@keyframes refresh-animate {
	from {transform: rotate(0deg)}
	to {transform: rotate(360deg)}

}

