.js-hiraku-offcanvas-body-active {
	.js-hiraku-offcanvas-sidebar-right {
		right: 0;
		left: auto;
		min-height: 100vh;
		transform: translateX(100%);
	}

	.js-hiraku-offcanvas-sidebar-left {
		left: 0;
		right: auto;
		min-height: 100vh;
		transform: translateX(-100%);
	}

	.js-hiraku-offcanvas-sidebar-right,
	.js-hiraku-offcanvas-sidebar-left {
		display: block;
		width: $side-menu-width;
		z-index: 10002;
		position: fixed;
		top: 0;
		max-width: 100%;
		background-color: #fff;
		overflow-y: scroll;
		box-sizing: border-box;
	}
	.js-hiraku-offcanvas-sidebar-left {
		left: 0;
	}
	.js-hiraku-offcanvas-sidebar-right {
		right: 0;
	}
}

.js-hiraku-offcanvas-open {
	display: block;
}

.js-hiraku-offcanvas-body {
	width: 100%;
	transition: transform $animation;
	z-index: 0;
}

.js-hiraku-offcanvas:focus {
	background-color: $offcanvas-overlay-focused;
}

.js-hiraku-offcanvas-body-right,
.js-hiraku-offcanvas-body-left {
	overflow: hidden;
}

.js-hiraku-offcanvas-body-right {
	overflow-y: hidden;
	transform: translateX(- $side-menu-width);
}

.js-hiraku-offcanvas-body-left {
	overflow-y: hidden;
	transform: translateX($side-menu-width);
}

.js-hiraku-offcanvas {
	transition: opacity $animation;
}

.js-hiraku-offcanvas-body [aria-hidden=false] + .js-hiraku-offcanvas,
.js-hiraku-offcanvas-body [aria-hidden=false] + .js-hiraku-offcanvas {
	display: block;
	position: fixed;
	top: 0;
	z-index: 100001;
	width: 100%;
	height: 100%;
	background: $offcanvas-overlay;
	opacity: 0;
}

.js-hiraku-offcanvas-body-right [aria-hidden=false] + .js-hiraku-offcanvas,
.js-hiraku-offcanvas-body-left [aria-hidden=false] + .js-hiraku-offcanvas {
	opacity: 1;
}

.js-hiraku-offcanvas-body-right .js-hiraku-offcanvas {
	right: 0;
}

.js-hiraku-offcanvas-body-left .js-hiraku-offcanvas {
	left: 0;
}

.js-hiraku-offcanvas-close-btn {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.js-hiraku-fixed {
	z-index: 1000;
}

.js-hiraku-offcanvas-body-ie .js-hiraku-offcanvas-sidebar-right,
.js-hiraku-offcanvas-body-ie .js-hiraku-offcanvas-sidebar-left,
.js-hiraku-offcanvas-body-ie .js-hiraku-fixed {
	transition: transform $animation;
}
