/* Styled scrollers. The attribute is the whole contract: it makes a region scroll
   vertically and gives it the terminal's own bar — a docked surface gets both by
   position instead, since the layout never scrolls, so the surface must.

   The scrolling stays the browser's; only the bar is ours. `platform/ScrollBars` puts a
   `.mf-scrollbar` beside each scroller, never inside one: everything inside a scroll
   container scrolls with its content, which is a bar a frame behind what it reports. */

:root {
	--mf-scroll-width: 4px;

	/* Present, but not asking to be read until the pointer is on what it measures. */
	--mf-scroll-idle: 0.35;

	/* How far the content is taken back into the ground it is standing on. */
	--mf-scroll-fade: 24px;
}

[data-mf-scroll],
.mf-region-view > :not(.mf-region-handles, .mf-scrollbar) {
	overflow-y: auto;
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}
}

/* Placed over the scroller by the runtime, off that scroller's own offsets. What the bar
   is drawn from is declared, never inherited: an owner says it on its own bar, so one
   inside a window cannot read the window's edge. */
.mf-scrollbar {
	--mf-scroll-thumb: 0px;
	--mf-scroll-at: 0px;
	--mf-scroll-travel: 0px;
	--mf-scroll-inset: 0px;
	--mf-scroll-bend: 0px;
	--mf-scroll-notch: 0px;
	--mf-scroll-flat: 0px;
	--mf-scroll-fade-color: var(--mf-color-background);

	position: absolute;
	pointer-events: none;

	/* A readout: what scrolls it is the wheel, the keys and the content itself. */
	> * {
		position: absolute;
		pointer-events: none;
	}
}

/* What is cut off at each end, taken back into the ground rather than shadowed: the
   colour is the surface behind the content, so text reads as running out of the box. */
.mf-scrollbar-fade {
	left: 0;
	right: 0;
	height: var(--mf-scroll-fade);

	opacity: 0;
	transition: opacity var(--mf-transition-fast);

	&[data-mf-on] {
		opacity: 1;
	}

	&[data-mf-edge="top"] {
		top: 0;
		background: linear-gradient(to bottom, var(--mf-scroll-fade-color), transparent);
	}

	&[data-mf-edge="bottom"] {
		bottom: 0;
		background: linear-gradient(to top, var(--mf-scroll-fade-color), transparent);
	}
}

.mf-scrollbar-thumb {
	/* The cut in the thumb's own space, which it has travelled `at` down. */
	--mf-cut: calc(var(--mf-scroll-notch) - var(--mf-scroll-at));

	top: 0;
	right: var(--mf-scroll-inset);
	width: calc(var(--mf-scroll-width) + var(--mf-scroll-bend));
	height: var(--mf-scroll-thumb);
	transform: translateY(var(--mf-scroll-at));

	/* The near side of the band; the far side is the edge's own clip, which is why the
	   box is a bend wider than the bar. Bending around nothing puts every vertex on one
	   line, well outside the thumb, and the band is straight. */
	clip-path: polygon(
		var(--mf-scroll-bend) -9999px,
		var(--mf-scroll-bend) calc(var(--mf-cut) - var(--mf-scroll-flat) - var(--mf-scroll-bend)),
		0 calc(var(--mf-cut) - var(--mf-scroll-flat)),
		0 calc(var(--mf-cut) + var(--mf-scroll-flat)),
		var(--mf-scroll-bend) calc(var(--mf-cut) + var(--mf-scroll-flat) + var(--mf-scroll-bend)),
		var(--mf-scroll-bend) 9999px,
		100% 9999px,
		100% -9999px
	);

	background: var(--mf-color-scroll-thumb);
	opacity: var(--mf-scroll-idle);
	transition: opacity var(--mf-transition-fast);
}

/* The bar takes no input and covers the scroller, so the box holding both is hovered
   by either. */
:hover > .mf-scrollbar .mf-scrollbar-thumb {
	opacity: 1;
}

/* Driven by the scroll itself where the engine can: the compositor keeps the thumb in
   step with the content at any speed. An animation wins over the base style, so the
   position the runtime writes each pass stands wherever this does not run — including
   an unnamed timeline, which is `none`, which never applies. `ScrollBars/Bar` names
   one per scroller and says why it cannot be named here. */
@supports (timeline-scope: --mf-scroller) {
	.mf-scrollbar-thumb {
		animation: mf-scroll-thumb linear both;
		animation-timeline: var(--mf-scroll-timeline, none);
	}

	@keyframes mf-scroll-thumb {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(var(--mf-scroll-travel));
		}
	}
}