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

@use '@styles/page.project.panel' as panel;
@use '@styles/page.project.panel.feed' as feed;
@use '@styles/page.project.panel.settings' as settings;

@use '@styles/page.project.map' as map;

.projects {
	--space: #{color.$space};
	--horizon: #{color.$horizon};
	--track-main: #{color.$main-track};
	--track-off-track: #{color.$off-track};
	--track-hitchhiking: #{color.$hitchhiking};
	--button-width: 31px;

	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	/* Background colors (below map) */

	#space {
		background: color.$space;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
	}

	#submap {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		transition: transform 0.5s;

		.loader {
			position: absolute;
			font-size: 3em;
			top: calc(50% - 0.5em);
			left: calc(50% - 1.25em/2);
			color: color.$loader;
		}
	}

	/* Drill icon */

	.drill {
		position: relative;
		overflow: hidden;
		text-decoration: none;
		display: inline-block;
		line-height: 0;

		.drill-icon {
			position: absolute;
			display: inline-block;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 2.5em;
			filter: drop-shadow(var.$elem-shadow);

			&.message {
				transform: translate(-50%, -100%);
			}
			
			.spot-icon {
				transition: color 0.3s, text-shadow 0.3s;
			}
		}
	}

	/* Icon Stack */

	.spot-icon-stack {
		&:not(.drill-icon) {
			font-size: 2.5em;
			filter: drop-shadow(var.$elem-shadow);
		}

		&.message, &.project {
			.main {
				color: color.$message-flashy;
			}
			.sub {
				color: color.$message;
			}
		}

		&.media {
			.main {
				color: color.$media-flashy;
			}
			.sub {
				color: color.$media;
			}
		}

		&.track {
			.track-start {
				color: color.$track-start;
			}
			.track-end {
				color: color.$track-end;
			}
		}
	}
}