// Nav Menu.
.elementor-widget-nav-menu {
	// Base Theme Widget Styles.
	&.vamtam-has-theme-widget-styles {
		&.vamtam-has-contain-link {
			li.menu-item {
				display: flex;
			}
			&.elementor-nav-menu__align- {
				&start {
					li.menu-item {
						justify-content: flex-start;
					}
				}
				&end {
					li.menu-item {
						justify-content: flex-end;
					}
				}
				&center {
					li.menu-item {
						justify-content: center;
					}
				}
				&justify {
					li.menu-item {
						justify-content: stretch;
					}
				}
			}
			a.elementor-item {
				max-width: fit-content;
			}
		}

		&.vamtam-round_menu-links .elementor-nav-menu--dropdown a {
			border-radius: 20px;
		}

		ul.elementor-nav-menu--dropdown {
			a, a:focus, a:hover {
				border-inline-start: none;
			}
		}

		&:not(.vamtam-has-submenu-icon) {
			.elementor-nav-menu .sub-arrow {
				display: none;
			}
		}

		@media (hover: hover) {
			[data-elementor-type="header"] &.vamtam-show-on-hover {
				body:not(.elementor-editor-active) & {
					opacity: 0;
					transition: 0.3s ease-in-out;
				}
			}
			[data-elementor-type="header"]:hover &.vamtam-show-on-hover {
				body:not(.elementor-editor-active) & {
					opacity: 1;
				}
			}
		}

		@media (any-pointer: fine) {
			.e--pointer-theme-underline {
				a.elementor-item {
					@width: var(--vamtam-underline-width, var(--vamtam-global-underline-width, 1px));
					.vamtam-nav-text-wrap .vamtam-nav-text {
						display: inline; // We need this for the milti-line underline anim follow the line breaks properly.
						@tran-time: .5s; // If changed, please update the timeout timer value in the JS handler as well.
						padding-bottom: var(--vamtam-underline-spacing, var(--vamtam-global-underline-spacing, 1px));
						background-image: linear-gradient(var(--vamtam-pointer-color-hover, var(--vamtam-global-underline-bg-color, currentColor)) 0 0);
						background-repeat: no-repeat ;
						transition:
							background-size @tran-time,
							background-position 0s @tran-time; // Change after the size immediately (@tran-time is used as delay here).

					}
					&.elementor-item-active {
						.vamtam-nav-text-wrap .vamtam-nav-text {
							background-image: linear-gradient(var(--vamtam-pointer-color-active, currentColor) 0 0);
						}
					}
					// This class is added from the JS hadler of the widget.
					&.hovered, &:hover {
						.vamtam-nav-text-wrap .vamtam-nav-text {
							background-position: 100% 100%; // Bottom right.
							background-size: 100% @width;
						}
					}
					// Doing it like this allows us to have a minimum exit transition time (set in js handler) between hover ons/offs and avoid flickers caused by fast :hover state changes.
					&:not(:hover):not(.hovered) {
						.vamtam-nav-text-wrap .vamtam-nav-text {
							background-position: 0 100%; // Bottom left.
							background-size: 0% @width;
						}
					}
				}
			}
		}
	}
}
