.offcanvas {
	position: fixed;
	bottom: 0;
	z-index: $z-index-drawer;
	display: flex;
	flex-direction: column;
	max-width: 100%;
	color: $text-color;
	visibility: hidden;
	background-color: $co-base-1;
	background-clip: padding-box;
	outline: 0;
	// @include box-shadow($offcanvas-box-shadow);
	// @include transition(transform $offcanvas-transition-duration ease-in-out);
	transition: transform .3s ease-in-out;
}

.offcanvas-backdrop {
	position: fixed;
    top: 0;
    left: 0;
    z-index: ($z-index-drawer - 1);
    width: 100vw;
    height: 100vh;
    background-color: $co-base-0;

	&.fade { opacity: 0; }
	&.show { opacity: $backdrop-color; }
}

.offcanvas-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 $sp-4;
	height: var(--header-visible-height);
	min-height: var(--header-visible-height);
	// background-color: $co-gray-90;
	border-bottom: 1px solid $co-gray-80;

	// .btn-close {
	// 	padding: ($offcanvas-padding-y * .5) ($offcanvas-padding-x * .5);
	// 	margin-top: $offcanvas-padding-y * -.5;
	// 	margin-right: $offcanvas-padding-x * -.5;
	// 	margin-bottom: $offcanvas-padding-y * -.5;
	// }
}

.offcanvas-title {
	margin-bottom: 0;
	line-height: $line-height-base;
}

.offcanvas-body {
	flex-grow: 1;
	padding: $sp-4;
	overflow-y: auto;
	overscroll-behavior: contain;
	@include scrollBar();
}

.offcanvas-start {
	top: 0;
	left: 0;
	width: $content-min-width - $sp-3;
	// border-right: $offcanvas-border-width solid $offcanvas-border-color;
	transform: translateX(-100%);
}

.offcanvas-end {
	top: 0;
	right: 0;
	width: $content-min-width - $sp-3;
	// border-left: $offcanvas-border-width solid $offcanvas-border-color;
	transform: translateX(100%);
}

.offcanvas-top {
	top: 0;
	right: 0;
	left: 0;
	height: 30vh;
	max-height: 100%;
	// border-bottom: $offcanvas-border-width solid $offcanvas-border-color;
	transform: translateY(-100%);
}

.offcanvas-bottom {
	right: 0;
	left: 0;
	height: 30vh;
	max-height: 100%;
	// border-top: $offcanvas-border-width solid $offcanvas-border-color;
	transform: translateY(100%);
}

.offcanvas.show:not(.hiding),
.offcanvas.showing {
    transform: none
}

.offcanvas.show,
.offcanvas.hiding,
.offcanvas.showing {
    visibility: visible
}

.offcanvas-search {
	height: auto;
	bottom: auto;

	.container {
		position: relative;
		padding-top: $sp-lg-1;
		padding-bottom: $sp-lg-1;
	}

	.offcanvas-body {
		padding: 0;
	}

	.btn-close {
		position: absolute;
		top: 0;
		right: 0;
	}

	form {
		max-width: 40rem;
		margin-left: auto;
		margin-right: auto;
	}
}

@include mediaQ(bp) {
	.offcanvas-header-menu,
	.offcanvas-backdrop-header-menu {
		display: none;
	}
}