import styled, { StyledComponent } from '@emotion/styled';
import { css } from '@emotion/core';
import { Box, Flex, Text } from '@rebass/emotion';

import { getColumnSize } from 'utils/styles/grid';
import { fontSizes, durations, lineHeights } from 'utils/theme';
import { MI_Transition, forDesktopUp } from 'utils/styles/mixins';

export const Module = styled(Box)`
  ${forDesktopUp(css`
    position: relative;
    width: 100%;
  `)};
`

export const ImageContainer = styled(Flex)`
  flex-direction: column;
  ${forDesktopUp(css`
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
  `)};
`

export const SlideContainer = styled(Box)`
  overflow: hidden;
`

export const SliderContainer = styled(Box)`
  width: 100%;
  ${forDesktopUp(css`
    width: 80%;
    max-width: ${getColumnSize(10)}px;
  `)};
`

export const ControlsContainer = styled(Box)`
  position: relative;
  margin-bottom: 20px;
  ${forDesktopUp(css`
    position: absolute;
    bottom: 70px;
    right: 30px;
    height: 500px;
    margin-bottom: 0;
  `)};
`
export const CaptionContainer = styled(Box)`
  position: relative;
  overflow: hidden;
  min-height: 35px;
  max-width: ${getColumnSize(10)}px;
`

export const Caption: StyledComponent<any, any, any> = styled(Text)`
  ${MI_Transition('opacity', durations.slow)};
  opacity: ${({opacity}) => opacity};
  position: absolute;
  color: ${(props: any) => props.colour};
  line-height: ${lineHeights.small};
  font-size: ${fontSizes.xSmall};
  ${forDesktopUp(css`
    line-height: ${lineHeights.small};
    font-size: ${fontSizes.small};
  `)};
`