/* Drawer */
@keyframes hourGateDrawerSlideRight {
	from {
		transform: translateX(100vw);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes hourGateDrawerSlideLeft {
	from {
		transform: translateX(-100vw);
		opacity: 0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}
.hourgate-drawer-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black */
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
	z-index: var(--hourgate-popup-z-index);
}
.hourgate-drawer-backdrop.drawer-right {
	align-items: flex-end;
}
.hourgate-drawer-backdrop.drawer-left {
	align-items: flex-start;
}
.hourgate-drawer-content {
	background-color: #fff;
	margin: 0;
	box-shadow: 0rem 0.25rem 0.375rem rgba(0, 0, 0, 0.1);
	width: 35rem;
	max-width: 80%;
	height: 100vh;
	overflow-y: auto;
	padding: 1.25rem;
	box-sizing: border-box;
}
.hourgate-drawer-content.drawer-right {
	animation: hourGateDrawerSlideRight 0.5s ease-out forwards;
}
.hourgate-drawer-content.drawer-left {
	animation: hourGateDrawerSlideLeft 0.5s ease-out forwards;
}