@media (max-width: 767px) {
	.nav-button {
		margin-left: auto;
	}

	.nav {
		display: block;

		position: absolute;
		top: 100%;
		left: 0;
		right: 0;

		width: 100%;

		background-color: var(--color-white);

		&.nav--hidden {
			display: none;
		}
	}

	.menu {
		padding: 8px 16px;
		border-top: 1px solid var(--color-gray-200);

		max-height: 40vh;
		overflow: auto;

		box-shadow: var(--shadow-sm);

		.menu-item {
			padding: 12px 8px;

			display: flex;
			align-items: center;
			gap: 4px;

			font-size: calc(12 / 16 * 1rem);
			font-weight: bolder;
			text-transform: uppercase;

			.icon {
				width: 20px;
				height: 20px;
				margin: -4px;

				pointer-events: none;

				transition-property: transform;
				transition-timing-function: var(--default-transition-timing-function);
				transition-duration: var(--default-transition-duration);
			}

			&.menu-item--active {
				color: var(--color-primary);
			}

			&:has(+ .submenu .menu-item--active),
			&:hover {
				color: var(--color-primary);
			}

			&:has(+ .submenu--expanded) .icon {
				transform: rotate(180deg);
			}
		}

		.submenu {
			display: none;
			padding-left: 16px;

			&.submenu--expanded {
				display: block;
			}
		}
	}
}

@media (min-width: 768px) {
	.nav-button {
		display: none;
	}

	.nav {
		margin: 0;
	}

	.menu {
		display: flex;
		align-items: center;

		/* Top level menu */

		.menu-item {
			display: block;
			padding: 24px 16px;

			font-size: calc(12 / 16 * 1rem);
			font-weight: bolder;
			text-transform: uppercase;

			transition-property: color;
			transition-timing-function: var(--default-transition-timing-function);
			transition-duration: var(--default-transition-duration);

			&.menu-item--active {
				color: var(--color-primary);
			}

			&:has(+ .submenu .menu-item--active),
			&:hover {
				color: var(--color-primary);
			}
		}

		/* Submenus */

		.submenu {
			opacity: 0;
			visibility: hidden;
			pointer-events: none;

			width: max-content;
			min-width: 180px;
			padding: 8px 0;

			position: absolute;
			top: 100%;
			left: 50%;
			z-index: 10;

			transform: translateX(-50%) translateY(6px);

			transition-property: all;
			transition-timing-function: var(--default-transition-timing-function);
			transition-duration: var(--default-transition-duration);

			background: var(--color-white);
			box-shadow: var(--shadow-sm);
			border-radius: var(--radius-lg);

			.menu-item {
				padding: 10px 20px;

				&.menu-item--active {
					color: var(--color-primary);
				}
			}
		}

		.parent-menu-item .submenu {
			top: 0;
			left: 100%;

			transform: translateX(6px) translateY(0);
		}

		.has-submenu {
			position: relative;

			&:hover > .menu-item {
				color: var(--color-primary);
			}

			&:hover > .submenu {
				opacity: 1;
				visibility: visible;
				pointer-events: auto;

				transform: translateX(-50%) translateY(0px);
			}
		}

		.parent-menu-item.has-submenu {
			&:hover > .submenu {
				transform: translateX(0px) translateY(0);
			}
		}

		.menu-item {
			display: flex;
			align-items: center;
			gap: 8px;

			.icon {
				width: 20px;
				height: 20px;
				margin: -4px;

				pointer-events: none;
			}
		}

		.submenu .menu-item .icon {
			transform: rotate(-90deg);
		}
	}
}