/**
 * Returns the total inline or block offset (margin / padding) of an
 * element in CSS pixels. Used by scroll-area to compute the effective
 * inner size of viewports without being tripped up by Safari's RTL
 * margin-inline-end bug — on Safari we assume symmetry and double the
 * start value instead of summing start + end.
 */
export function getOffset(
	element: Element | null,
	prop: "margin" | "padding",
	axis: "x" | "y",
): number {
	if (!element) {
		return 0;
	}

	const styles = getComputedStyle(element);
	const propAxis = axis === "x" ? "Inline" : "Block";

	// Safari misreports `marginInlineEnd` in RTL.
	// We have to assume the start/end values are symmetrical, which is likely.
	if (axis === "x" && prop === "margin") {
		return Number.parseFloat(styles[`${prop}InlineStart`]) * 2;
	}

	return (
		Number.parseFloat(styles[`${prop}${propAxis}Start`]) +
		Number.parseFloat(styles[`${prop}${propAxis}End`])
	);
}