.mobile-menu {
	width: 100%;
}

[data-align="center"] .mobile-menu {
	&:not(.has-submenu) a {
		justify-content: center;
	}
}

[data-align="right"] .mobile-menu {
	&:not(.has-submenu) a {
		justify-content: flex-end;
	}
}


.mobile-menu ul {
	--listIndent: 0;
	--listItemSpacing: 0;
	--listStyleType: none;
	margin-bottom: 0;

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

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

	.menu-item-has-children,
	.page_item_has_children {
		> ul {
			font-size: var(--mobile_menu_child_size, 20px);

			&.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: 8px;

		&: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: 12px;
			height: 12px;
		}
	}

	// submenu
	.menu-item-has-children,
	.page_item_has_children {
		> ul {
			padding-left: 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: var(--mobile-menu-divider);
}

.mobile-menu[data-type="type-2"] ul {
	
	li {
		border-top: var(--mobile-menu-divider);
	}

	a {
		position: relative;
		min-height: 2.2em;
		padding-top: 5px;
		padding-bottom: 5px;
	}

	// 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: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		border-left: var(--mobile-menu-divider);

		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);
		}
	}
}