.mobile-shop-panel {
	.panel__header {
		padding: 30px;

		&:after {
			display: none;
		}
	}

	.panel__content {
		overscroll-behavior-y: contain;
		overflow-y: auto;
		flex: 1 1 auto;
		padding-bottom: 20px;

		scrollbar-width: 1px;
		scrollbar-color: var(--em-color__grayer);
		border-radius: var(--em-modal-content-border-radius);

		&::-webkit-scrollbar {
			width: 5px;
		}

		&::-webkit-scrollbar-thumb {
			background-color: transparent;
			border-radius: 8px;
		}

		&::-webkit-scrollbar-thumb {
			background-color: rgba(0, 0, 0, 0.16);
		}

		&::-webkit-scrollbar-track {
			background-color: rgba(255, 255, 255, 0.05);
		}
	}

	.panel__footer {
		padding: 15px 20px 0;

		.mobile-shop-panel__footer-button {
			display: flex;
			align-items: center;
			padding: 35px 0;
			border-top: 1px solid var(--em-border-color);
			background-color: var(--em-color__light);
		}

		a {
			display: inline-flex;
		}
	}
}

.mobile-shop-navigation {
	padding: 0 20px;

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	ul.menu {
		li {
			padding-top: 10px;
			padding-bottom: 10px;

			&.menu-item-has-icon {
				padding-top: 5px;
				padding-bottom: 5px;
			}

			a {
				display: flex;
				align-items: center;
				font-weight: 500;

				img {
					border-radius: 50%;
				}

				.menu-icon-item--image {
					--em-ratio-percent: 100%;

					width: 30px;
					height: 30px;
					border-radius: 50%;
					margin-right: 10px;
				}
			}
		}

		> li {
			position: relative;

			&.menu-item-has-icon {
				&:after {
					left: 50px;
					width: calc( 100% - 50px );
				}
			}

			&:after {
				content: '';
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 1px;
				background-color: var( --em-border-color );
			}

			&:last-child {
				&:after {
					display: none;
				}
			}

			> a {
				.ecomus-svg-icon,
				.menu-item-icon {
					@include font-size(10/16);
					margin: 2px 8px 0 0;
				}

				.menu-icon-item-position--right {
					margin: 2px 0 0 8px;
				}

				> .menu-icon-item--image {
					width: 40px;
					height: 40px;
					border: 1px solid var( --em-border-color );

					img {
						width: calc( 100% - 6px );
						height: calc( 100% - 6px );
						top: 3px;
						left: 3px;
					}
				}
			}

			> ul.sub-menu {
				margin: 7px 0 15px 15px;
			}
		}

		.menu-item-has-children {
			> a {
				position: relative;

				&:before,
				&:after {
					content: " ";
					position: absolute;
					top: 50%;
					right: 15px;
					transform: translateY(-50%);
					display: inline-block;
					margin-top: -1px;
					width: 10px;
					height: 2px;
					background-color: currentColor;
					transition: background-color .2s ease-in-out, transform .2s ease-in-out, width .2s ease-in-out, -webkit-transform .2s ease-in-out;
				}

				&:after {
					-webkit-transform: translateY(-50%) rotate(-90deg);
					transform: translateY(-50%) rotate(-90deg);
				}

				&:active,
				&:hover {
					color: var( --em-color__dark );
				}

				.toggle-menu-children {
					position: absolute;
					width: 32px;
					top: 0;
					bottom: 0;
					right: -11px;
					cursor: pointer;
					z-index: 1;
				}
			}

			&.active {
				> a{
					&:before,
					&:after {
						-webkit-transform: translateY(-50%) rotate(0);
						transform: translateY(-50%) rotate(0);
					}
				}

				> .sub-menu {
					animation: fadeIn 0.3s ease-in-out;
				}
			}
		}
	}

	.sub-menu {
		border-left: 1px solid var( --em-border-color );
		margin: 7px 0 5px 42px;
		padding: 0 0 0 15px;
		display: none;
	}
}