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

import { rhythm } from 'utils/typography';
import { breakpoints } from 'utils/theme';

export const LayoutHeader: StyledComponent<any, any, any> = styled(Box)`
  display: none;

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

export const BackLinkStyles = css`
  text-decoration: none;
`;

export const Logo = css`
  display: block;
  width: 130px;

  img {
    display: block;
  }
`;

export const BasketIcon: StyledComponent<any, any, any> = styled.span`
  position: relative;
  margin-top: 7px;
  padding: 10px 8px 0;
  margin-top: -14px;
  background: ${(props: any): string => props.background};

  &:hover {
    cursor: pointer;
  }

  &:before {
    position: absolute;
    width: 100%;
    height: 200%;
    content: '';
    background: ${(props: any): string => props.background};
    bottom: 100%;
    left: 0;
  }

  svg {
    width: 26px;
  }
`;

export const NavigationItemLink = css`
  display: block;
  font-size: 16px;
  margin: 0 ${rhythm(2/3)};
`;

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

export const NavigationList = css`
  display: inline;
  margin-left: ${rhythm(1.5)};
`;

export const AddToBasketButton = styled(Flex)`
  :hover {
    pointer;
  }
`;