@import "ansyn/less/common";

@context-menu-color: @application-primary-color;
@context-menu-contrast: white;
@context-open-menu: black;

:host {
	outline: none;
	position: fixed;
	transform: translate(28px, -27px);
	width: 0; // because we use focus/blur for show/hide we must give width and height 0.
	height: 0;
	display: flex;
	z-index: @z-index-context-menu;

	&:focus {
		nav.menu {
			visibility: visible;

			div.buttons-area {
				.menu-item {
					&:hover:not(:disabled) {
						span {
							// color: @background-color-3;
						}

						div.sub-buttons-list {
							visibility: visible;

							button {
								left: 0 !important;
							}
						}
					}
				}
			}

			button.menu-open-button {
				// background-color: #FFFFFF;

				transition-timing-function: linear;
				transition-duration: 200ms;
				transform: scale(0.5715);

				display: flex;
				align-items: center;
				justify-content: center;

				&:hover:not(:disabled) {
					background-color: @context-menu-color;
					transform: scale(0.6715);

					.pointer {
						color: @context-menu-contrast;
					}
				}

				.pointer {
					font-weight: bold;
				}

				&:disabled {
					background-color: rgb(163, 163, 163);
					transform: scale(0.6715);

					.pointer {
						color: @context-menu-contrast;
					}
				}
			}

			.buttons-area {
				.menu-item {
					transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
					background-color: @context-menu-color;
					color: @context-menu-contrast;

					&:hover:not(:disabled) {
						opacity: 0.8;
						background-color: @context-menu-contrast;
						color: @context-menu-color;
					}

					&.four-views {
						transition-duration: 180ms;
						left: 66px;
						top: 0;
					}

					&.first {
						transition-duration: 280ms;
						left: -33px;
						top: 59px;
					}

					&.angle {
						transition-duration: 380ms;
						left: -66px;
						top: 0;
					}

					&.last {
						transition-duration: 480ms;
						left: 33px;
						top: 59px;
					}

					&.next {
						transition-duration: 580ms;
						left: 33px;
						top: -59px;
					}

					&.prev {
						transition-duration: 680ms;
						left: -33px;
						top: -59px;
					}

				}
			}
		}
	}

	nav.menu {
		position: relative;
		transition: visibility 200ms;
		visibility: hidden;

		button.menu-open-button {
			border-radius: 100%;
			border: none;
			outline: none;
			width: 56px;
			height: 56px;
			z-index: @z-index-context-menu;
			cursor: pointer;
			background: @context-menu-contrast;
			color: @context-menu-color;
		}

		div.buttons-area {
			.menu-item {
				position: absolute;
				border: none;
				outline: none;
				color: @context-open-menu;
				border-radius: 100%;
				width: 56px;
				height: 56px;
				font: 13.3333px Arial;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				text-align: center;
				box-sizing: border-box;
				align-items: center;
				padding: 8px;
				top: 0;
				left: 0;
				box-shadow: 0 12px 12px rgba(0, 0, 0, 0.237602), 0 0 12px rgba(0, 0, 0, 0.12), 0 6px 6px rgba(0, 0, 0, 0.24), 0 0 6px rgba(0, 0, 0, 0.12);
				transition: top ease-out 200ms, left ease-out 200ms;

				&:disabled {
					&.first, &.prev, &.angle, &.next, &.last, &.four-views {
						color: @application-contrast-color;
					}
				}

				&.first, &.prev, &.angle {
					div.sub-buttons-list {
						left: initial;
						right: 0;
						flex-direction: row-reverse;

						button {
							margin-right: 0;
							margin-left: 5.5px;

							&:first-child {
								margin-left: 5.5px;
								margin-right: 66px;
							}

							&:last-child:not(:first-child) {
								margin-right: 0;
								margin-left: 0;
							}

							.loop(@i) when (@i < 10) {
								&:nth-child(@{i}) {
									left: 20px + (@i * 32px) + (@i * 5.5px);
								}
								.loop(@i + 1)
							}
							.loop(1);
						}
					}
				}

				&:hover {
					.sub-buttons-list {
						z-index: @z-index-context-menu-sub-buttons-list;
					}
				}

				&:not(:hover) {
					.sub-buttons-list {
						z-index: -1;
					}
				}

				.sub-buttons-list {
					position: absolute;
					top: 0;
					left: 0;
					visibility: hidden;
					display: flex;
					height: 100%;
					align-items: center;
					transition: visibility ease-out 200ms;

					button {
						position: relative;
						border-radius: 100%;
						border: none;
						outline: none;
						width: 34px;
						height: 34px;
						background: #ffffff;
						box-shadow: 0 12px 12px rgba(0, 0, 0, 0.237602), 0 0 12px rgba(0, 0, 0, 0.12), 0 6px 6px rgba(0, 0, 0, 0.24), 0 0 6px rgba(0, 0, 0, 0.12);
						color: @context-open-menu;
						margin-right: 5.5px;
						transition: left, z-index;

						span {
							display: block;
							align-items: center;
							overflow: hidden;
							text-align: center;
							font-size: 12px;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-weight: bold;
						}

						&:hover {
							opacity: 0.8;
							z-index: @z-index-context-menu;
						}

						&:last-child {
							margin-right: 0;
						}

						&:first-child {
							margin-left: 66px;
						}

						.loop(@i) when (@i < 10) {
							&:nth-child(@{i}) {
								transition-duration: @i * 100ms;
								left: -20px - (@i * 32px) - (@i * 5.5px);
							}
							.loop(@i + 1)
						}
						.loop(1);
					}
				}
			}
		}
	}
}



