.mobile-menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var(--linkInitialColor);
	transition: color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);

	&:hover {
		color: var(--linkHoverColor);
	}
}

// menu
.mobile-menu {
	width: 100%;
	list-style: none;
	margin: 0 auto;
	overflow-y: auto;

	> li {
		max-width: 500px;
		margin: 0 auto;
	}

	li {
		a {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5px 0;
			color: var(--menuInitialColor);

			&:hover {
				color: var(--menuHoverColor);

				.menu-arrow:before {
					opacity: 1;
				}
			}
		}

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

			.menu-arrow:before {
				opacity: 1;
			}
		}
	}

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

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

	.menu-item-has-children,
	.page_item_has_children {
		> ul {
			list-style: none;
			margin: 0;
			padding: 0 0 0 30px;
			overflow: hidden;
			box-sizing: border-box;

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

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

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

// menu logo
#mobile-menu .ct-bag-content {
	align-items: center;

	.site-branding {
		--linkInitialColor: var(--menuInitialColor);
		--linkHoverColor: var(--menuHoverColor);

		margin-bottom: 15%;
	}
}


// menu without sub menu
.ct-bag-container:not(.contains-sub-menus) {
	.mobile-menu li a {
		justify-content: center;
	}
}

// menu animation
.ct-bag-container {
	&.ct-fade-in {
		.mobile-menu,
		.site-branding {
			animation-name: move-in;
		}
	}

	&.ct-fade-out {
		.mobile-menu,
		.site-branding {
			animation-name: move-out;
		}
	}

	&.ct-animated {
		.mobile-menu,
		.site-branding {
			animation-duration: 0.3s;
			animation-fill-mode: both;
		}
	}
}