@use '../variables' as *;

// CSS variables are intentionally declared without defaults here.
// Each theme (fci, centurion, …) is responsible for providing all values.

.#{$prefix}scroll-area {
	// ─── Layout ──────────────────────────────────────────────────────────────────

	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;

	&__view {
		flex: 1;
		min-height: 0;
		overflow: auto;
		scrollbar-width: none;

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

	&__content {
		min-width: 100%;
	}

	// ─── Track (rail) ────────────────────────────────────────────────────────────

	&__track {
		position: absolute;
		border-radius: var(--#{$prefix}scroll-area-radius);
		background-color: var(--#{$prefix}scroll-area-track-color);
	}

	&__track--vertical {
		display: flex;
		flex-direction: column;
		width: var(--#{$prefix}scroll-area-size);
		inset-block: var(--#{$prefix}scroll-area-margin);
		inset-inline-end: var(--#{$prefix}scroll-area-margin);
		z-index: 10;
	}

	&__track--horizontal {
		display: flex;
		flex-direction: row;
		height: var(--#{$prefix}scroll-area-size);
		inset-inline: var(--#{$prefix}scroll-area-margin);
		inset-block-end: var(--#{$prefix}scroll-area-margin);
		z-index: 10;
	}

	// ─── Thumb ───────────────────────────────────────────────────────────────────

	&__thumb {
		border-radius: inherit;
		background-color: var(--#{$prefix}scroll-area-thumb-color);
		cursor: default;
		transition: background-color 0.15s ease;

		&--vertical {
			width: 100%;
		}

		&--horizontal {
			height: 100%;
		}
	}

	// ─── States ──────────────────────────────────────────────────────────────────
	
	// 1. Hover over the entire scroll area
	&:hover .#{$prefix}scroll-area__thumb {
		background-color: var(--#{$prefix}scroll-area-thumb-area-hover-color, var(--#{$prefix}scroll-area-thumb-color));
	}

	// 2. Hover specifically over the track (the scrollbar rail)
	&__track:hover .#{$prefix}scroll-area__thumb {
		background-color: var(--#{$prefix}scroll-area-thumb-hover-color);
	}

	// 3. Active scrolling / Clicking
	&__track[data-scrolling] .#{$prefix}scroll-area__thumb,
	&__thumb:active {
		background-color: var(--#{$prefix}scroll-area-thumb-active-color) !important;
	}

	// ─── Corner ──────────────────────────────────────────────────────────────────

	&__corner {
		background-color: var(--#{$prefix}scroll-area-track-color);
	}

	// ─── Modifiers ───────────────────────────────────────────────────────────────

	&--autohide {
		.#{$prefix}scroll-area__track--vertical {
			inset-inline-end: var(--#{$prefix}scroll-area-autohide-margin, var(--#{$prefix}scroll-area-margin)) !important;
		}

		.#{$prefix}scroll-area__track--horizontal {
			inset-block-end: var(--#{$prefix}scroll-area-autohide-margin, var(--#{$prefix}scroll-area-margin)) !important;
		}

		.#{$prefix}scroll-area__track {
			opacity: 0;
			transition: opacity 0.3s ease;
		}

		&:hover .#{$prefix}scroll-area__track,
		.#{$prefix}scroll-area__track[data-scrolling] {
			opacity: 1;
		}
	}

	// Non-floating: viewport is inset so content never overlaps the scrollbar.
	// Padding is only applied when the scrollbar track is actually in the DOM and visible
	// (keepMounted=false → element removed when not scrollable; keepMounted=true → element gets [hidden]).
	&--inset-v:has(.#{$prefix}scroll-area__track--vertical:not([hidden])) .#{$prefix}scroll-area__view {
		padding-inline-end: calc(var(--#{$prefix}scroll-area-size) + var(--#{$prefix}scroll-area-margin) * 2);
	}

	&--inset-h:has(.#{$prefix}scroll-area__track--horizontal:not([hidden])) .#{$prefix}scroll-area__view {
		padding-block-end: calc(var(--#{$prefix}scroll-area-size) + var(--#{$prefix}scroll-area-margin) * 2);
	}

	// ─── Non-floating Arrows (scoping to root classes) ───────────────────────────

	&--inset-v .#{$prefix}scroll-area__track--vertical {
		top: calc(var(--#{$prefix}scroll-area-margin) + var(--#{$prefix}scroll-area-button-size, 0px)) !important;
		bottom: calc(var(--#{$prefix}scroll-area-margin) + var(--#{$prefix}scroll-area-button-size, 0px)) !important;
		inset-inline-end: var(--#{$prefix}scroll-area-margin) !important;
		overflow: visible !important;

		.#{$prefix}scroll-area__button {
			position: absolute;
			display: var(--#{$prefix}scroll-area-button-display, none);
			left: 0;
			width: 100%;
			height: var(--#{$prefix}scroll-area-button-size);
			background-color: var(--#{$prefix}scroll-area-button-bg);
			background-repeat: no-repeat;
			background-position: center;
			border: var(--#{$prefix}scroll-area-button-border);
			cursor: pointer;
			z-index: 20;

			&--up {
				background-image: var(--#{$prefix}scroll-area-button-up-icon);
				top: calc(var(--#{$prefix}scroll-area-button-size, 0px) * -1);
			}

			&--down {
				background-image: var(--#{$prefix}scroll-area-button-down-icon);
				bottom: calc(var(--#{$prefix}scroll-area-button-size, 0px) * -1);
			}
		}
	}

	&--inset-h .#{$prefix}scroll-area__track--horizontal {
		left: calc(var(--#{$prefix}scroll-area-margin) + var(--#{$prefix}scroll-area-button-size, 0px)) !important;
		right: calc(var(--#{$prefix}scroll-area-margin) + var(--#{$prefix}scroll-area-button-size, 0px)) !important;
		inset-block-end: var(--#{$prefix}scroll-area-margin) !important;
		overflow: visible !important;

		.#{$prefix}scroll-area__button {
			position: absolute;
			display: var(--#{$prefix}scroll-area-button-display, none);
			top: 0;
			height: 100%;
			width: var(--#{$prefix}scroll-area-button-size);
			background-color: var(--#{$prefix}scroll-area-button-bg);
			background-repeat: no-repeat;
			background-position: center;
			border: var(--#{$prefix}scroll-area-button-border);
			cursor: pointer;
			z-index: 20;

			&--left {
				background-image: var(--#{$prefix}scroll-area-button-left-icon);
				left: calc(var(--#{$prefix}scroll-area-button-size, 0px) * -1);
			}

			&--right {
				background-image: var(--#{$prefix}scroll-area-button-right-icon);
				right: calc(var(--#{$prefix}scroll-area-button-size, 0px) * -1);
			}
		}
	}

	// Gradient fade edges — driven by Base UI's scroll-position CSS variables on the viewport.
	// The gradient grows from 0 (no scroll available) up to --fade-size (deep in content).
	&--fade-y .#{$prefix}scroll-area__view {
		mask-image: linear-gradient(
			to bottom,
			transparent 0,
			black min(var(--#{$prefix}scroll-area-fade-size), var(--scroll-area-overflow-y-start)),
			black
				calc(
					100% - min(
							var(--#{$prefix}scroll-area-fade-size),
							var(--scroll-area-overflow-y-end, var(--#{$prefix}scroll-area-fade-size))
						)
				),
			transparent 100%
		);
		mask-repeat: no-repeat;
	}

	&--fade-x .#{$prefix}scroll-area__view {
		mask-image: linear-gradient(
			to right,
			transparent 0,
			black min(var(--#{$prefix}scroll-area-fade-size), var(--scroll-area-overflow-x-start)),
			black
				calc(
					100% - min(
							var(--#{$prefix}scroll-area-fade-size),
							var(--scroll-area-overflow-x-end, var(--#{$prefix}scroll-area-fade-size))
						)
				),
			transparent 100%
		);
		mask-repeat: no-repeat;
	}

	// Both axes — mask-composite: intersect so corners transition cleanly
	&--fade-both .#{$prefix}scroll-area__view {
		mask-image: linear-gradient(
				to bottom,
				transparent 0,
				black min(var(--#{$prefix}scroll-area-fade-size), var(--scroll-area-overflow-y-start)),
				black
					calc(
						100% - min(
								var(--#{$prefix}scroll-area-fade-size),
								var(--scroll-area-overflow-y-end, var(--#{$prefix}scroll-area-fade-size))
							)
					),
				transparent 100%
			),
			linear-gradient(
				to right,
				transparent 0,
				black min(var(--#{$prefix}scroll-area-fade-size), var(--scroll-area-overflow-x-start)),
				black
					calc(
						100% - min(
								var(--#{$prefix}scroll-area-fade-size),
								var(--scroll-area-overflow-x-end, var(--#{$prefix}scroll-area-fade-size))
							)
					),
				transparent 100%
			);
		mask-composite: intersect;
		mask-repeat: no-repeat;
	}
}