.#{$component-prefix}side-menu {
	position: fixed;
	z-index: 9;
	left: 0;
	top: 0;

	height: 100vh;

	opacity: 0;

	pointer-events: none;
	backface-visibility: hidden;

	transition: all var(--timing-faster) ease;
	// transform: translate3d(-100%, 0, 0);

	.panel {
		width: 35rem;

		position: relative;
		z-index: 1;
		transition: all var(--timing-faster) ease;

		min-height: 100vh;

		transform: translate3d(-100%, 0, 0);

		background: white;

		border: 1px solid var(--color-neutral-300);
		border-bottom: 2px solid var(--color-primary-500);

		box-shadow: 0 0 1.5rem 0 rgba(25, 72, 142, 0.15);

		pointer-events: all;
		backface-visibility: hidden;
	}

	.backdrop {
		transition: all var(--timing-faster) ease;

		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		// pointer-events: none;
		background: rgba(255, 255, 255, .75);
		opacity: 0;
	}

	&.-active {
		opacity: 1;
		pointer-events: all;
		// transform: translate3d(0, 0, 0);

		.panel {
			transform: translate3d(0, 0, 0);
			pointer-events: all;
		}

		.backdrop {
			opacity: 1;
		}
	}
}