import styled from '@emotion/styled';
import { css } from '@emotion/core';
import { Flex } from '@rebass/emotion';

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

import { AbsoluteCover, FluidContainer } from 'utils/styles/mixins';
import { Z_INDEX } from 'utils/constants/z-indexes';

export const HeroWrapper = styled.div`
  display: inline-block;
  width: 100%;
`;

export const HeroImage = css`
  position: absolute !important;
  ${AbsoluteCover}
`;

export const HeroFlexContainer = css`
  justify-content: center;
  margin: ${rhythm(0.4)};
  
  @media (min-width: ${breakpoints.medium}) {
    margin: auto;
  }
`

export const HeroModuleWrapper: any = styled.div`
  position: relative;
  width: 100%;
  height: 50vh;
  min-height: 500px;
  z-index: ${Z_INDEX.HERO};
  color: white;
  @media (min-width: ${breakpoints.large}) {
    height: 80vh;
  }
`;

export const HeroContent = styled.figcaption`
  z-index: ${Z_INDEX.HERO};
  position: absolute;
  width: 100%;
  bottom: ${rhythm(0.8)};
  @media (min-width: ${breakpoints.large}) {
    bottom: ${rhythm(2)};
  }
`;

export const HeroContentContainer = styled(Flex)`
  ${FluidContainer}
`;

export const HeroContentInner = css`
  max-width: 614px;
  width: 100%;
  padding: ${rhythm(1)} ${rhythm(1)};

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