.cms-menu{
	list-style: none;
	padding: 0;
	margin: 0;
	li{
		position: relative;
		padding: 5px 0;
	}
	.menu-item-inner{
		display: flex;
		flex-wrap: nowrap;
		.cms-menu-link{
			flex: 0 0 auto;
			width: auto;
		}
	}
	// Level 1
	> li {
		> .menu-item-inner > a,
		> a{
			display: flex;
			flex-wrap: wrap;
			> .cms-menu-icon{
				padding-top: 2px;
			}
			> .main-menu-toggle{
				flex: 0 0 100%;
				width: 100%;
				text-align: center;
				line-height: 8px;
				padding-top: 2px;
				&:before{
					@include font-cmsi("\e91d", 8px);
					vertical-align: bottom;
				}
			}
		}
	}
	// Dropdown
	ul.sub-menu{
		list-style: none;
		padding: 10px;
		margin: 0;
		color: var(--dropdown-regular);
		@include transition();
		position: absolute;
		top: calc(100% + 50px);
		left: 0;
		min-width: 170px;
		visibility: hidden;
		opacity: 0;
		z-index: -1;
		background-color: var(--dropdown-bg);
		background-image: $dropdown_bg_img;
		background-repeat: repeat-x;
		background-position: top left;
		@include box-shadow(var(--dropdown-shadow));
		@include border-radius(var(--dropdown-radius));
		[dir="rtl"] &{
			left: auto;
			right: 0;
		}
		a{
			color: $primary-color;
			&:hover{
				color: $accent-color;
			}
		}
	}
	// show dropdown
	li:hover{
		> ul.sub-menu{
			top: calc(100% - 10px);
			visibility: visible;
			opacity: 1;
			z-index: 2;
		}
	}
}
// Menu separator 
.cms-menu-separator{
	>li{
		position: relative;
		&:not(:last-child):after{
			content: '';
			display: inline-block;
			position: absolute;
			top: 50%;
		}
	}
	@each $name, $color in $cms_theme_colors {
		&-#{$name}{
			li:after{
				background: $color;
			}
		}
	}
}
.cms-menu-separator-divider{
	li:not(:last-child):after{
		width: 4px;
		height: 1px;
		right: -2px;
		[dir="rtl"] &{
			right: auto;
			left: -2px;
		}
	}
}
.cms-menu-separator-dot{
	li:not(:last-child):after{
		width: 2px;
		height: 2px;
		right: -1px;
		[dir="rtl"] &{
			right: auto;
			left: -1px;
		}
	}
}
// Menu Horizontal
.cms-menu-horz{
	display: flex;
	flex-wrap: wrap;
	margin: -5px -10px;
	> li{
		flex: 0 0 auto;
		width: auto;
		max-width: 100%;
		padding: 5px 10px;
	}
}
// Menu vertical
.cms-menu-vert{
	> li{
		padding: 4px 0;
	}
}
// Menu wave
.cms-menu-wave{
	.cms-menu{
		margin: 0;
		// Level 1
		> li {
			padding: 0;
			&:not(.menu-item-has-children){
				> .menu-item-inner > a{
					padding-top: 12.5px;
					padding-bottom: 12.5px;
				}
			}
			&:hover{
				.sub-menu{
					top: 100%;
				}
			}
		}
		.cms-menu-wave{
			margin-bottom: -1px;
		}
		// level 2+
		.sub-menu{
			.menu-item-inner .cms-menu-wave{
				display: none;
			}
		}
	} 
	.menu-item-inner{
		overflow: hidden;
		.cms-menu-wave{
			flex: 0 0 38px;
			width: 38px;
		}
	}
	&.cms-menu-wave{
		.cms-menu{
			// Level 1
			> li > .menu-item-inner{
				> a{
					padding-top:6px;
					padding-bottom: 8.5px;
					border-radius: 6px 0 0 0;
					[dir="rtl"] &{
						border-radius: 0 6px 0 0;
					}
				}
			}
		}
	}
	&.cms-menu-wave-start{
		.cms-menu{
			// Level 1
			> li > .menu-item-inner{
				> a{
					padding-left: 20px;
					border-radius: 6px 0 0 0;
					[dir="rtl"] &{
						padding-left: 0;
						padding-right: 20px;
						border-radius: 0 6px 0 0;
					}
				}
				.cms-menu-wave{
					margin-left: -1px;
					clip-path: url(#cms-wave-clippath-end);
					[dir="rtl"] &{
						margin-left: 0;
						margin-right: -1px;
						clip-path: url(#cms-wave-clippath-start);
					}
				}
			}
		}
	}
	&.cms-menu-wave-end{
		.cms-menu{
			// Level 1
			> li  > .menu-item-inner{
				> a{
					padding-right: 20px ;
					border-radius:0 6px 0 0;
					[dir="rtl"] &{
						padding-left: 20px;
						padding-right: 0;
						border-radius: 6px 0 0 0;
					}
				}
				.cms-menu-wave{
					order: -1;
					margin-right: -1px;
					[dir="rtl"] &{
						margin-right: 0;
						margin-left: -1;
					}
				}
				.cms-menu-wave{order: -1;
					margin-right: -1px;
					clip-path: url(#cms-wave-clippath-start);
					[dir="rtl"] &{
						margin-right: 0;
						margin-left: -1;
						clip-path: url(#cms-wave-clippath-end);
					}
				}
			}
		}
	}
}
.cms-menu-wave-item-bg-{
	@each $name, $color in $cms_theme_colors{
		&#{$name} {
			.cms-menu{
				// Level 1
				> li > .menu-item-inner{
					.cms-menu-link,
					.cms-menu-wave{
						background-color: #{$color};
					}
				}
			}
		}
	}
}
.cms-menu-wave-item-bg-hover-{
	@each $name, $color in $cms_theme_colors{
		&#{$name} {
			.cms-menu{
				// Level 1
				> li{
					&:hover,
					&.current-menu-item{
						> .menu-item-inner{
							.cms-menu-link,
							.cms-menu-wave{
								background-color: #{$color};
							}
						}
					}
				}
			}
		}
	}
}

// Layout 2
.cms-menu-layout-2{
	.cms-menu{
		// Level 1
		> li {
			display: flex;
			flex-wrap: wrap;
			justify-content:center;
			> .cms-menu-desc{
				flex: 0 0 auto;
			    width: auto;
			    max-width: 100%;
			    padding-right: 10px;
			    text-align: center;
			    [dir="rlt"] &{
			    	padding-right: 0;
			    	padding-left: 10px;
			    }
			}
		}
	}
}
// Layout 3
.cms-menu-layout-3 {
	.cms-menu{
		> li{
			padding-top: 2px;
			padding-bottom: 2px;
			> a{
				padding: 21.5px 40px;
				display: flex;
    			align-items: center;
    			position: relative;
    			@include border-radius(6px);
    			&.menu-icon-last{
    				justify-content: space-between;
    			}
			}
			&.current-menu-item > a{
				background: $accent-color;
			}
		}
	}
	.menu-title{
		white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
	    flex-basis: 0;
	    flex-grow: 1;
	    max-width: 100%;
	}
}