import { css } from '@emotion/core';
import styled from '@emotion/styled';
import { Box } from '@rebass/emotion';
import { rhythm } from 'utils/typography';
import { colors, breakpoints } from 'utils/theme';

const AbsoluteCenter = css`
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
`;

export const BackLinkStyles = css`
  color: ${colors.textDark};
  text-decoration: none;
`;

export const TopLinks = styled(Box)`
  position: relative;
`;

export const SocialContainer = styled(Box)`
  ${AbsoluteCenter}
  left: 0;
`;

export const BasketContainer = styled(Box)`
  ${AbsoluteCenter}
  right: 0;
  width: 36px;
`;

export const Logo = css`
  display: block;
  max-width: 200px;
  margin: 0 auto;

  @media (max-width: ${breakpoints.medium}) {
    max-width: 150px;
  }
`;

export const Header = css`
  padding: ${rhythm(1)} 0 0;
  display: none;

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

  @media (max-width: ${breakpoints.medium}) {
    padding: ${rhythm(1/2)} 0 0;
  }
`;

export const NavigationList = css`
  display: inline-block;
`;

export const SocialIcons = css`
  @media (max-width: ${breakpoints.small}) {
    display: none;
  }
`;