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

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`
  height: 265px;

  @media (min-width: ${breakpoints.medium}) {
    height: auto;
    position: absolute !important;
    ${AbsoluteCover}
  }
`;

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

export const HeroModuleWrapper: any = styled.div`
  position: relative;
  width: 100%;
  min-height: 400px;
  z-index: ${Z_INDEX.HERO};
  margin-bottom: 50px;

  @media (min-width: ${breakpoints.medium}) {
    height: calc(80vh - 50px);
  }
`;

export const HeroContent = styled.figcaption`
  z-index: ${Z_INDEX.HERO};
  top: -${theme.space[3]}px;
  margin-bottom: -${theme.space[3]}px;
  position: relative;

  @media (min-width: ${breakpoints.medium}) {
    position: absolute;
    width: 100%;
    top: inherit;
    margin-bottom: 0;
    bottom: -${theme.space[2]}px;
  }
`;

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

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

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