.mobile-menu ul {
	@include list-normalize;

	li {
		a {
			display: flex;
			align-items: center;
		}

		&.active > a {
			color: var(--colorHover);
		}
	}

	.menu-item-has-children,
	.page_item_has_children {
		> ul {
			font-size: 75%;

			&.is-animating {
				transition: height 0.3s ease;
			}
		}

		&:not(.active) > ul {
			display: none;
		}
	}

	.sub-menu {
		overflow: hidden;
	}
}


// type 1
.mobile-menu[data-type="type-1"] ul {
	li {
		a {
			justify-content: space-between;
			min-height: 30px;
			padding: 5px 0;

			&:hover {
				.child-indicator:before {
					opacity: 1;
				}
			}
		}

		&.active > a {
			.child-indicator:before {
				opacity: 1;
			}
		}
	}


	// menu arrow
	.child-indicator {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		align-self: center;
		position: relative;
		margin-left: 15px;
		padding: 10px;

		&:before {
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			opacity: 0.2;
			border-radius: 3px;
			border: 1px solid currentColor;
			transition: opacity 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
				border-color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
		}

		svg {
			width: 13px;
			height: 13px;
		}
	}

	// submenu
	.menu-item-has-children,
	.page_item_has_children {
		> ul {
			padding: 0 0 0 30px;

			li {
				&:first-child {
					padding-top: 10px;
				}

				&:last-child {
					padding-bottom: 10px;
				}

				a {
					position: relative;

					&:before {
						position: absolute;
						content: '';
						top: calc(50% - 2px);
						left: -30px;
						width: 3px;
						height: 3px;
						opacity: 0.3;
						background: currentColor;
						border-radius: 5px;
						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 {
						&:before {
							opacity: 1;
							width: 15px;
						}
					}
				}

				&.active > a:before {
					opacity: 1;
					width: 15px;
				}
			}
		}
	}
}



// type 2
.mobile-menu[data-type="type-2"] > ul {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-menu[data-type="type-2"] ul {
	a {
		position: relative;
		min-height: 45px;
		padding-top: 5px;
		padding-bottom: 5px;

		&:after {
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			// bottom: 0;
			width: 100%;
			height: 1px;
			background: rgba(255, 255, 255, 0.2);
		}
	}

	// submenu
	.menu-item-has-children,
	.page_item_has_children {
		ul {
			padding-left: 30px;

			li {
				a {
					padding-left: 0;

					&:before {
						position: absolute;
						content: '';
						top: calc(50% - 4px);
						left: -15px;
						width: 6px;
						height: 8px;
						margin-right: 15px;
						opacity: 0.3;
						border: 1px solid currentColor;
						border-top: none;
						border-right: none;
						transition: opacity 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
					}

					&:hover {
						&:before {
							opacity: 0.8;
						}
					}
				}

				&.active > a:before {
					opacity: 1;
				}
			}
		}
	}

	// menu plus
	.child-indicator {
		position: absolute;
		top: 1px;
		right: 0;
		margin: 0;
		height: calc(100% - 1px);
		border-left: 1px solid rgba(255, 255, 255, 0.2);

		svg {
			width: auto;
			height: 100%;

			path {
				display: none;
			}
		}

		&:before, &:after {
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 36%;
			height: 2px;
			border-radius: 5px;
			background: currentColor;
			transition: transform 0.1s ease;
		}

		&:after {
			transform: rotate(90deg);
		}
	}

	li.active > a span {
		&:before {
			transform: rotate(45deg);
		}

		&:after {
			transform: rotate(135deg);
		}
	}
}