/* @flow */
import { createStyledComponent, pxToEm } from '../../../../../library/styles';
import _Flex from '../../../../../library/Flex';

type Props = {
  gutterWidth?: number | string,
  theme: Object
};

export const containerStyles = ({
  gutterWidth: propGutterSize,
  theme
}: Props) => {
  const gutterWidth = propGutterSize === undefined ? 'md' : propGutterSize;
  const gutter =
    typeof gutterWidth === 'number'
      ? pxToEm(gutterWidth / 2)
      : `${parseFloat(theme[`space_inline_${gutterWidth}`] || gutterWidth) /
          2}em`;
  const offset = gutterWidth ? `calc(${gutter} - 4px)` : -4;

  return {
    position: 'relative',

    '&::before': {
      border: `1px dotted ${theme.color_theme_30}`,
      bottom: -4,
      content: '""',
      left: offset,
      position: 'absolute',
      right: offset,
      top: -4,
      zIndex: -1
    }
  };
};

export default createStyledComponent(_Flex, (props) => ({
  ...containerStyles(props)
}));

/* @flow */
import { createStyledComponent, pxToEm } from '../../../../../library/styles';
import _Flex from '../../../../../library/Flex';

type Props = {
  gutterWidth?: number | string,
  theme: Object
};

export const containerStyles = ({
  gutterWidth: propGutterSize,
  theme
}: Props) => {
  const gutterWidth = propGutterSize === undefined ? 'md' : propGutterSize;
  const gutter =
    typeof gutterWidth === 'number'
      ? pxToEm(gutterWidth / 2)
      : `${parseFloat(theme[`space_inline_${gutterWidth}`] || gutterWidth) /
          2}em`;
  const offset = gutterWidth ? `calc(${gutter} - 4px)` : -4;

  return {
    position: 'relative',
    zIndex: 1,

    '&::before': {
      border: `1px dotted ${theme.color_theme_30}`,
      bottom: -4,
      content: '""',
      left: offset,
      position: 'absolute',
      right: offset,
      top: -4,
      zIndex: -1
    }
  };
};

export default createStyledComponent(_Flex, (props) => ({
  ...containerStyles(props)
}));

Fix display issue with Layout examples
chore(website): Fix display issue with Layout examples
