// mobile menu toggle
.mobile-menu-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: var(--linkInitialColor);

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

// menu
.mobile-menu {
	width: 100%;
	font-size: 30px;
	@include media-breakpoint-down (sm) {
		font-size: 23px;
	}
	font-weight: bold;
	list-style: none;
	margin: 0 auto;
	padding: 0 25px;
	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;
		padding: 10px;

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

		&: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 {
		> ul {
			list-style: none;
			// font-size: 0.75em;
			font-size: 20px;
			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 without sub menu
.ct-modal-container:not(.contains-sub-menus) {
	.mobile-menu li a {
		justify-content: center;
	}
}

// menu animation
.ct-modal-container {
	&.ct-fade-in .mobile-menu {
		animation-name: move-in;
	}

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

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

@keyframes move-in {
	0% {
		transform: translate3d(0, -40px, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes move-out {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(0, 40px, 0);
	}
}

// visibility
// @include media-breakpoint-down (md) {
// 	.mobile-menu-toggle {
// 		&:before {
// 			content: 'mobile';
// 			display: none;
// 		}
// 	}
// }