@use "fa/variables";
@use "var";
@use "color";

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

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

	/* Drill icon */

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

		.drill-icon {
			position: absolute;
			display: inline-block;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			
			i {
				transition: color 0.3s, text-shadow 0.3s;
			}
		}
	}

	/* Icon Stack */

	.icon-stack {
		.#{variables.$fa-css-prefix}-stack-2x {
			font-size: 32px;
			text-shadow: color.$over-img-shadow 3px 3px 3px;
		}
		
		.#{variables.$fa-css-prefix}-stack-1x {
			font-size: 13px;
		}

		&.message {
			.#{variables.$fa-css-prefix}-stack-2x {
				color: color.$message-flashy;
			}
			.#{variables.$fa-css-prefix}-stack-1x {
				color: color.$message;
			}
		}

		&.media {
			.#{variables.$fa-css-prefix}-stack-2x {
				color: color.$media-flashy;
			}
			.#{variables.$fa-css-prefix}-stack-1x {
				color: color.$media;
			}
		}

		&.track {
			.#{variables.$fa-css-prefix}-stack-1x {
				font-size: 14px;
				top: 1px;
			}
			.#{variables.$fa-css-prefix}-track-start {
				color: color.$track-start;
			}
			.#{variables.$fa-css-prefix}-track-end {
				color: color.$track-end;
			}
		}
	}
}