import styled, { StyledComponent } from '@emotion/styled';
import Link from 'gatsby-link';
import { css } from '@emotion/core';
import { Flex, Box } from '@rebass/emotion';

import { breakpoints, colors, space, lineHeights } from 'utils/theme';

export const Content: StyledComponent<any, any, any> = styled(Flex)`
  width: 100%;
  margin: ${space.regular}px 0;
  display: flex;
  flex-direction: column;

  @media (min-width: ${breakpoints.medium}) {
    max-width: 500px;
    display: flex;
    margin: ${space.small}px auto ${space.xlarge}px auto;
  }

  @media (min-width: ${breakpoints.large}) {
    width: 100%;
    margin: ${space.regular}px 0;
    flex-direction: row;
    max-width: none;
  }
`;

export const BackLink = css`
  color: ${colors.textDark};
  line-height: ${lineHeights.base};
  margin-bottom: ${space.small}px;
  border-bottom: 1px solid ${colors.textDark};
  font-weight: 600;
`;

export const BackLinkDesktop: StyledComponent<any, any, any> = styled(Link)`
  ${BackLink}
  display: none;

  @media (min-width: ${breakpoints.large}) {
    display: inline-block;
  }
`;

export const BackLinkMobile: StyledComponent<any, any, any> = styled(Link)`
  ${BackLink}
  display: inline-block;

  @media (min-width: ${breakpoints.large}) {
    display: none;
  }
`;

export const BasketContainer: StyledComponent<any, any, any> = styled(Box)`
  margin-bottom: ${space.regular}px;
  order: -1;

  @media (min-width: ${breakpoints.large}) {
    margin-bottom: 0;
    order: unset;
  }
`;