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

// @flow

import * as React from 'react';
import styled from 'styled-components';
import defaultTheme from '@kiwicom/orbit-components/lib/defaultTheme';

type Props = {|
  children: React.Node,
  padding?: string,
  backgroundColor?: string,
  mobileBackgroundColor?: string,
  borderRadius?: string,
  border?: string,
|};

const BoxWrapper = styled.div`
  padding: ${({ padding }) => padding || '0'};
  position: relative;
  max-width: 100%;
  border-radius: ${({ borderRadius }) => borderRadius || '3px'};
  border: ${({ border }) =>
    border || `solid 1px ${defaultTheme.orbit.paletteCloudNormal}`};
  background-color: ${({ backgroundColor }) =>
    backgroundColor || defaultTheme.orbit.backgroundCard};

  @media only screen and (max-width: 901px) {
    background-color: ${({ mobileBackgroundColor }) =>
      mobileBackgroundColor || defaultTheme.orbit.backgroundCard};
  }
`;

const Box = (props: Props) => (
  <BoxWrapper {...props}>{props.children}</BoxWrapper>
);

export default Box;