@use '@lucca-front/scss/src/commons/utils/media';
@use '@lucca-front/scss/src/commons/utils/keyframe';
@use 'exports' as *;

.navSide {
	@layer components {
		@include vars;
		@include component;
	}

	@layer mods {
		.appLayout-navSide & {
			@include inAppLayout;

			@include media.min('S') {
				@include inAppLayoutWide;
			}

			@include media.max('S') {
				@include inAppLayoutNarrow;
			}
		}

		&.mod-withBanner {
			@include banner;
		}

		&.mod-compact {
			@include media.min('S') {
				@include compact;

				.navSide-item-link {
					&:hover {
						@include compactHover;
					}

					// .active is deprecated
					&:is(.is-active, .active) {
						@include compactActive;
					}
				}
			}
		}

		@include media.max('S') {
			@include mobile;
		}

		@include media.max('S') {
			&:not(.is-open, .open) {
				.navSide-item {
					&:not(.mod-mobileToggle) {
						@include mobileHidden;
					}
				}
			}

			&:is(.is-open, .open) {
				@include mobileOpen;

				&.mod-withBanner {
					@include mobileOpenBanner;
				}
			}
		}

		@include media.max('S') {
			&.mod-withBanner {
				.navSide-item {
					&.mod-mobileToggle {
						@include banner;
					}
				}
			}
		}
	}
}

@layer mods {
	.navSide-item {
		&.mod-mobileToggle {
			@include mobileToggle;
		}

		&:not(.is-open) {
			@include notOpen;
		}

		&:is(.is-open, .open) {
			@include expanded;

			.navSide-item-subMenu-link {
				&:is(:hover) {
					@include sublinkHover;
				}

				// .active is deprecated
				&:is(.is-active, .active) {
					@include sublinkActive;
				}
			}
		}
	}

	.navSide-item-subMenu-link,
	.navSide-item-link {
		// .active is deprecated
		&:is(.is-active, .active) {
			@include active;
		}

		&:is([aria-expanded='true']) {
			@include expanded;
		}
	}

	html {
		&:is(.hasMenu, .withMenu) {
			@include media.max('S') {
				@include overlay;
			}
		}
	}
}