import styled, { StyledComponent } from '@emotion/styled';
import { Box } from '@rebass/emotion';
import { css } from '@emotion/core';
import BackgroundImage from 'gatsby-background-image';

import theme, { breakpoints } from 'utils/theme';

export const LayoutGrid: any = styled(Box)`
  max-width: 1500px;
  margin: 0 auto;

  @media (min-width: ${breakpoints.medium}) {
    display: flex;
  }
`;

export const ModuleWrapper = styled(Box)`
  position: relative;
`;

export const BackgroundImageWrapper = styled.div`
  flex: 0 0 50%;
  position: relative;
  height: 300px;

  @media (min-width: ${breakpoints.medium}) {
    height: inherit;
  }
`;

export const GatsbyBackgroundImage: StyledComponent<any, any, any> = styled(BackgroundImage)`
    position: absolute !important;
    top: 0px;
    bottom: 0px;
    left: 0;
    width: 100%;

    &::before, &::after {
      background-position: center;
    }
`;

export const TextBlock = css`
  position: relative;
  flex: 0 0 50%;
  padding: ${theme.space[1]}px;

  @media (min-width: ${breakpoints.medium}) {
    padding: ${theme.space[3]}px;
  }
`;