@use "../global" as *;
.navigation-2 {
	&.has-sub-level-1 {
		&:hover {
			& > a {
				color: var(--bs-secondary);
			}
			.navigation-2__menu {
				visibility: visible;
				opacity: 1;
				pointer-events: unset;
				top: calc(100% - 0.25rem);
			}
		}
	}
	&__menu {
		display: none;
		list-style: none;
		padding: 1rem;
		margin: 0;
		border-radius: 0.35rem;
		@include screen(lg) {
			--_spaceer: 1rem;
			position: absolute;
			inset-inline: 0;
			display: flex;
			flex-wrap: wrap;
			gap: var(--_spaceer);
			max-height: calc(100vh - #{rem(72)});
			overflow-y: auto;
			border-radius: 0 0 0.5rem 0.5rem;
			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;
			scrollbar-color: transparent transparent;
			scrollbar-width: none;
			&::-webkit-scrollbar {
				width: 0;
				height: 0;
			}
			&::-webkit-scrollbar-track {
				background: transparent;
			}
			&::-webkit-scrollbar-thumb {
				background: transparent;
			}
		}
		&-link {
			padding: 0.75rem;
			border-radius: 0.35rem;
		}
		&-list + .navigation-2__menu-list {
			margin-top: 1.5rem;
			@include screen(lg) {
				margin-top: 0;
			}
		}
		&-list {
			@include screen(lg) {
				width: calc(33.33% - 0.67rem);
			}
			@include screen(xl) {
				width: calc(25% - 0.75rem);
			}
		}
	}
	&__figure {
		&-img {
			@include screen(sm) {
				width: 40%;
			}
			@include screen(xl) {
				width: 100%;
			}
		}
	}
}
