$contextual-sidebar-width: 320px;
$management-bar-height: 49px;
$transition-duration: 0.5s;
$transition-timing-function: ease;

.contextual-sidebar {
	height: calc(
		100vh - var(--control-menu-container-height) - #{$management-bar-height}
	);
	pointer-events: none;
	position: fixed;
	right: 0;
	top: calc(var(--control-menu-container-height) + #{$management-bar-height});
	transform: translateX(100%);
	transition: transform $transition-timing-function $transition-duration;
	visibility: hidden;
	width: $contextual-sidebar-width;
	will-change: transform;

	&.contextual-sidebar-visible {
		pointer-events: auto;
		transform: translateX(0);
		visibility: visible;
	}
}

@include media-breakpoint-up(md) {
	$management-bar-height: 64px;

	.contextual-sidebar {
		height: calc(
			100vh - var(--control-menu-container-height) - #{$management-bar-height}
		);
		top: calc(
			var(--control-menu-container-height) + #{$management-bar-height}
		);
	}

	.contextual-sidebar-content {
		transition: padding $transition-timing-function $transition-duration;
		will-change: padding;
	}

	.contextual-sidebar-visible {
		.contextual-sidebar-content,
		+ .contextual-sidebar-content {
			padding-right: $contextual-sidebar-width;
		}
	}
}