.nav-btns {
	@include flex(2.2rem, center, center, column);

	position: fixed;
	top: 3rem;
	right: 4rem;
	z-index: 201;

	aspect-ratio: 1;

	& * {
		user-select: none !important;
	}
}

.nav-btn {
	&,
	&:visited,
	&:link {
		@include flex(0, center, center, column);

		aspect-ratio: 1;

		padding: 1.3rem;

		background-color: $color-white;

		border-radius: 50%;
		box-shadow: $shadow-grey;
		cursor: pointer;
		backface-visibility: hidden;
		transition: $transition-regular;
	}

	&:hover {
		transform: scale(1.15);
	}

	&:hover {
		transform: scale(1.15);
	}

	&--inactive:hover {
		& .nav-btn__bar {
			&::before {
				transform: translateY(-0.9rem);
			}

			&::after {
				transform: translateY(0.9rem);
			}
		}
	}

	&--active {
		& .nav-btn__bar {
			background-color: transparent;

			&::before {
				transform: rotate(45deg) translateX(0);
			}

			&::after {
				transform: rotate(-45deg) translateX(0);
			}
		}
	}

	&__content {
		@include flex(0.4rem, center, center, column);

		position: relative;

		width: 3rem;
		height: 2.4rem;

		transition: $transition-regular;
	}

	&__bar {
		position: relative;

		display: block;

		width: 3rem;
		height: 3px;

		background-color: $color-grey-regular;

		transition: $transition-regular;

		&::before,
		&::after {
			position: absolute;
			inset: 0;

			width: 3rem;
			height: 3px;

			background-color: $color-grey-regular;

			content: "";
			transition: $transition-regular;
		}

		&::before {
			transform: translateY(-0.7rem);
		}

		&::after {
			transform: translateY(0.7rem);
		}
	}

	&__icon {
		font-size: 3.4rem;

		color: $color-grey-regular;
	}
}

.nav {
	@include flex(0, center, center);

	position: fixed;
	inset: 0;

	width: 100vw;
	height: 100vh;
	z-index: 200;

	background-image: linear-gradient(to right bottom, #ee7085, #b81f39);

	overflow: hidden;
	transform: translateY(-100%);
	transition: all 0.5s cubic-bezier(0.81, 0, 0.76, 1);

	&--active {
		transform: translateY(0);

		& .nav__list {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
		}
	}

	&__backdrop {
		position: absolute;
		inset: 0;
		z-index: 1;

		width: 110vw;
		height: 110vh;

		background-color: rgba(0, 0, 0, 0.6);

		backdrop-filter: blur(8px);
		transition: $transition-regular;
	}

	&__list {
		@include flex(3.4rem, center, center, column);

		min-width: 20%;
		max-width: 40%;

		transition: all 0.5s cubic-bezier(0.81, 0, 0.76, 1);
		opacity: 0;
		visibility: hidden;
		transform: translateY(60vh);

		@include respond(tab-port) {
			max-width: 80%;
		}

		@include respond(phablet) {
			gap: 2rem;
		}
	}

	&__item {
		position: relative;

		width: 100%;

		&:hover,
		&--active {
			& .nav__link {
				color: $color-black;

				&::before {
					opacity: 1;
					transform: translate(0) skew(-15deg);
				}
			}
		}
	}

	&__link {
		&,
		&:link,
		&:visited {
			@include flex(0, center, center);

			position: relative;

			width: 100%;

			padding: 2rem 5rem;

			font-family: $font-family-regular;
			text-align: center;
			font-size: 3.6rem;
			text-transform: uppercase;
			font-weight: 300;
			color: $color-white;

			background-color: unset;

			cursor: pointer;

			@include respond(phablet) {
				font-size: 2.4rem;
			}
		}

		&::before {
			position: absolute;
			inset: 0;

			width: 100%;
			height: 100%;
			z-index: -1;

			background-color: transparentize($color-white, 0.05);

			content: "";
			opacity: 0;
			transform: translateX(150%) skew(-15deg);
			transition: $transition-regular;
		}
	}

	&__dropdown {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 2;

		width: 100%;

		transform: translate(-50%, -50%) scale(1);
		transition: all 0.2s ease-out;

		&.hidden {
			transform: translate(-50%, -50%) scale(0.5);
		}

		@include respond(phablet) {
			width: 75%;
		}
	}

	&__dropdown-wrapper {
		@include flex(2rem, center, center, column);

		width: 100%;

		overflow: hidden;
		transition: $transition-regular;
	}

	&__dropdown-item {
		width: max-content;

		@include respond(phablet) {
			width: auto;
		}
	}

	&__dropdown-link {
		@include flex(0, center, center);

		position: relative;

		width: 100%;

		padding: 0.6rem 3rem;

		font-size: 2rem;
		font-weight: 300;
		text-transform: uppercase;
		color: $color-white;
		text-shadow: $text-shadow-grey;

		&:hover::before {
			transform: scaleX(1);
		}

		&::before {
			position: absolute;
			bottom: 0;
			left: 0;

			width: 100%;
			height: 2px;

			content: "";
			background-color: $color-white;
			transform: scaleX(0);
			transform-origin: left;
			transition: $transition-regular;
		}

		@include respond(phablet) {
			font-size: 1.7rem;
			text-align: center;
		}
	}
}
