.hud {
	width: 100%;
	padding: $space-5;

	& > .row {
		justify-content: space-between;
    align-items: center;
    gap: $space-4;
    flex-wrap: wrap;
	}

	.nav-toggle {
		font-size: 42px;
		width: 50px;
		height: 50px;
		background: $color-text-light;
		color: $color-black;
		position: relative;
		z-index: 710;

		&.state-off {
			.icon-state-on {
				display: none;
			}
		}

		&.state-on {
			.icon-state-off {
				display: none;
			}
		}

		// &:hover {
		// 	color: $color-success;
		// }
	}

	.app-title {
		padding: $space-2 $space-4;
		text-transform: uppercase;
	}

	.navigation {
		position: fixed;
		z-index: 700;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		
		background: $color-black;
		opacity: 0;
		visibility: hidden;

		transition-duration: .2s;
		transition-property: visibility, opacity;

		.container {
			width: 100%;
			max-width: 600px;
	    height: 100vh;

			margin: auto;
			padding: $space-3;

    	display: flex;
    	align-items: center;
		}

		.nav-items {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: $space-10;
    	align-items: center;
    	justify-content: space-between;

    	height: max-content;
    	margin-top: 100px;

    	transition-duration: .2s;
    	transition-property: margin-top;
		}

		.nav-link {
			text-decoration: none;
			color: $color-text-light;
		}

		.nav-item {
			width: 160px;
			border: 2px solid $color-text-light;
			padding: $space-6;
			display: flex;
			flex-direction: column;
			gap: $space-3;

			transition-property: color, background, border-color;
			transition-duration: .2s;

			.nav-icon {
				text-align: center;

				.ph, .ph-bold {
					font-size: 64px;
				}
			}

			.nav-text {
				width: 100%;
				text-align: center;
				text-transform: uppercase;
				font-size: $font-size-lg;
			}

			&:hover {
				background: $color-success;
				border-color: $color-success;
				color: $color-black;
			}
		}

		&.a-show {
			visibility: visible;
			opacity: 1;

			.nav-items {
				margin-top: 0;
			}
		}

		&.a-hide {
			.nav-items {
				margin-top: -100px;
			}
		}
	}
}