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

@tools-box-width: 296px;
@tools-box-height: 40px;

:host {
	width: 0;
	position: absolute;
	top: 45px;
	left: 0;
	transform: translateX(-87%);
	background: @background-color-3;
	transition-property: width, visibility;
	transition-duration: 0.1s;
	z-index: @z-index-annotations-control;

	.selected-layer {
		color: white;
		visibility: hidden;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: absolute;
		width: 100%;
		transform: translateY(-100%);
		background: fade(@background-color-3, 95%);;
		padding: 0 10px;
		box-sizing: border-box;
		margin-top: 90px;

		div.combo-box {

			width: 50%;
			margin-right: 5px;
			padding: 7px 0;
			display: flex;

			/deep/ .options-container {
				max-height: 150px !important;
				margin-top: 5px;
				overflow: auto;
			}
		}
	}

	&.expand {
		.selected-layer {
			visibility: visible;
		}

		width: initial;
		transition-delay: 0.1s;

		ul.annotations-options {
			visibility: visible;

			li {
				visibility: visible;
				opacity: 1;
			}
		}
	}

	ul.annotations-options {
		transition: 0.1s;
		visibility: hidden;
		display: flex;
		align-items: center;
		padding: 0;
		margin: 0;
		height: @tools-box-height;

		li {
			transition: visibility 0s linear .2s;
			visibility: hidden;
			opacity: 0;
			position: relative;
		}

		& > li {
			list-style-type: none;
			padding: 5px;
			display: flex;
			cursor: pointer;

			&.Translate {
				display: none;
			}
			span {
				color: white;
				font-size: 22px;
			}

			&:hover:not(.mode-on), &.mode-on {
				background-color: @background-color-6;
			}

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

			&.spliter {
				display: flex;
				align-items: center;
				height: 100%;
				margin: 0 4px;
				cursor: unset;

				div {
					height: 70%;
					border: 1px solid @background-color-6;
					opacity: 0.4;
				}

				&:hover {
					background-color: initial;
				}
			}

			&:last-child {
				padding-right: 2px;
			}

			button {
				background: transparent;
				padding: 0;
				border: none;
				outline: 0 none;
			}
		}

		li.expanded-selection {
			position: relative;
			flex-direction: column;
			button {
				display: flex;
				&.expand {
					background-color: @background-color-6;
				}
			}

			div.list {
				display: flex;
				flex-direction: column;
				position: absolute;
				top: 35px;
				right: 0;
				overflow: hidden;
				padding: 0;
				margin: 0;
				text-align: center;
				transition: height 0.3s;
				background: @background-color-3;

				.item {

					&:hover, &.selected {
						background-color: @background-color-6;
					}
				}

				&.line-width-expand {
					width: 100%;
					outline: none;
				}

				&.color-selection-expand.open {
					visibility: visible;
				}
			}
		}
	}
}
