[class*="animated-submenu"] {

	> .sub-menu {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, margin 0.2s ease, height 0.2s ease;
	}

	&.ct-active {

		> .sub-menu {
			opacity: 1;
			visibility: visible;
			pointer-events: auto;
		}
	}

	&:not(.ct-active):not([class*="ct-mega-menu"]) {

		> .sub-menu {
			overflow: hidden;
			max-height: calc(100vh - var(--header-height) - var(--admin-bar, 0px) - var(--theme-frame-size, 0px) - 10px);
		}
	}
}


// type 1
[data-dropdown*='type-1'] [class*="animated-submenu"] {	

	> .sub-menu {
		transform: translate3d(0, 10px, 0);
	}

	&.ct-active {

		> .sub-menu {
			transform: translate3d(0, 0, 0);
		}
	}
}


// type 3
[data-dropdown*='type-3'] [class*="animated-submenu"] {

	> .sub-menu > li {
		// opacity: 0;
		// transform: translate3d(0, 5px, 0);
		transition: opacity 0.5s cubic-bezier(0.35, 0.81, 0.41, 1), transform 0.5s cubic-bezier(0.35, 0.81, 0.41, 1);
	}

	// &.ct-active {

	// 	> .sub-menu > li {
	// 		opacity: 1;
	// 		transform: translate3d(0, 0, 0);
	// 	}
	// }

	// don't apply transform all the time
	// because it causes stacking context issues
	&:not(.ct-active) {

		> .sub-menu > li {
			opacity: 0;
			transform: translate3d(0, 5px, 0);
		}
	}
}


// type 4
[data-dropdown*='type-4'] [class*="animated-submenu"] {
	
	> .sub-menu {
		transition: none;
	}
}