icon-menu

.icon-menu,
.menuIcon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 40px;
	cursor: pointer;
}

.icon-menu__inner,
.menuIcon__inner {
	transition: transform 300ms, height 150ms;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: column;
	width: 100%;
	height: 15px;

	.offcanvas-is-visible & {
		transform: rotate(180deg);
		height: 22px;
	}
}

.icon-menu__inner:before,
.icon-menu__inner:after,
.menuIcon__inner:before,
.menuIcon__inner:after {
	transition: transform 300ms;
	display: block;
	width: 100%;
	height: 2px;
	content: '';
	background-color: currentColor;

	.offcanvas-is-visible & {
		transform: translateY(10px) rotate(-45deg);
	}
}

.icon-menu__inner:after,
.menuIcon__inner:after {
	.offcanvas-is-visible & {
		transform: translateY(-10px) rotate(45deg);
	}
}

.icon-menu__bar,
.menuIcon__bar {
	transition: opacity 150ms 150ms;
	display: block;
	width: 100%;
	height: 2px;
	background-color: currentColor;

	.offcanvas-is-visible & {
		transition: opacity 150ms;
		opacity: 0;
	}
}