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

@circle-diameter: 150px;
@point-size: 25px;
@arrow-height: 75px;
@arrow-width: 5px;
@background-color: rgba(0, 0, 0, 0.5);
@border-color: #494949;

:host {
	position: fixed;
	outline: none;
	transform: translate(-@circle-diameter / 2, -@circle-diameter / 2);
	width: 0;
	height: 0;
	z-index: @z-index-context-menu;

	* {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	div.north-container{
		width: @circle-diameter;
		height: @circle-diameter;
		position: absolute;
	.north {
		position: absolute;
		transform: translate(-50%);
		background: @background-color-3;
		padding: 0 2px;
		top: -25px;
		left: 75px;
		font-weight: bold;
		z-index: @z-index-map-rotation + 1;
	}
	}
	&:focus {
		div.angle-filter {
			visibility: visible;
			transition: visibility 200ms;
		}
	}

	div.angle-filter {
		visibility: hidden;
		transition: visibility 200ms;
		display: flex;
		flex-direction: column;

		div.circle {
			display: flex;
			flex: 1;
			width: @circle-diameter;
			height: @circle-diameter;
			-webkit-border-radius: 100%;
			-moz-border-radius: 100%;
			border-radius: 100%;
			background-color: @background-color;
			border: 1px solid @border-color;

			p.point {
				width: @point-size;
				height: @point-size;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 0;
				position: absolute;
				top: 60px;
				left: 62px;
				background: white;
				-webkit-border-radius: 100%;
				-moz-border-radius: 100%;
				border-radius: 100%;
				z-index: 5;

				i {
					color: black;
					font-size: @point-size - 5;
				}
			}

			div.arrows {
				position: relative;
				top: 0;
				width: 100%;
				height: 100%;

				span.arrow {
					position: absolute;
					left: calc(50% - 3.5px);
					transform-origin: bottom;
					display: inline-block;
					width: @arrow-width;
					height: @arrow-height;
					cursor: pointer;

					&:before {
						box-sizing: border-box;
						content: "";
						display: block;
						position: absolute;
						left: 50%;
						transform: translate(-50%, 0);
						top: 1px;
						bottom: 0;
						width: 1px;
						background: @application-primary-color;
						zoom: 2;

					}

					&.active:before, &:hover {
						background: @application-contrast-color;
						z-index: 2;
					}

					&:hover {
						border-color: @application-contrast-color;
						z-index: 2;
					}
				}
			}
		}

		div.rectangles {
			display: flex;
			justify-content: center;
			width: @circle-diameter;
			margin-top: 15px;

			button {
				width: 30px;
				height: 30px;
				border: 1px solid @border-color;
				background-color: @background-color;
				margin: 5px;
				padding: 0;

				i {
					color: white;
				}

				&:hover:not(:disabled) {
					border-color: @application-contrast-color;
					z-index: 2;
					cursor: pointer;
				}

				&:disabled {
					background-color: @background-color;
					opacity: 0.7;
				}
			}
		}

	}
}
