getScrollAmount() {
                    // Get static proxy
                    const proxyElement = this.template.querySelector(PROXY_SELECTOR);
                    // Make the scroll amount 0 in case proxy element is absent

                    if (!proxyElement) {
                        return 0;
                    }
                    // Get header bottom or default to 0

                    const viewportTop = this.viewportTop !== undefined ? this.viewportTop : 0;
                    // Get distance between proxy element and header
                    // This is subtracting a constant value because we need to make this calculation under the
                    // assumption that the highlights is *not* collapsed.
                    // This is for scenarios such as scrolling to collapse, then navigating away, then browser back.
                    // In this scenario, the header should be collapsed.

                    const proxyRect = proxyElement.getBoundingClientRect();
                    const distanceFromViewportTop = proxyRect.top - PAGE_MARGIN;
                    // Return max of (headerBottom minus the distance we are from header) or 0

                    const ret = Math.max(viewportTop - distanceFromViewportTop, 0);
                    return ret;
                }

transformHighlightsContainerElement(highlights, amountScrolledInPixels, widthExpandAmount) {
                    const reducedSideMargin = calculateReducedSideMargin(widthExpandAmount);
                    highlights.style.left = reducedSideMargin;
                    highlights.style.right = reducedSideMargin;
                    // Expand the side padding based on the amount the width should expand

                    highlights.style.paddingLeft = this.originalElementStyles.highlightsContainer.paddingLeft + widthExpandAmount + 'px';
                    highlights.style.paddingRight = this.originalElementStyles.highlightsContainer.paddingRight + widthExpandAmount + 'px';
                    // Update the border radius of the highlights container to none when we are fully expanded

                    highlights.style.borderRadius = calculateBorderRadius(widthExpandAmount);
                    // Update the transform styling for the highlights container

                    highlights.style.transform = calculateHighlightsContainerTransformStyling(amountScrolledInPixels);
                }

                transformBodyElements(detail, computedScrollAmount) {
                    if (detail) {
                        detail.style.transform = calculateSecondaryFieldListTransformStyling(computedScrollAmount);
                    }
                }

function calculateWidthExpansionAmount(amountScrolledInPixels, totalHeightDelta) {
                // Calculate ratio to expand. If totalHeightDelta is 0, use extra margin as the default delta.
                const widthExpandRatio = amountScrolledInPixels / (totalHeightDelta ? totalHeightDelta : PAGE_MARGIN);
                // Calculate the amount to expand the width

                const widthExpandAmount = Math.min(widthExpandRatio * PAGE_MARGIN, PAGE_MARGIN);
                return widthExpandAmount;
            }
            function calculateReducedSideMargin(widthExpandAmount) {
                return PAGE_MARGIN - widthExpandAmount + "px";
            }
            function calculateBorderRadius(widthExpandAmount) {
                return widthExpandAmount === PAGE_MARGIN ? "0px" : BORDER_RADIUS + "px";
            }
            function calculateHighlightsContainerTransformStyling(amountScrolledInPixels) {
                const pixelsToCollapse = Math.min(amountScrolledInPixels, PAGE_MARGIN);
                // Don't set transform attribute if pixelsToCollapse is 0

                return pixelsToCollapse > 0 ? "translate3d(0, -" + pixelsToCollapse + 'px, 0)' : "";
            }
            function calculatedScrollAmount(isCollapsed, totalHeightDelta, amountScrolledInPixels) {
                return isCollapsed ? totalHeightDelta : Math.max(amountScrolledInPixels - PAGE_MARGIN, 0);
            }
            function calculateSecondaryFieldListTransformStyling(yVector) {
                return "translate3d(0,-" + yVector + "px,0)";
            }