body {
	&[class*='ct-offcanvas'] {
		#main-container {
			transition: transform 0.25s ease-in-out;
		}
	}
}

// Off Canvas
.ct-offcanvas-menu {
	position: fixed;
	width: var(--offCanvasWidth);
	top: 0;
	right: 0;
	bottom: 0;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	visibility: hidden;

	.ct-bag-container {
		box-shadow: inset 10px 0px 30px -10px rgba(0, 0, 0, 0.1);
	}

	.ct-bag-actions {
		display: none;
	}

	.ct-bag-content {
		opacity: 0;
		padding-top: 15px;
		transform: translate3d(5px, 0, 0);
		transition: opacity 0.1s ease 0s, transform 0.1s ease 0s;
	}
}

.ct-offcanvas-active {
	overflow: hidden;

	#main-container {
		transform: translate3d(calc(var(--offCanvasWidth) * -1), 0, 0);
	}

	.ct-offcanvas-menu {
		visibility: visible;

		.ct-bag-content {
			opacity: 1;
			transform: translate3d(0, 0, 0);
			transition: opacity 0.5s cubic-bezier(0.35, 0.81, 0.41, 1) 0.25s,
				transform 0.5s cubic-bezier(0.35, 0.81, 0.41, 1) 0.25s;
		}
	}
}

.ct-offcanvas-hiding {
	.ct-offcanvas-menu {
		visibility: visible;
	}
}

// menu
#mobile-menu.ct-offcanvas-menu {
	.mobile-menu {
		font-weight: bold;
		font-size: 19px;
		padding: 0 30px;
	}

	.menu-item-has-children > ul {
		font-size: 17px;
		font-weight: 600;
	}

	.menu-arrow {
		padding: 8px;
		margin-right: -8px;

		&:before {
			border: none;
		}

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