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

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

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

export const BackgroundImageWrapper = styled.div`
  width: 100%;
  height: 300px;

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

export const GatsbyBackgroundImage: StyledComponent<any, any, any> = styled(BackgroundImage)`
    height: 100%;
    position: relative;

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

    @media (min-width: ${breakpoints.medium}) {
      position: absolute !important;
      top: 30px;
      bottom: 30px;
      left: 0;
      width: 100%;
    }
`;

export const TextBlock = css`
  padding: ${theme.space[1]}px;
  width: 100%;

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