.drawer-root {
	position: fixed;
	inset: 0;
	z-index: 1300;
	pointer-events: none;
	visibility: hidden;
	transition: visibility 0s 0.2s;
}

.drawer-root.drawer-open {
	pointer-events: auto;
	visibility: visible;
	transition: visibility 0s;
}

.drawer-backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.2s;
}

.drawer-open .drawer-backdrop {
	opacity: 1;
}

.drawer-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	background-color: var(--background-color);
	box-shadow:
		0 8px 10px -5px rgba(0, 0, 0, 0.2),
		0 16px 24px 2px rgba(0, 0, 0, 0.14),
		0 6px 30px 5px rgba(0, 0, 0, 0.12);
	overflow-y: auto;
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.6, 1);
}

.drawer-panel-left {
	left: 0;
	transform: translateX(-100%);
}

.drawer-open .drawer-panel-left {
	transform: translateX(0);
}

.drawer-panel-right {
	right: 0;
	transform: translateX(100%);
}

.drawer-open .drawer-panel-right {
	transform: translateX(0);
}