/* module lesson list */
[data-module-lesson-list-header] {
	@apply relative z-50 hidden w-full flex-shrink-0 border-r border-gray-200 lg:block lg:max-w-[280px] xl:max-w-xs;
	[data-sticky-container] {
		@apply top-0 lg:sticky;
		[data-content-wrapper] {
			@apply top-0 z-10 bg-white lg:sticky;
			[data-content] {
				@apply relative flex items-center gap-5 border-b border-gray-200 bg-gray-100 p-3;
				[data-image] {
					@apply relative z-10;
				}
				[data-title] {
					@apply relative z-10 -translate-y-0.5;
					[data-type] {
						@apply font-mono text-xs font-semibold uppercase text-gray-500 hover:underline;
					}
					span {
						@apply pl-1 text-xs text-gray-400;
					}
					h2 {
						@apply w-full text-2xl font-semibold leading-none;
						a {
							@apply hover:underline;
						}
					}
				}
			}
		}
		[data-fadeout] {
			@apply bg-linear-to-t pointer-events-none absolute bottom-0 left-0 z-20 h-16 w-full from-gray-100 to-transparent;
		}
	}
}
[data-mobile-module-lesson-list] {
	@apply block border-t-2 border-gray-200 lg:hidden;
	::-webkit-details-marker {
		display: none;
	}
	summary {
		@apply flex w-full cursor-pointer items-center justify-between gap-1 border-b border-gray-200 bg-white py-3 pl-4 pr-12 font-semibold leading-tight transition marker:content-[''] after:absolute after:right-3 after:flex after:h-6 after:w-6 after:rotate-180 after:items-center after:justify-center after:rounded-full after:bg-gray-200 after:text-lg after:content-['↑'] hover:bg-gray-100;
		[data-byline] {
			@apply text-sm font-normal text-gray-600 opacity-80;
		}
	}
	[data-module-lesson-list-header] {
		@apply relative z-50 block w-full flex-shrink-0 border-r border-gray-800 lg:hidden lg:max-w-[280px] xl:max-w-xs;
	}
}
[data-module-lesson-list] {
	@apply scrollbar-thin scrollbar-thumb-gray-800/70 hover:scrollbar-thumb-gray-700 relative h-[400px] overflow-y-auto bg-gray-100 pb-16 lg:h-[calc(100vh-116px)];
	/* sections */
	[data-sections] {
		@apply relative;
		[data-accordion-header] {
			@apply sticky top-0 z-10 overflow-hidden bg-white;
			[data-accordion-trigger] {
				@apply relative z-10 flex w-full items-center justify-between border-b border-gray-100 bg-white py-3 pl-3 pr-4 text-left text-lg font-semibold leading-tight transition hover:bg-gray-50;
				[data-icons] {
					@apply flex items-center;
				}
				[data-check-icon] {
					@apply mr-2 h-4 w-4 text-teal-400;
				}
				[data-chevron-down-icon] {
					@apply group-radix-state-open:rotate-180 relative h-3 w-3 opacity-50 transition;
				}
				[data-active-section-indicator] {
					@apply bg-primary mr-3 h-1 w-1 animate-pulse rounded-full opacity-75 duration-1000;
				}
			}
			[data-accordion-trigger][data-state='open'] {
				[data-chevron-down-icon] {
					@apply rotate-180 opacity-80;
				}
			}
			[data-accordion-trigger]:hover {
				[data-chevron-down-icon] {
					@apply opacity-100;
				}
			}
			[data-section-progress] {
				@apply absolute left-0 top-0 h-full bg-white/5;
			}
			[data-accordion-content] {
				ul {
					@apply flex flex-col divide-y divide-gray-800/0 border-b border-white/5 text-lg;
				}
			}
		}
	}
	/* single section */
	[data-single-section] {
		@apply flex flex-col divide-y divide-gray-800/0 text-base;
		[data-lesson][data-is-expanded='true'] {
			@apply bg-white;
		}
	}
	/* lesson */
	[data-lesson][data-is-lesson-completed='true'][data-is-expanded='false'] {
		@apply text-gray-600 opacity-80 hover:text-black hover:opacity-100;
	}
	[data-lesson][data-is-expanded='false'] {
		@apply text-gray-600 opacity-90 hover:text-black hover:opacity-100;
	}
	[data-lesson][data-is-expanded='true'] {
		@apply bg-gray-200/70;
	}
	[data-lesson] {
		[data-lesson-title] {
			@apply flex items-center px-4 py-2.5 font-semibold leading-tight;
			[data-check-icon] {
				@apply -ml-1.5 mr-[7.5px] h-4 w-4 flex-shrink-0 text-emerald-600;
			}
			[data-index] {
				@apply pr-3 font-mono text-xs opacity-50;
			}
		}
		ul {
			@apply text-gray-600;
			/* problem */
			[data-problem] {
				a {
					@apply flex w-full items-center border-l-4 px-8 py-2 text-base font-medium transition hover:bg-gray-800/50 hover:text-white;
				}
				a[data-is-active='true'] {
					@apply border-orange-400 bg-gray-800/80 text-white;
				}
				a[data-is-active='false'] {
					@apply border-transparent;
				}
			}
			/* exercise */
			[data-exercise-is-loading] {
				@apply flex w-full items-center border-l-4 border-transparent px-8 py-2 text-base font-medium;
			}
			[data-exercise] {
				a {
					@apply flex w-full items-center border-l-4 px-8 py-2 text-base font-medium transition hover:bg-gray-800/50 hover:text-white;
				}
				a[data-is-active='true'] {
					@apply border-indigo-400 bg-gray-800/80 text-white;
				}
				a[data-is-active='false'] {
					@apply border-transparent;
				}
			}
			/* solution */
			[data-solution] {
				a {
					@apply flex items-center border-l-4 px-8 py-2 text-base font-medium transition hover:bg-gray-800/50 hover:text-white;
				}
				a[data-is-active='true'] {
					@apply border-cyan-400 bg-gray-800/80 text-white;
				}
				a[data-is-active='false'] {
					@apply border-transparent;
				}
			}
			/* explainer */
			[data-explainer] {
				a {
					@apply flex items-center border-l-4 px-8 py-2 text-base font-medium transition hover:bg-gray-800/50 hover:text-white;
				}
				a[data-is-active='true'] {
					@apply border-indigo-400 bg-gray-800/80 text-white;
				}
				a[data-is-active='false'] {
					@apply border-transparent;
				}
			}
		}
	}
	/* section resources */
	[data-section-resources] {
		@apply bg-black/30 pb-8 pt-1;
		[data-label] {
			@apply px-5 pb-2 pt-4 text-xs font-medium uppercase tracking-wide text-gray-300;
		}
		ul {
			@apply flex flex-col divide-y divide-gray-800/0 text-lg;
			li {
				@apply pt-2;
				a {
					@apply flex items-center px-4 py-2 font-semibold leading-tight hover:bg-gray-800/40;
					svg {
						@apply mr-3 h-3 w-3 flex-shrink-0 text-gray-500;
					}
				}
				p {
					@apply pl-10 pr-3 text-sm italic text-gray-400;
				}
			}
		}
	}
}
