$block: '.wp-block-sensei-lms-course-outline-module';

.wp-block-sensei-lms-course-outline #{$block}, .wp-block #{$block} {
	margin: 1em 0;

	#{$block}__progress-indicator {
		border-radius: 999px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20px;

		&__text {
			font-weight: normal;
			margin: 2px 15px;
			font-size: 14px;
			white-space: nowrap;
			text-transform: uppercase;
		}

		&.completed {
			background-color: #1FD25A;
			color: #fff;
		}
	}

	#{$block}__header {
		padding: $spacing;
		font-weight: bold;
		display: flex;
		align-items: center;
		.teacher-name {
			padding-left: 1em;
			font-size: 0.8em;
		}
		.custom-slug {
			font-size: 0.7em;
		}
	}

	#{$block}__title {
		color: inherit;
		display: flex;
		flex: 1;
		font-size: 1.25rem;
		font-weight: inherit;
    	flex-flow: wrap;
		margin: 0;
		padding: 0;

		textarea {
			font-size: inherit;
		}

		&::before, &::after {
			content: none;
		}

		a:not(.button) {
			font-weight: inherit;
			color: inherit;
			text-decoration: inherit;
			&:hover {
				text-decoration: underline;
			}
		}
	}

	#{$block}__description {
		padding: $spacing;
	}

	#{$block}__slug {
		padding: $spacing 0 0 $spacing;
		font-size: 0.9em;
	}

	#{$block}__lessons-title {
		padding: 5px $spacing;
		font-size: 0.875rem;
		margin: 0;
		font-weight: 600;
		color: inherit;
		text-transform: uppercase;
	}

	.block-editor-block-styles__item & {
		font-size: 150%;
		#{$block}__progress-indicator, .wp-block-sensei-lms-course-outline__arrow {
			display: none;
		}
	}
}

#{$block}-bordered {
	border: 1px solid $dark-gray;
}

#{$block}__name__minimal-border {
	display: block;
	border: none;
	height: 4px;
	margin-left: 4px;
	margin-right: 4px;
	background-color: $dark-gray;
}

.wp-block-sensei-lms-course-outline.is-style-default #{$block}:not(.is-style-minimal), #{$block}.is-style-default {

	#{$block}__lessons-title {
		background-color: rgba(#ccc, 0.3);
	}

	#{$block}__header {
		&:not(.has-background) {
			background-color: $dark-gray;
		}

		&:not(.has-text-color) {
			color: #FFF;
		}
	}

	#{$block}__progress-indicator {
		background-color: #FFF;
		color: $dark-gray;
	}
}

.wp-block-sensei-lms-course-outline.is-style-minimal #{$block}:not(.is-style-default), #{$block}.is-style-minimal {

	#{$block}__progress-indicator:not(.completed) {
		border: 1px solid currentColor;
	}
}

.wp-block[data-type="sensei-lms/course-outline-module"] {
	&:not(.is-selected):not(.has-child-selected) {
		.wp-block-sensei-lms-course-outline-lesson.is-auto-draft {
			display: none;
		}
	}
}
