@use "../global" as *;
.navigation-1 {
	@include screen(lg) {
		position: relative;
		isolation: isolate;
	}
	&.has-sub-level-1 {
		@include screen(lg) {
			&:hover {
				.navigation-1__menu {
					visibility: visible;
					opacity: 1;
					pointer-events: unset;
					top: 100%;
				}
			}
		}
	}
	&__menu {
		display: none;
		list-style: none;
		padding: 0.25rem 0;
		margin: 0;
		border-radius: 0.25rem;
		@include screen(lg) {
			display: block;
			padding: 0.25rem;
			position: absolute;
			top: calc(100% + 1rem);
			width: rem(210);
			filter: drop-shadow(0 0.25rem 0.75rem rgba(var(--bs-black-rgb), 0.15));
			visibility: hidden;
			opacity: 0;
			pointer-events: none;
			z-index: 99;
			transition: all 0.3s ease;
		}
		&-link {
			display: block;
			padding: 0.25rem 0.75rem;
			font-size: rem(14);
		}
		&-list {
			&.has-sub-level-2 {
				@include screen(lg) {
					position: relative;
					&:hover {
						.navigation-1__sub-menu {
							visibility: visible;
							opacity: 1;
							pointer-events: unset;
							left: 100%;
						}
					}
				}
			}
		}
	}
	&__sub-menu {
		display: none;
		list-style: none;
		padding: 0.25rem 0 0.25rem 1rem;
		margin: 0;
		border-radius: 0.25rem;
		@include screen(lg) {
			display: block;
			padding: 0.25rem;
			position: absolute;
			top: 0;
			left: 90%;
			width: rem(180);
			border-radius: 0.25rem;
			visibility: hidden;
			opacity: 0;
			pointer-events: none;
			z-index: 99;
			transition: all 0.3s ease;
		}
		&-link {
			display: block;
			padding: 0.25rem 0.75rem;
			font-size: rem(14);
			@include screen(lg) {
				border-radius: 0.25rem;
			}
		}
	}
}
