@use '@lucca-front/scss/src/commons/utils/a11y';
@use '@lucca-front/scss/src/commons/utils/namespace';

@mixin compact {
	background-color: var(--components-navSide-compact-palette-bg-color);
	text-align: center;

	@at-root {
		@include namespace.appendRootVars {
			&:has(.navSide) {
				--commons-navSide-width: 15rem;
			}

			// .mod-withMenuCompact is deprecated
			&:has(.navSide.mod-compact, .mod-withMenuCompact) {
				--commons-navSide-width: 7.5rem;
			}

			@supports not selector(:has(*)) {
				--commons-navSide-width: 15rem;
			}
		}
	}

	.navSide-mainSection,
	.navSide-scrollWrapper {
		inline-size: var(--commons-navSide-width);
	}

	.navSide-item-link {
		color: var(--components-navSide-compact-palette-text);
		font-size: var(--components-navSide-compact-font-size);
		padding-block: var(--pr-t-spacings-150);
		padding-inline: var(--pr-t-spacings-50);
		flex-direction: column;
		justify-content: center;
		position: relative;
		text-align: center;
		row-gap: var(--pr-t-spacings-50);
	}

	.navSide-item-arrow,
	.navSide-item-subMenu {
		display: none;
	}

	.navSide-item-link-badgesOptional {
		flex-direction: column;
		margin-inline-start: inherit;
	}

	.numericBadge,
	.newBadge {
		margin-inline-start: inherit;
	}

	.navSide-item-placeholder {
		flex-direction: column;

		&::before {
			block-size: 1.5em;
			inline-size: 1.5em;
		}

		&::after {
			margin-inline-start: 0;
			margin-block-start: var(--pr-t-spacings-150);
			inline-size: 100%;
		}
	}

	.navSide-bottomSection {
		inline-size: var(--commons-navSide-width);

		.navSide-item-link {
			background-color: var(--components-navSide-bottom-section-palette-bg-color);
			color: var(--components-navSide-bottom-section-palette-text);

			&:hover {
				background-color: var(--components-navSide-bottom-section-palette-hovered-bg);
				color: var(--components-navSide-bottom-section-palette-hovered-text);
			}
		}
	}
}

@mixin compactHover {
	background-color: var(--components-navSide-compact-palette-hovered-bg);
	color: var(--components-navSide-compact-palette-hovered-text);
}

@mixin compactActive {
	background-color: var(--components-navSide-compact-palette-selected-bg);
	color: var(--components-navSide-compact-palette-selected-text);
	opacity: 1;
}

@mixin banner {
	inset-block-start: var(--commons-banner-height);
}

@mixin mobileToggle {
	display: none;
}

@mixin mobile {
	padding-block-start: var(--commons-navSide-mobile-toggle-height);
	inline-size: 100%;
	inset-block-end: auto;

	.navSide-mainSection,
	.navSide-scrollWrapper {
		inline-size: 100%;
		block-size: auto;
	}

	.navSide-scrollWrapper {
		padding: 0;
	}

	.navSide-item {
		&.mod-mobileToggle {
			block-size: var(--commons-navSide-mobile-toggle-height);
			background-color: var(--palettes-product-800);
			inset-block-start: 0;
			inset-inline: 0;
			z-index: 1;
			display: block;
			position: fixed;
			cursor: pointer;

			.navSide-item-link {
				border-radius: 0;

				&:focus-visible {
					box-shadow: 0 0 0 2px var(--components-navSide-fullwidth-palette-selected-text) inset;
				}
			}
		}
	}

	.navSide-bottomSection {
		background-color: transparent;
		inline-size: auto;
		block-size: auto;
		padding: 0;
	}
}

@mixin inAppLayout {
	position: relative;
	padding-block-start: 0;
	block-size: var(--commons-navSide-mobile-toggle-height);
}

@mixin inAppLayoutWide {
	position: static;
	block-size: 100%;
}

@mixin inAppLayoutNarrow {
	.navSide-item.mod-mobileToggle {
		position: sticky;
		inset-block-start: 0 !important;
	}

	&:not(.is-open) {
		.navSide-bottomSection {
			display: none;
		}
	}

	&.is-open {
		padding-block-start: 0;
		block-size: calc(var(--components-appLayout-blockSize) - var(--commons-banner-height));
	}

	.navSide-bottomSection {
		position: sticky;
		inset-block-end: 0;
	}
}