/**
 * AMA Scrollbar — reusable custom vertical scrollbar (see theme/js/ama-scrollbar.js).
 *
 * Tune per instance or context with custom properties:
 *
 *   .my-list { --ama-scroll-max-height: 20rem; --ama-sb-thumb: var(--ama-primary-color); }
 *   .modal-list { --ama-scroll-overscroll: contain; }  — trap scrolling inside (default: hand off to the page)
 */

.ama-scroll {
	--ama-scroll-max-height: none;             /* Height limit of the scroll area. */
	--ama-sb-size: .25rem;                     /* Thumb width. */
	--ama-sb-track-size: .125rem;              /* Track line width. */
	--ama-sb-gap: 2.5rem;                      /* Space between content and bar. */
	--ama-sb-inset: 0rem;                      /* Track top/bottom inset. */
	--ama-sb-hit: 1rem;                        /* Clickable width around the bar. */
	--ama-sb-min-thumb: 2rem;
	--ama-sb-radius: 1rem;
	--ama-sb-thumb: var(--ama-secondary-color, #ff6347);
	--ama-sb-thumb-hover: var(--ama-sb-thumb);
	--ama-sb-track: var(--ama-powder-blue-color, #b0e0e6);

	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 0;
	max-height: var(--ama-scroll-max-height);
}

.ama-scroll__viewport {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	/* auto = at the top/bottom the page keeps scrolling (no "stuck" list on
	 * touch). Set --ama-scroll-overscroll: contain on a context to trap it. */
	overscroll-behavior-y: var(--ama-scroll-overscroll, auto);
	-webkit-overflow-scrolling: touch;
}

.ama-scroll__viewport:focus {
	outline: none;
}

.ama-scroll__viewport:focus-visible {
	outline: 2px solid var(--ama-sb-thumb);
	outline-offset: 2px;
}

/* JS running → hide the native bar, show ours. */
.ama-scroll.is-ready > .ama-scroll__viewport {
	scrollbar-width: none;
}

.ama-scroll.is-ready > .ama-scroll__viewport::-webkit-scrollbar {
	display: none;
}

.ama-scroll.is-ready.has-overflow > .ama-scroll__viewport {
	padding-right: calc(var(--ama-sb-gap) + var(--ama-sb-size));
}

.ama-scroll__track {
	position: absolute;
	top: var(--ama-sb-inset);
	bottom: var(--ama-sb-inset);
	right: calc((var(--ama-sb-hit) - var(--ama-sb-size)) / -2);
	width: var(--ama-sb-hit);
	display: none;
	cursor: pointer;
	/* Swipes over the bar still scroll the page on touch devices. */
	touch-action: pan-y;
}

.ama-scroll.has-overflow > .ama-scroll__track {
	display: block;
}

/* The thin line. */
.ama-scroll__track::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: var(--ama-sb-track-size);
	transform: translateX(-50%);
	border-radius: var(--ama-sb-radius);
	background: var(--ama-sb-track);
}

.ama-scroll__thumb {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--ama-sb-size);
	margin-left: calc(var(--ama-sb-size) / -2);
	border-radius: var(--ama-sb-radius);
	background: var(--ama-sb-thumb);
	cursor: grab;
	/* Only the thumb itself captures touch (for dragging). */
	touch-action: none;
	will-change: transform;
	transition: width .2s linear, margin .2s linear, background-color .2s linear;
}

.ama-scroll__track:hover .ama-scroll__thumb,
.ama-scroll.is-dragging .ama-scroll__thumb {
	background: var(--ama-sb-thumb-hover);
}

.ama-scroll.is-dragging {
	user-select: none;
}

.ama-scroll.is-dragging .ama-scroll__thumb {
	cursor: grabbing;
}

/* Optional fade hint at the bottom while more content is below: add .has-fade */
.ama-scroll.has-fade.has-overflow:not(.is-at-end)::after {
	content: "";
	position: absolute;
	left: 0;
	right: calc(var(--ama-sb-gap) + var(--ama-sb-size));
	bottom: 0;
	height: 2.5rem;
	background: linear-gradient(to bottom, transparent, var(--ama-sb-fade, var(--ama-white-color, #fff)));
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.ama-scroll__thumb {
		transition: none;
	}
}