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

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

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

	/* 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(0px 1px 1px color.$over-img-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(0px 1px 1px color.$over-img-shadow);
		}

		&.message {
			.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;
			}
		}
	}
}