@import '../../../shared/styles/collapsible-content';

.editor-styles-wrapper .sensei-lms-course-navigation,
.sensei-lms-course-navigation {
	&__modules, &__lessons, &-module__lessons {

		margin: 0;
		ol, li {
			list-style: none;
			padding: 0;
		}
		padding-inline-start: 0;
	}

	&__modules {
		display: flex;
		gap:  24px;
		flex-direction: column;
	}

	&__modules + &__lessons {
		margin-top: 24px;
	}

	&-module__lessons:not(.sensei-collapsed) {
		margin-bottom: 8px;
	}

}

.editor-styles-wrapper .sensei-lms-course-navigation-module,
.sensei-lms-course-navigation-module {
	.sensei-collapsible__toggle {
		align-items: center;
		background: unset !important;
		border: unset;
		color: var(--sensei-text-color);
		display: flex;
		padding: 0;
		width: 100%;
		gap: 20px;

		&:hover h3 {
			text-decoration: underline;
		}

		.sensei-lms-course-navigation-module__collapsible-icon {
			width: 24px;
			height: 24px;
		}

		&.sensei-collapsed .sensei-lms-course-navigation-module__collapsible-icon {
			transform: rotate(180deg);
		}
	}

	&__title {
		flex: 1;
		font-size: 1.125rem;
		margin: 0;
		text-align: left;
	}

	&__button {
		color: inherit;
		text-transform: inherit;
		background: none !important;
	}

	&__summary {
		font-size: 0.8125rem;
		max-height: 0;
		overflow: hidden;
		transition-delay: 150ms;
		visibility: hidden;
		margin-top: 0px;
	}

	&__lessons.sensei-collapsed ~ &__summary {
		visibility: visible;
		max-height: 50px;
		margin-top: 4px;
	}
}

.sensei-lms-course-navigation-lesson {
	display: flex;
	font-size: 0.875rem;
	line-height: 1.214285714285714;
	margin-top: 24px;
	padding: 10px 1px;
	text-decoration: none;

	&__link {
		display: flex;
		flex: 1;
		align-items: center;
	}

	&__title {
		flex: 1;
		padding: 0 8px;
	}

	&__extra {
		margin-top: 1px; // Needed to compensate the font-size difference.
		padding-left: 6px;
	}

	&__status {
		width: 12px;
		height: 12px;
		fill: currentColor;
	}

	&.status-locked,
	&.status-not-started &__status {
		opacity: 0.7;
	}

	&.current-lesson &__title {
		font-weight: 700;
	}
}

.sensei-lms-course-navigation > .sensei-lms-course-navigation__lessons > .sensei-lms-course-navigation-lesson:first-of-type {
	margin-top: 0;
}
