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

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

	.hud-btns {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: $space-4;
	}

	.nav-toggle,
	.reload-screen {
		font-size: 42px;
		width: 50px;
		height: 50px;
		background: $color-text-light;
		color: $color-black;
	}

	.nav-toggle {
		position: relative;
		z-index: 710;

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

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

	.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-primary;
					border-color: $color-primary;
					color: $color-black;
				}
			}

			&.active .nav-item {
				background: $color-accent;
				border-color: $color-accent;
				color: $color-black;
			}
		}

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

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

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