/* side-nav-content.tsx generated by @compiled/babel-plugin v0.38.1 */
import "./side-nav-content.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { forwardRef, useMemo, useRef } from 'react';
import mergeRefs from '@atlaskit/ds-lib/merge-refs';
import { fg } from '@atlaskit/platform-feature-flags';
/**
 * The main content of the side nav, filling up the middle section. It acts as a scroll container.
 *
 * It will grow to take up the available space in the side nav — this is used to push the footer to the
 * bottom of the side nav.
 */
export const SideNavContent = /*#__PURE__*/forwardRef(_SideNavContent);

// Placing this const below the function breaks Compiled!
const styles = {
  scrollContainer: "_16jlkb7n _1o9zkb7n _i0dlf1ug _1reo1wug _18m91wug",
  paddingContainer: "_1q51utpp _y4tiutpp _85i5utpp _bozgutpp"
};

/**
 * Using CSS scroll-driven animations to apply a scrolled indicator border.
 *
 * This approach is better for SSR, as some apps like Confluence will apply the
 * initial scroll position of the side nav content using JS before hydration.
 *
 * If we applied the border through React state it would only appear after hydration,
 * whereas this CSS approach should show even before hydration.
 */
const scrolledBorder = null;
const scrollTimelineVar = '--sNcst';
const fullHeightSidebarStyles = {
  scrollContainer: "_1un9baqb _21o1gc9s _j7hq98ya"
};
function _SideNavContent({
  children,
  testId
}, forwardedRef) {
  const internalRef = useRef(null);
  const mergedRef = useMemo(() => mergeRefs([internalRef, forwardedRef]), [forwardedRef]);
  return /*#__PURE__*/React.createElement("div", {
    ref: fg('navx-full-height-sidebar') ? mergedRef : forwardedRef,
    "data-testid": testId,
    className: ax([styles.scrollContainer, fg('navx-full-height-sidebar') && fullHeightSidebarStyles.scrollContainer])
  }, /*#__PURE__*/React.createElement("div", {
    className: ax([styles.paddingContainer])
  }, children));
}