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

import { fontSizes, durations, lineHeights, space } from 'utils/theme';
import { MI_Transition, forDesktopUp } from 'utils/styles/mixins';
import { Z_INDEX } from 'utils/constants/z-indexes';

import Typography from 'utils/typography';

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

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

export const ControlsContainer = styled(Box)`
  ${forDesktopUp(css`
    position: absolute;
    background: white;
    padding:7px 15px;
    right: ${space.small}px;
    bottom: ${12 + space.small}px; /* Slick slider adds some arbitrary bottom padding... arg! */
    z-index: ${Z_INDEX.FORM_UI};
  `)};
`;

export const CaptionContainer = styled(Box)`
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  ${forDesktopUp(css`
    display: block;
  `)};
`;

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