/* stylelint-disable declaration-no-important, max-line-length */

.wp-block-sensei-lms-course-outline-module {
	--module-label-background: var( --wp--preset--color--green-3 );
	--module-label-color: var( --wp--preset--color--neutral-7 );
	--status-label-background: var( --wp--preset--color--green-5 );
	--status-label-color: var( --wp--preset--color--neutral-1 );

	border-color: var( --wp--preset--color--neutral-5 ) !important;
	border-radius: 1rem;
	overflow: hidden;
}

.wp-block-sensei-lms-course-outline-module--not-started {
	--module-label-background: var( --wp--preset--color--neutral-3 );
	--module-label-color: var( --wp--preset--color--neutral-7 );
	--status-label-background: var( --wp--preset--color--neutral-6 );
	--status-label-color: var( --wp--preset--color--neutral-1 );
}

.wp-block-sensei-lms-course-outline-module--in-progress {
	--module-label-background: var( --wp--preset--color--blue-3 );
	--module-label-color: var( --wp--preset--color--neutral-7 );
	--status-label-background: var( --wp--preset--color--blue-5 );
	--status-label-color: var( --wp--preset--color--neutral-1 );
}

.wp-block-sensei-lms-course-outline-module__header {
	gap: var( --wp--preset--spacing--30, 1rem );
	flex-direction: column;
	align-items: stretch !important;
	padding: var( --wp--preset--spacing--30, 1rem ) !important;
}

.wp-block-sensei-lms-course-outline-module__title {
	display: inline-flex;
	flex: 0 0 fit-content !important;
	margin: 0;
	padding: calc( var( --wp--preset--spacing--20, 0.5rem ) / 2 ) var( --wp--preset--spacing--20, 0.5rem ) !important;
	border-radius: var( --wp--preset--spacing--20, 0.5rem );
	background: var( --module-label-background );
	color: var( --module-label-color ) !important;
	font-size: var( --wp--preset--font-size--small ) !important;
	font-family: var( --wp--preset--font-family--body );
	font-weight: 400 !important;
	text-transform: uppercase;
	pointer-events: none;
}

.wp-block-sensei-lms-course-outline-module__progress-indicator {
	border-radius: var( --wp--preset--spacing--20, 0.5rem ) !important;
	border: 0 !important;
	margin-left: 0 !important;
	padding: 0 !important;
	background: var( --status-label-background ) !important;
	color: var( --status-label-color ) !important;
}

.wp-block-sensei-lms-course-outline-module__progress-indicator__text {
	display: flex;
	flex: 0 1 fit-content;
	align-items: center;
	gap: var( --wp--preset--spacing--20 );
	margin: 0 !important;
	text-transform: none !important;
	font-size: var( --wp--preset--font-size--small ) !important;
	font-family: var( --wp--preset--font-family--body );
	font-weight: 400 !important;
	padding: calc( var( --wp--preset--spacing--20, 0.5rem ) / 2 ) var( --wp--preset--spacing--20, 0.5rem ) !important;
}

.wp-block-sensei-lms-course-outline-module__progress-indicator__text svg {
	width: 16px;
	color: var( --wp--preset--color--green-3 );
}

.wp-block-sensei-lms-course-outline-module .wp-block-sensei-lms-course-outline-module__name__minimal-border {
	display: none;
}

.wp-block-sensei-lms-course-outline-module__description {
	padding: 0 !important;
	font-weight: 700;
}

.wp-block-sensei-lms-course-outline-module__duration {
	display: flex;
	align-items: center;
	gap: var( --wp--preset--spacing--20, 0.5rem );
	color: var( --wp--preset--color--neutral-3 );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 400;
}

.wp-block-sensei-lms-course-outline-module__duration-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.wp-block-sensei-lms-course-outline-module__lessons-title {
	background: var( --wp--preset--color--purple-6 );
	text-transform: none !important;
	font-size: var( --wp--preset--font-size--medium ) !important;
	font-family: var( --wp--preset--font-family--body );
	padding: var( --wp--preset--spacing--30, 1rem ) !important;
}

.wp-block-sensei-lms-course-outline-lesson {
	background: var( --wp--preset--color--purple-6 );
}

.wp-block-sensei-lms-course-outline-lesson::before {
	margin-left: var( --wp--preset--spacing--30 );
}

.wp-block-sensei-lms-course-outline-lesson > span {
	padding: var( --wp--preset--spacing--30 ) var( --wp--preset--spacing--30 ) !important;
}

.wp-block-sensei-lms-course-outline-lesson__status {
	order: 5;
	margin: var( --wp--preset--spacing--30 ) !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var( --wp--preset--color--purple-2 );
}

.wp-block-sensei-lms-course-outline-lesson__chevron {
	display: none;
}

/* Module thumbnail styles */
.wp-block-sensei-lms-course-outline-module__thumbnail {
	width: calc( 100% + ( 2 * var( --wp--preset--spacing--30 ) ) );
	max-height: 120px;
	display: block;
	object-fit: cover;
	margin:
		calc( var( --wp--preset--spacing--30 ) * -1 )
		calc( var( --wp--preset--spacing--30 ) * -1 )
		0;
}

/* Title wrapper styles */
.wp-block-sensei-lms-course-outline-module__title-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--30, 1rem );
	align-items: center;
}

@media ( min-width: 768px ) {
	.wp-block-sensei-lms-course-outline-module__header {
		display: grid !important;
		grid-template-columns: 120px 1fr;
		grid-auto-rows: min-content;
		gap: var( --wp--preset--spacing--30, 1rem );
	}

	.wp-block-sensei-lms-course-outline-module__thumbnail {
		grid-column: 1;
		grid-row: 1 / 4;
		width: 120px;
		height: 120px;
		border-radius: 0.5rem;
		margin: 0;
	}

	.wp-block-sensei-lms-course-outline-module__header:has(.wp-block-sensei-lms-course-outline-module__duration) .wp-block-sensei-lms-course-outline-module__thumbnail {
		grid-row: 1 / 5;
	}

	.wp-block-sensei-lms-course-outline-module__title-wrapper {
		grid-column: 2;
	}

	.wp-block-sensei-lms-course-outline-module__description {
		grid-column: 2;
	}

	.wp-block-sensei-lms-course-outline-module__duration {
		grid-column: 2;
	}

	.wp-block-sensei-lms-course-outline-module__actions {
		grid-column: 2;
	}
}

/* Module actions styles */
.wp-block-sensei-lms-course-outline-module__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--30, 1rem );
	align-items: center;
}

.wp-block-sensei-lms-course-outline-module__actions .wp-element-button {
	width: fit-content;
}

.wp-block-sensei-lms-course-outline-module__action-icon {
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

.wp-block-sensei-lms-course-outline__arrow[type="button"] {
	border: 1px solid var( --button-border-color ) !important;
	width: 40px;
	height: 40px;
	margin: 0 0 0 auto !important;
}

.wp-block-sensei-lms-course-outline__arrow[type="button"] svg {
	margin: 0 0 1px 1px !important;
}