@use '../../../variables' as *;

.#{$prefix}theme-fci {
	.#{$prefix}navigation-menu-item {
		--#{$prefix}navigation-menu-item-padding-block: 0.5rem;
		--#{$prefix}navigation-menu-item-padding-inline: 0.875rem;
		--#{$prefix}navigation-menu-item-border-radius: 0.5rem;
		--#{$prefix}navigation-menu-item-gap: 0.625rem;

		--#{$prefix}navigation-menu-item-title-font-weight: 600;
		--#{$prefix}navigation-menu-item-title-font-size: 0.875rem;
		--#{$prefix}navigation-menu-item-title-line-height: 1.25rem;

		--#{$prefix}navigation-menu-item-subtitle-font-size: 0.75rem;
		--#{$prefix}navigation-menu-item-subtitle-line-height: 1.125rem;
		--#{$prefix}navigation-menu-item-subtitle-color: #6b7280;

		& > .#{$prefix}overlay {
			--#{$prefix}overlay-color: currentColor;
			--#{$prefix}overlay-opacity: 0;
			--#{$prefix}_hover-overlay-color: currentColor;
			--#{$prefix}_hover-overlay-opacity: 0.08;
			--#{$prefix}_active-overlay-opacity: 0.12;
			transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1),
			            background-color 120ms cubic-bezier(0.4, 0, 0.2, 1);
		}

		&--selected {
			--#{$prefix}navigation-menu-item-selected-color: var(--#{$prefix}primary-color);
			font-weight: 600;

			& > .#{$prefix}overlay {
				--#{$prefix}overlay-color: var(--#{$prefix}primary-color);
				--#{$prefix}overlay-opacity: 0.12;
				--#{$prefix}_hover-overlay-color: var(--#{$prefix}primary-color);
				--#{$prefix}_hover-overlay-opacity: 0.16;
				--#{$prefix}_active-overlay-color: var(--#{$prefix}primary-color);
				--#{$prefix}_active-overlay-opacity: 0.2;
			}
		}

		&--disabled > .#{$prefix}overlay {
			--#{$prefix}overlay-opacity: 0;
		}
	}

	// Size variants - sm (Compact)
	.#{$prefix}navigation-menu--sm {
		--#{$prefix}navigation-menu-popup-padding-inline: 0.25rem; // 4px
		
		.#{$prefix}navigation-menu-item {
			--#{$prefix}navigation-menu-item-padding-block: 0.25rem; // 4px
			--#{$prefix}navigation-menu-item-padding-left: 0.375rem; // 6px
			--#{$prefix}navigation-menu-item-padding-right: 0.375rem; // 6px (Balanced for root)
			--#{$prefix}navigation-menu-item-gap: 0.375rem; // 6px
			--#{$prefix}navigation-menu-item-icon-size: 1.75rem; // 28px

			--#{$prefix}navigation-menu-item-title-font-size: 0.6875rem; // 11px
			--#{$prefix}navigation-menu-item-title-line-height: 0.8125rem; // 13px

			--#{$prefix}navigation-menu-item-subtitle-font-size: 0.625rem; // 10px
			--#{$prefix}navigation-menu-item-subtitle-line-height: 0.6875rem; // 11px
			
			--#{$prefix}navigation-menu-item-description-font-size: 0.5625rem; // 9px
			--#{$prefix}navigation-menu-item-description-line-height: 0.875rem; // 14px (increased)
		}
	}

	// Submenu override for sm (matches dropdown exactly)
	.#{$prefix}navigation-menu-content.#{$prefix}navigation-menu--sm .#{$prefix}navigation-menu-item {
		--#{$prefix}navigation-menu-item-padding-block: 0.25rem; // 4px
		--#{$prefix}navigation-menu-item-padding-left: 0.375rem; // 6px
		--#{$prefix}navigation-menu-item-padding-right: 1.25rem; // 20px
		--#{$prefix}navigation-menu-item-gap: 0.375rem; // 6px
	}

	.#{$prefix}navigation-menu--sm .#{$prefix}navigation-menu-item .#{$prefix}icon {
		--#{$prefix}icon-font-size: 14px;
	}

	// Size variants - md (Default)
	.#{$prefix}navigation-menu--md {
		--#{$prefix}navigation-menu-popup-padding-inline: 0.375rem; // 6px
		
		.#{$prefix}navigation-menu-item {
			--#{$prefix}navigation-menu-item-padding-block: 0.3125rem; // 5px
			--#{$prefix}navigation-menu-item-padding-left: 0.5rem; // 8px
			--#{$prefix}navigation-menu-item-padding-right: 0.5rem; // 8px (Balanced for root)
			--#{$prefix}navigation-menu-item-gap: 0.5rem; // 8px
			--#{$prefix}navigation-menu-item-icon-size: 2rem; // 32px

			--#{$prefix}navigation-menu-item-title-font-size: 0.75rem; // 12px
			--#{$prefix}navigation-menu-item-title-line-height: 0.9375rem; // 15px

			--#{$prefix}navigation-menu-item-subtitle-font-size: 0.6875rem; // 11px
			--#{$prefix}navigation-menu-item-subtitle-line-height: 0.8125rem; // 13px
			
			--#{$prefix}navigation-menu-item-description-font-size: 0.625rem; // 10px
			--#{$prefix}navigation-menu-item-description-line-height: 1rem; // 16px (increased)
		}
	}

	// Submenu override for md (matches dropdown exactly)
	.#{$prefix}navigation-menu-content.#{$prefix}navigation-menu--md .#{$prefix}navigation-menu-item {
		--#{$prefix}navigation-menu-item-padding-block: 0.3125rem; // 5px
		--#{$prefix}navigation-menu-item-padding-left: 0.5rem; // 8px
		--#{$prefix}navigation-menu-item-padding-right: 1.5rem; // 24px
		--#{$prefix}navigation-menu-item-gap: 0.5rem; // 8px
	}

	.#{$prefix}navigation-menu--md .#{$prefix}navigation-menu-item .#{$prefix}icon {
		--#{$prefix}icon-font-size: 16px;
	}

	// Size variants - lg (Spacious)
	.#{$prefix}navigation-menu--lg {
		--#{$prefix}navigation-menu-popup-padding-inline: 0.5rem; // 8px
		
		.#{$prefix}navigation-menu-item {
			--#{$prefix}navigation-menu-item-padding-block: 0.4375rem; // 7px
			--#{$prefix}navigation-menu-item-padding-left: 0.75rem; // 12px
			--#{$prefix}navigation-menu-item-padding-right: 0.75rem; // 12px (Balanced for root)
			--#{$prefix}navigation-menu-item-gap: 0.625rem; // 10px
			--#{$prefix}navigation-menu-item-icon-size: 2.25rem; // 36px

			--#{$prefix}navigation-menu-item-title-font-size: 0.875rem; // 14px
			--#{$prefix}navigation-menu-item-title-line-height: 1.0625rem; // 17px

			--#{$prefix}navigation-menu-item-subtitle-font-size: 0.75rem; // 12px
			--#{$prefix}navigation-menu-item-subtitle-line-height: 0.9375rem; // 15px
			
			--#{$prefix}navigation-menu-item-description-font-size: 0.6875rem; // 11px
			--#{$prefix}navigation-menu-item-description-line-height: 1.125rem; // 18px (increased)
		}
	}

	// Submenu override for lg (matches dropdown exactly)
	.#{$prefix}navigation-menu-content.#{$prefix}navigation-menu--lg .#{$prefix}navigation-menu-item {
		--#{$prefix}navigation-menu-item-padding-block: 0.4375rem; // 7px
		--#{$prefix}navigation-menu-item-padding-left: 0.75rem; // 12px
		--#{$prefix}navigation-menu-item-padding-right: 2rem; // 32px
		--#{$prefix}navigation-menu-item-gap: 0.625rem; // 10px
	}

	.#{$prefix}navigation-menu--lg .#{$prefix}navigation-menu-item .#{$prefix}icon {
		--#{$prefix}icon-font-size: 18px;
	}
}