.cms-primary-menu{
	padding: 0;
	margin: 0;
	list-style: none;
	li{
		position: relative;
		padding: 0;
	}
	ul, ol{
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.sub-menu{
		li{
			padding: 0;
			&:last-child{
				> a{
					border-bottom: 0;
					&:after{
						display: none;
					}
				}
			}
		}
		.cms-menu-link{
			display: block;
			font-size: var(--dropdown-font-size);
			font-weight: var(--dropdown-font-weight);
			padding: 10px 0;
			color: var(--dropdown-regular);
			background-color: var(--dropdown-item-bg);
			position: relative;
			border-bottom: 1px solid $border-color;
			&:before{
				@include font-cmsi($menu_item_icon);
				position: absolute;
				left: -40px;
				top: 15px;
				visibility: hidden;
				@include opacity(0);
				@include transition();
				font-size: 65%;
				color: var(--dropdown-hover);
				[dir="rtl"] &{
					@include font-cmsi($menu_item_icon_rtl);
					left: auto;
					right: -40px;
				}
			}
			&:after{
				content: '';
				position: absolute;
				left: 0;
				bottom: -1px;
				width: 0;
				height: 1px;
				background-color: var(--dropdown-hover);
				@include transition();
				[dir="rtl"] &{
					left: auto;
					right: 0;
				}
			}

			&:hover{
				color: var(--dropdown-hover);
				font-weight: var(--dropdown-font-weight-hover);
				background-color: var(--dropdown-item-bg-hover);
				&:before{
					left: -20px;
					visibility: hidden;
					@include opacity(1);
					[dir="rtl"] &{
						left: auto;
						right: -20px;
					}
				}
				&:after{
					width: 100%;
				}
			}

		}
		.current-menu-item,
		.current-menu-ancestor{
			> a{
				color: var(--dropdown-active);
				font-weight: var(--dropdown-font-weight-hover);
				background-color: var(--dropdown-item-bg-hover);
				&:after{
					width: 100%;
				}
			}
		}
		.cms-menu-title{
			display: block;
		}
	}
	.menu-title-wraps{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		> span{
			flex: 0 0 auto;
			width: auto;
			&.menu-title{
				flex-basis: 0;
			    flex-grow: 1;
			    max-width: 100%;
			}
		}
	}
}
@media (min-width: $screen-mobile-menu-min){ //$screen-xl-min
	.cms-primary-menu{
		margin-left: $menu-item-space / -2;
		margin-right: $menu-item-space / -2;
		display: flex;
		flex-wrap: wrap;
		li{
			flex: 0 0 100%;
			width: 100%;
			max-width: 100%;
			// show sub menu
			&:hover{
				> .sub-menu{
					top: 0;
					z-index: 1;
					visibility: visible;
					@include opacity(1);
				}
			}
		}
		// Level 1
		> li {
			flex: 0 0 auto;
			width: auto;
			margin: 0 $menu-item-space /2;
			//separator
			&.cms-separator{
				padding-right: 70px;
				&:before{
					right: 70px;
				}
				&:after{
					content: '';
					width: 2px;
				    height: 27px;
				    display: block;
				    background-color: rgba(#091d3e, 0.15);
				    position: absolute;
				    top: 50%;
				    right: 30px;
				    @include transform(translateY(-50%));
				}
			}
			// bottom line
			&:before{
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 4px;
				@include css3-prefix('transform-origin', 'right center');
				@include transform(scale(0, 1));
				@include transition(transform 0.25s cubic-bezier(0.37, 0.31, 0.2, 0.85));
			}
			// arrow
			.main-menu-toggle:before{
				@include font-cmsi($menu_arrows_down, $menu_arrow_size);
			}
			// sub menu level 1
			> .sub-menu{
				left: 0;
				&.back{
					left: auto;
					right: 0;
				}
				.main-menu-toggle{
					transform: rotate(-90deg);
    				margin-bottom: -5px;	
				}
				[dir="rtl"] &{
					left: auto;
					right: 0;
					&.back{
						right: auto;
						left: 0;
					}
					.main-menu-toggle{
						transform: rotate(90deg);	
					}
				}
			}
			&:hover > .sub-menu{
				top: 100%;
			}
			> a{
				line-height: var(--header-height);
				display: inline-block;
				.cms-menu-title{
					position: relative;
					padding-bottom: 10px;
					&:after{
						content: '';
						display: block;
						position: absolute;
						left: 50%;
						bottom: 0;
						width: 0;
						height: 3px;
						@include transition();
					}
				}
				&:hover{
					.cms-menu-title{
						&:after{
							left: 0;
							width: 100%;
						}
					}
				}
			}
			&.current-menu-item,
			&.current-menu-ancestor,
			&:hover{
				&:before{
					@include css3-prefix('transform-origin', 'left center');
					@include transform(scale(1, 1));
				}
				> a{
					.cms-menu-title:after{
						left: 0;
						width: 100%;
					}
				}
			}
		}
		// Level 2
		.sub-menu{
			min-width: $sub-menu-w;
			color: var(--dropdown-regular);
			background-color: var(--dropdown-bg);
			background-image: $dropdown_bg_img;
			background-repeat: repeat-x;
			background-position: top left;
			position: absolute;
			top: calc(100% + 30px);
			left: 100%;
			padding: 25px 40px;
			z-index: -1;
			visibility: hidden;
			@include box-shadow(var(--dropdown-shadow));
			@include opacity(0);
			@include transition();
			@include border-radius(var(--dropdown-radius));
			&.back{
				left: auto;
				right: 100%;
			}
			[dir="rtl"] &{
				left: auto;
				right: 100%;
				&.back{
					right: auto;
					left: 100%;
				}
			}
			// Parents arrow 
			.cms-parent-menu-icon:before{
				@include font-cmsi("\6a", 12px);
			}
		}
		// Parents arrow 
		.cms-parent-menu-icon{
			float: right;
			&:before{
				margin-left: 5px;
				@include font-cmsi("\6a", 12px);
				[dir="rtl"] &{
					margin-left: 0;
					margin-right: 5px;
				}
			}
			[dir="rtl"] &{
				float: left;
			}
		}
	}
}

// language switcher
.menu-item-object-language_switcher{
	> a > span{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		> .trp-flag-image{
			margin-right: 10px;
			[dir="rtl"] &{
				margin-right: 0;
				margin-left: 10px;
			}
		}
	}
}