import styled, { StyledComponent } from '@emotion/styled';
import { css } from '@emotion/core'
import { Flex } from '@rebass/emotion'
import { getColumnSize } from 'utils/styles/grid';
import { breakpoints, space, BREAKPOINT_VALUES } from 'utils/theme';
import { forDesktopUp } from 'utils/styles/mixins';

export const Module = styled(Flex)`
  flex-direction: column;
  align-items: center;
  width: 100%;
`

export const TextContainer = styled(Flex)`
  flex-direction: column;
  align-items: center;
  padding: ${space.small}px;
  @media (min-width: ${breakpoints.medium}) {
    padding: 0;
    width: ${getColumnSize(8)}px;
  }
`

export const IFrame: StyledComponent<any, any, any> = styled.iframe`
  display: block;
  width: 100%;
  height: 100%;
  padding: ${space.xsmall}px;
  ${forDesktopUp(css`
    padding: 0px;
  `)};
`

export const VideoContainer: StyledComponent<any, any, any> = styled.div`
  height: ${(props: any) => props.height}px;
  width: ${(props: any) => props.width}px;
  ${forDesktopUp(css`
    height: calc(0.56px * ${`${getColumnSize(10)}` });
  `)};
`;

export const FallBackVideoContainer = styled.div`
  width: 90vw;
  height: calc(0.56 * 90vw);
  ${forDesktopUp(css`
    width: ${BREAKPOINT_VALUES.MEDIUM}px;
    height: ${`calc(0.56 * ${BREAKPOINT_VALUES.MEDIUM}px)`};
  `)};
`;