.mobile-menu {

	[class*="children"] > ul {
		li {
			a {
				&:before {
					position: absolute;
					content: '';
					top: calc(50% - 2px);
					inset-inline-start: -30px;
					width: 3px;
					height: calc(3px * var(--has-indentation, 1));
					opacity: 0.3;
					border-radius: 5px;
					background: currentColor;
					transition: opacity 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
								background 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
								width 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
				}
			}
		}
	}

	// hover & active state
	li > .ct-sub-menu-parent:hover {
		> a,
		.ct-dropdown-toggle-mobile {
			color: var(--linkHoverColor);
			--icon-color: var(--icon-hover-color, var(--linkHoverColor));
		}
	}

	li.current-menu-item > .ct-sub-menu-parent {
		> a,
	 	.ct-dropdown-toggle-mobile {
			color: var(--linkActiveColor, var(--linkHoverColor));
			--icon-color: var(--icon-active-color, var(--icon-hover-color, var(--linkActiveColor, var(--linkHoverColor))));
		}
	}

	[class*="children"] > ul li a:hover,
	[class*="children"] > ul li.dropdown-active > .ct-sub-menu-parent > a {
		&:before {
			opacity: 1;
			width: 15px;
		}
	}

	// toggle
	.ct-dropdown-toggle-mobile {
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		appearance: none;
		background: transparent;
		color: var(--linkInitialColor);
		flex: 0 0 var(--mobile-toggle-size, 25px);
		width: var(--mobile-toggle-size, 25px);
		height: var(--mobile-toggle-size, 25px);
		margin-inline-end: var(--mobile-toggle-margin-inline-end, -5px);
		transition: var(--transition);

		svg {
			fill: currentColor;
			transition: transform 0.15s linear;
		}
	}

	// toggle animation
	.dropdown-active > .ct-sub-menu-parent {
		.toggle-icon-1, .toggle-icon-3 {
			transform: rotate(-180deg);
		}

		.toggle-icon-2 {
			transform: rotate(-45deg);
		}
	}

	// toggle shape with border
	&[data-toggle-type="type-2"] {
		.ct-dropdown-toggle-mobile {
			--mobile-toggle-margin-inline-end: 0;
			border-radius: 3px;
			border: 1px solid currentColor;
		}

		.toggle-icon-2 {
			width: 12px;
			height: 12px;
		}
	}

	// border
	> ul {
		border-top: var(--mobile-menu-divider);
	}

	li,
	.dropdown-active > .ct-sub-menu-parent {
		border-bottom: var(--mobile-menu-divider);
	}

	.sub-menu li:last-child {
		border-bottom: none;
	}
}