@use "@styles/common";
@use "@styles/var";
@use "@styles/color";

$panel-width: 30vw;
$panel-width-max: "400px + 3 * #{var.$block-spacing}";
$panel-actual-width: min($panel-width, #{$panel-width-max});

.projects {
	&.with-left-panel, &.with-right-panel {
		#title {
			max-width: calc(100vw - var.$block-spacing - $panel-actual-width - (var(--button-width) + var.$block-spacing * 2) * 2);
		}
	}

	&.with-left-panel {
		#submap {
			transform: translateX(calc($panel-actual-width / 2));
		}

		.panel.panel-left {
			transform: translateX(0);
		}
	}

	&.with-right-panel {
		#submap {
			transform: translateX(calc($panel-actual-width / -2));
		}

		#map .maplibregl-ctrl-bottom-right {
			transform: translateX(calc($panel-actual-width * -1));
		}

		.panel.panel-right {
			transform: translateX(calc(100vw - $panel-actual-width));
		}
	}

	&.with-right-panel.with-left-panel {
		#submap {
			transform: translateX(0);
		}

		#title {
			max-width: calc(100vw - var.$block-spacing - $panel-actual-width * 2 - (var(--button-width) + var.$block-spacing * 2) * 2);
		}
	}

	.panel {
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 1;
		user-select: none;
		width: #{$panel-width};
		max-width: calc(#{$panel-width-max});
		transition: transform var.$trans-slow;
		
		&.moving {
			cursor: grabbing;
			transition: none;
		}

		&.panel-left {
			transform: translateX(-100%);

			.panel-content {
				width: calc(100% - var.$block-spacing);
				margin: var.$block-spacing;
				border-radius: var.$block-radius;
				color: color.$default;
				display: flex;
				flex-direction: column;
				flex-wrap: nowrap;
			}

			.panel-control {
				left: calc(100% + var.$block-spacing);
			}
		}

		&.panel-right {
			transform: translateX(100vw);
			
			.panel-content {
				width: 100%;
				padding-top: var.$block-spacing;
			}

			.panel-control {
				right: calc(100% + var.$block-spacing);
			}
		}

		.panel-content {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;

			input, textarea {
				background-color: color.$post-input-bg;
				color: color.$post;
				outline: none;
			}
		
			button, a.button {
				background-color: color.$default-inv-bg;
				color: color.$default-inv;
		
				&:hover, &:hover a, &:hover a:visited {
					background-color: color.$default-bg;
					color: color.$default;
				}
		
				a, a:visited {
					background-color: color.$default-inv-bg;
					color: color.$default-inv;
					text-decoration: none;
				}
			}
		}
	}

	.panel-control {
		position: absolute;
		
		&.panel-control-top {
			top: var.$block-spacing;
		}

		&.panel-control-bottom {
			bottom: var.$block-spacing;
		}

		.panel-control-elem {
			background-color: color.$default-bg;
			border-radius: var.$block-radius;
			box-shadow: var.$map-shadow;

			&.panel-control-icon {
				cursor: pointer;
				width: var(--button-width);
				height: var(--button-width);
				display: flex;
				align-items: center;
				justify-content: center;

				.spot-icon {
					color: color.$default;
				}

				&:active {
					background-color: color.$default-inv-bg;

					.spot-icon {
						color: color.$default-inv;
					}
				}

				@media (hover: hover) and (pointer: fine) {
					&:hover {
						background-color: color.$default-inv-bg;

						.spot-icon {
							color: color.$default-inv;
						}
					}
				}
			}
		}
	}	
}