/**
 * Turn the sidebar into an openable overlay menu on mobile when the menu toggle block is added.
 *
 */

$breakpoint: 783px;

.single-quiz .sensei-course-theme__sidebar-toggle {
	display: none;
}

.single-lesson .sensei-course-theme__sidebar-toggle {
	display: block;
	width: 24px;
	height: 24px;
	border: none;
	padding: 0;

	&:not(.has-background-color) {
		background: none !important;
	}

	&:not(.has-text-color):not(:hover):not(:focus) {
		color: inherit !important;
	}

	svg {
		width: 24px;
		height: 24px;
		fill: currentColor;
	}

	&:hover, &:focus {
		color: var(--sensei-primary-color);
		background: none;
	}
}

// Desktop
@media screen and (min-width: ($breakpoint)) {
	.single-lesson .sensei-course-theme__sidebar-toggle {
		display: none;
	}
}

// Mobile
@media screen and (max-width: ($breakpoint - 1)) {
	.sensei-course-theme {
		&--sidebar-open {
			overflow: hidden;

			.sensei-course-theme__sidebar {
				opacity: 1;
				top: calc(var(--sensei-wpadminbar-offset, 0px) + 90px);
				pointer-events: all;
			}

			.sensei-course-theme__secondary-sidebar {
				top: unset;
			}
		}

		&__sidebar {
			position: fixed;
			z-index: 100;
			background: var(--sensei-background-color, #fff);
			top: calc(var(--sensei-wpadminbar-offset, 0px) + var(--sensei-lm-header-height,0px));
			bottom: 0;
			left: 0 !important;
			right: 0 !important;
			margin: 0 !important;
			border: unset !important;
			width: unset;
			overflow: auto;
			overscroll-behavior: contain;
			display: flex;
			flex-direction: column;
			padding: 32px var(--content-padding) !important;
			transition: opacity 300ms;
			scrollbar-gutter: stable both-edges;
			pointer-events: none;
		}

		&__secondary-sidebar {
			top: unset;
		}

		&:not(&--sidebar-open) &__sidebar {
			opacity: 0;
		}
	}
}
