/**
 * Custom scroll region (Adam Argyle scroll lessons).
 * HTML: .scroll--root > .scroll--viewport > .scroll--content
 */

@layer support, lessons;

@import "https://unpkg.com/open-props/easings.min.css" layer(support);

@layer lessons.essentials {
	.scroll--root {
		--_space: 1lh;

		/* very basic light/dark theme */
		--_theme: light-dark(
			hsl(none none 75%),
			hsl(none none 25%)
		);

		border-radius: 10px;
		border: 1px solid var(--_theme);
	}

	.scroll--viewport {
		/* be explicit about the axis */
		overflow: hidden auto;

		/* nearly always specify overscroll behavior */
		overscroll-behavior-y: contain;

		/* enable if ok with user's preference */
		@media (prefers-reduced-motion: no-preference) {
			scroll-behavior: smooth;
		}
	}
}

@layer lessons.colorize {
	.scroll--root {
		padding-inline-end: var(--_space);
	}

	.scroll--viewport {
		/* we'll be showing our own scroller focus states */
		&:is(:focus-visible, :focus-within) {
			outline-offset: -2px;
			outline: none;
		}

		/* feel free to make it bigger */
		&::-webkit-scrollbar {
			width: 10px;
		}

		&::-webkit-scrollbar-track {
			/* create an 80% opacity variant of the theme color */
			background: color-mix(in srgb, var(--_theme), #0000 80%);

			/* maximum roundness */
			border-radius: 1e3px;

			/* so we can push away from the edge/border */
			background-clip: padding-box;

			/* space! */
			margin-block: 1lh;
		}

		&::-webkit-scrollbar-thumb {
			/* create a 25% opacity variant of the theme color */
			background: color-mix(in srgb, var(--_theme), #0000 25%);

			/* maximum roundness */
			border-radius: 1e3px;
		}

		@media (forced-colors: active) {
			&::-webkit-scrollbar-thumb {
				border: 2px solid currentcolor;
			}
		}

		/* highlight thumb to indicate focus is inside */
		&:is(:focus-visible, :focus-within)::-webkit-scrollbar-thumb {
			background: var(--_theme);
		}

		@media (hover) {
			/* default now to 50% faded out */
			&::-webkit-scrollbar {
				opacity: .5;
			}

			/* hover full opacity */
			&::-webkit-scrollbar:hover {
				opacity: 1;
			}

			/* thumb feedback when hovering scroll area */
			&:hover::-webkit-scrollbar-thumb {
				background: color-mix(in srgb, var(--_theme), #0000 10%);
			}

			/* make the thumb color solid on thumb hover */
			&::-webkit-scrollbar-thumb:hover {
				background: var(--_theme);
			}
		}

		@supports (-moz-appearance:none) {
			scrollbar-width: thin;
			scrollbar-color: var(--_theme) #0000;
			transition: scrollbar-color .3s ease;

			&:is(:focus-visible, :focus-within) {
				scrollbar-color: LinkText #0000;
			}

			@media (hover) {
				scrollbar-color:
					light-dark(#eee, #333)
					#0000;

				&:hover {
					scrollbar-color: var(--_theme) #0000;
				}
			}
		}
	}
}

@layer lessons.containerization {
	.scroll--viewport {
		container: --scrollport / size scroll-state;
	}
}

@layer lessons.anchorization {
	.scroll--root {
		anchor-name: --⚓︎scroll--root;
	}

	.scroll--viewport {
		anchor-name: --⚓︎scroll--viewport;
	}
}

@layer lessons.scroll-buttons {
	.scroll--viewport {
		@supports selector(::scroll-button(*)) {
			@media (width > 720px) {
				&::scroll-button(*) {
					position: fixed;
					appearance: none;
					background: none;
					-webkit-tap-highlight-color: transparent;
					border: 1px solid var(--_theme);
					border-radius: 50%;
					aspect-ratio: 1;
					inline-size: 36px;

					transition:
						opacity .5s var(--ease-3),
						scale .8s var(--ease-spring-5),
						background-color .2s var(--ease-3);
				}

				&::scroll-button(*):not(:disabled):is(:hover, :focus-visible) {
					background: color-mix(in srgb, var(--_theme), #0000 90%);
				}

				&::scroll-button(*):not(:disabled):active {
					scale: 80%;
				}

				&::scroll-button(*):disabled {
					opacity: 25%;
				}

				&::scroll-button(up) {
					content: '▲' / 'Scroll up';

					position-anchor: --⚓︎scroll--root;
					position-area: inline-end span-block-end;

					anchor-name: --⚓︎scroll--buttonup;

					margin-inline-start: var(--_space);
					margin-block-start: var(--_space);
				}

				&::scroll-button(down) {
					content: '▼' / 'Scroll down';

					position-anchor: --⚓︎scroll--buttonup;
					position-area: block-end;

					margin-block-start: calc(var(--_space) / 2);
				}
			}
		}
	}
}

.scroll--root {
	> .scroll--viewport {
		aspect-ratio: 16/9;

		> .scroll--content {
			display: grid;
			gap: calc(var(--_space) * 2);
			padding: var(--_space);
		}
	}
}