@use "../global" as *;
.navigation-0 {
	&.has-sub-level-1 {
		&:hover {
			@include screen(lg) {
				&:hover {
					& > a {
						color: var(--bs-secondary);
					}
					.navigation-0__menu {
						visibility: visible;
						opacity: 1;
						pointer-events: unset;
						top: calc(100% - 0.25rem);
					}
				}
			}
		}
	}
	&--column-5 {
		.navigation-0__menu-list {
			@include screen(lg) {
				width: calc(20% - #{rem(13)});
			}
		}
	}
	&--column-6 {
		.navigation-0__menu-list {
			@include screen(lg) {
				width: calc(16.6% - #{rem(13)});
			}
		}
	}
	&__menu {
		display: none;
		list-style: none;
		padding: 0.25rem 0;
		margin: 0;
		border-radius: 0.25rem;
		@include screen(lg) {
			--_spaceer: 1rem;
			position: absolute;
			inset-inline: 0;
			padding: 1.25rem;
			display: flex;
			flex-wrap: wrap;
			gap: var(--_spaceer);
			max-height: rem(380);
			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;
			}
		}
		@include screen(xl) {
			max-height: rem(644);
		}
		@include screen(xxl) {
			max-height: rem(724);
		}
		&-link {
			display: block;
			padding: 0.25rem 0.75rem;
			@include screen(lg) {
				padding: 0.5rem;
				border-radius: 0.25rem;
			}
			@include screen(xl) {
				padding: 0.75rem;
			}
		}
		&-img {
			display: none;
			@include screen(lg) {
				display: block;
				aspect-ratio: 4/3;
				width: 100%;
				object-fit: cover;
				border-radius: 0.25rem;
			}
		}
		&-title {
			display: block;
			font-size: rem(14);
			@include screen(lg) {
				margin-top: 0.5rem;
				text-align: center;
			}
		}
	}
}
