.delos-app {
	background: $color-ww-blue-dark;
}

.delos-nav {
	display: none;
}
@media (min-width: $vp-large-min) {
	.delos-nav {
		position: fixed;
		z-index: 100;
		left: 0;
		bottom: 0;
		width: 100%;
		height: $nav-height;

		display: flex;
		justify-content: center;
		align-items: top;

		.config {
			display: inline-block;
			position: relative;
			background: $color-ww-punchcard;
			width: $punchcard-width;
			height: $punchcard-height;
			cursor: pointer;
			clip-path: polygon(
				$punchcard-corner-size-sm 0,
				100% 0,
				100% $punchcard-height - $punchcard-corner-size-lg,
				$punchcard-width - $punchcard-corner-size-lg 100%,
				0 100%,
				0 $punchcard-corner-size-sm);

			.content {
				position: absolute;
				top: $punchcard-border-thickness;
				left: $punchcard-border-thickness;
				content: "";
				background: $color-ww-blue-dark;
				width: $punchcard-width - $punchcard-border-thickness*2;
				height: $punchcard-height - $punchcard-border-thickness*2;
				clip-path: polygon(
					$punchcard-corner-size-sm - $punchcard-border-thickness 0,
					100% 0,
					100% $punchcard-height - $punchcard-corner-size-lg - $punchcard-border-thickness,
					$punchcard-width - $punchcard-corner-size-lg - $punchcard-border-thickness 100%,
					0 100%,
					0 $punchcard-corner-size-sm - $punchcard-border-thickness);

				.id {
					text-transform: uppercase;
					color: $color-ww-blue-light;
					font-size: 1.4rem;
					margin-top: 0.9rem;
					margin-left: $punchcard-corner-size-lg;
				}

				.name {
					color: #fff;
					opacity: 0.5;
					font-size: 1.2rem;
					margin-top: 0.3rem;
					margin-left: $punchcard-corner-size-lg;
				}


			}
			
			&:hover {
				.content {
					background: none;
				}
			}
			
			&.is-active {
				background: $color-ww-punchcard-active;

				.content {
					background: none;
				}
			}
		}
	}
}

.chart {
	position: fixed;
	z-index: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden; // to hide offset grid

	.grid {
		transform: translate(50%, 50%);
		width: 100%;
		height: 100%;
	}

	&.is-dragging {
		cursor: -webkit-grabbing;

		.slider {
			cursor: -webkit-grabbing;
		}
	}
}
@media (min-width: $vp-large-min) {
	.chart {
		bottom: $nav-height;
	}
}

.slider {
	position: absolute;
	border-radius: 100%;
	background: $color-ww-blue-light;
	width: 2.0rem;
	height: 2.0rem;
	transform: translate(-50%, -50%);
	cursor: -webkit-grab;
	opacity: 0.6;

	&:after {
		position: absolute;
		top: -1.0rem;
		bottom: -1.0rem; 
		left: -1.0rem;
		right: -1.0rem; 
		content: "";
	}
}

.rendering {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

.guides {
	@extend .rendering;
	// z-index: 100;
}

.star {
	@extend .rendering;
	// z-index: 200;
}

.attribute {
	position: absolute;
	text-transform: uppercase;
	font-size: 1.2rem;
	color: $color-ww-blue-light;

	.amount {
		color: #fff;
		opacity: 0.7;
	}

	&.is-max {
		background: $color-ww-red-alpha;
		color: rgba(255, 255, 255, 0.5);
		padding: 0.8rem;
		margin: -0.9rem 0 0 -0.9rem;
		border: 0.1rem solid $color-ww-yellow-alpha;

		.amount {
			color: $color-ww-yellow;
			opacity: 1;
		}
	}
}
@media (min-width: $vp-large-min) {
	.attribute {
		font-size: 1.4rem;
	}
}