text: /*
   * Copyright 2020 Google LLC
   *
   * Licensed under the Apache License, Version 2.0 (the "License");
   * you may not use this file except in compliance with the License.
   * You may obtain a copy of the License at
   *
   *     https://www.apache.org/licenses/LICENSE-2.0
   *
   * Unless required by applicable law or agreed to in writing, software
   * distributed under the License is distributed on an "AS IS" BASIS,
   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   * See the License for the specific language governing permissions and
   * limitations under the License.
   */
  /**
   * External dependencies
   */
  import PropTypes from 'prop-types';
  import styled from 'styled-components';
  
  /**
   * Internal dependencies
   */
  import useLayoutContext from './useLayoutContext';
  
  const ScrollContent = styled.div`
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
  
    /**
     * Adds inertial scrolling to iOS
     * devices like iPad
     */
    -webkit-overflow-scrolling: touch;
  `;
  
  const Inner = styled.div`
    position: relative;
    padding-top: ${(props) => props.paddingTop || 0}px;
    width: ${({ scrollbarWidth }) => `calc(100% + ${scrollbarWidth}px)`};
  `;
  
  Inner.propTypes = {
    paddingTop: PropTypes.number,
  };
  
  const Scrollable = ({ children }) => {
    const {
      state: { scrollFrameRef, squishContentHeight },
    } = useLayoutContext();
  
    const scrollbarWidth = scrollFrameRef?.current
      ? scrollFrameRef.current.offsetWidth - scrollFrameRef.current.clientWidth
      : 0;
  
    return (
      <ScrollContent ref={scrollFrameRef}>
        <Inner scrollbarWidth={scrollbarWidth} paddingTop={squishContentHeight}>
          {children}
        </Inner>
      </ScrollContent>
    );
  };
  
  Scrollable.propTypes = {
    children: PropTypes.node,
  };
  
  export default Scrollable;
  