@use "@styles/var";

@media only screen and (max-width: 800px) {

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

	.desktop {
		display: none !important;
	}

	.projects {
		--button-width: 51px;

		.panel-control {
			font-size: 2em;
		}

		.panel {
			width: calc(#{$panel-width});
			max-width: calc(#{$panel-width});
		}

		#settings #title {
			left: calc(100% + var(--button-width) + 2rem);
			max-width: calc(100vw - 1rem - (var(--button-width) + 2rem) * 2);
			text-align: center;
			width: 100%;
			transition: none;

			span {
				font-size: 0.8em;
			}
		}

		#settings #settings-panel .settings-header {
			padding: var.$block-spacing;

			img.logo-title {
				margin-top: var.$elem-spacing;
			}
		}

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

			#submap {
				transform: translateX(0);
			}
		}
	
		&.with-right-panel {
			.panel.panel-left {
				transform: translateX(-200vw);
			}
	
			.panel.panel-right {
				transform: translateX(calc(var(--button-width) + var.$block-spacing * 2));
			}
		}
	
		&.with-left-panel {
			.panel.panel-left {
				transform: translateX(0);
			}

			.panel.panel-right {
				transform: translateX(200vw);
			}
		}
	}

	.lightbox .lb-outerContainer .lb-container .lb-nav {
		a.lb-prev, a.lb-next  {
			height: 100%;
			width: 100%;
		}

		a.lb-prev::before {
			left: 1em;
		}

		a.lb-next::before {
			right: 1em;
		}
	}

	#map .maplibregl-ctrl-bottom-right {
		display: none;
	}
}