@kiwicom/smart-faq/src/SmartFAQ/common/ScrollableBox.js

// @flow

import * as React from 'react';

type Props = {|
  children: React.Node,
  styles?: string,
  disabled?: boolean,
|};

const ScrollableBox = (props: Props) => (
  <div className="scrollable-box" data-cy="scrollable-box">
    {props.children}
    <style jsx>
      {`
        ::-webkit-scrollbar {
          width: 6px;
        }
        ::-webkit-scrollbar-track {
          background: white;
          margin-top: 25px;
        }
        ::-webkit-scrollbar-thumb {
          border-radius: 3px;
          background-color: rgba(171, 181, 195, 0.6);
        }
        div.scrollable-box {
          ${props.disabled ? '' : 'overflow-y: auto;'}
          width: 100vw;
          margin: 0 auto;
          ${props.styles ? props.styles : ''};
        }
        @media only screen and (min-width: 901px) {
          div.scrollable-box {
            max-width: 100%;
          }
        }
        @media only screen and (max-width: 901px) {
          div.scrollable-box {
            padding: 0;
          }
        }
      `}
    </style>
  </div>
);

export default ScrollableBox;