$maxwidth: 800px;
$minwidth: 100px;
$maxheight: 200px;
$minheight: 100px;
.p5-drawer {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	z-index: 1000;
	&-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0;
		z-index: 1010;
		transition: opacity 0.25s ease;
	}
	&-box {
		position: absolute;
		transition: all .25s ease;
		background: #fff;
		z-index: 1020;
		overflow: scroll;
	}
}

.p5-drawer.p5-drawer-show {
	width: 100%;
	height: 100%;
	.p5-drawer-mask {
		opacity: 0.3;
	}
}

.p5-drawer-right, .p5-drawer-left {
	&.p5-drawer-show {
		.p5-drawer-box {
			max-width: $maxwidth;
			min-width: $minwidth;
		}
	}
	.p5-drawer-box {
		top: 0;
		right: 0;
		min-width: 0;
		max-width: 0;
		height: 100%;
	}
}
.p5-drawer-left {
	.p5-drawer-box {
		left: 0;
		right: initial;
	}
}
.p5-drawer-top, .p5-drawer-bottom {
	&.p5-drawer-show {
		.p5-drawer-box {
			max-height: $maxheight;
			min-height: $minheight;
		}
	}
	.p5-drawer-box {
		top: 0;
		left: 0;
		min-height: 0;
		width: 100%;
	}
}

.p5-drawer-bottom {
	.p5-drawer-box {
		bottom: 0;
		top: initial;
	}
}