$min_desktop_width: 783px;

.sensei-course-theme {
	&__columns {
		display: flow-root;
	}
}

// Desktop
@media screen and (min-width: ($min_desktop_width)) {
	.sensei-course-theme {
		--sensei-lm-sidebar-width: 312px;

		&__columns &__sidebar {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			width: var(--sensei-lm-sidebar-width);
			border-right: 1px solid var(--border-color);
			overflow: auto;
			overscroll-behavior: contain;
			display: flex;
			flex-direction: column;
			padding: 32px 24px 40px 24px;
			row-gap: 40px;
		}

		&__header ~ &__columns &__sidebar {
			top: var(--full-header-height) !important;
		}

		&__columns &__main-content ~ &__sidebar {
			left: unset;
			right: 0;
			border-right: unset;
			border-left: 1px solid var(--border-color);
		}

		&__columns &__main-content {
			padding: 32px 0;
			margin-right: var(--sensei-lm-sidebar-width) !important;
			min-height: calc(100vh - var(--sensei-lm-header-height, 0px) - 56px);

			// A Divi fix since it doesn't load Gutenberg block library styles.
			@at-root {
				.et_pb_pagebuilder_layout & {
					flex: 1;
				}
			}
		}

		&__columns &__sidebar ~ &__main-content {
			margin-right: 24px ! important;
			margin-left: calc(var(--sensei-lm-sidebar-width) + 24px) !important;
		}

	}
}
