import { css } from '@emotion/core';
import { Flex, Box } from '@rebass/emotion';
import styled from '@emotion/styled';
import hexToRgba from 'hex-rgba';

import { colors } from 'utils/theme';
import { forDesktopUp, DisplayBlock } from 'utils/styles/mixins'
import { Z_INDEX } from 'utils/constants/z-indexes';

export const Header: any = styled(Box)`
  position: fixed;
  top: 0;
  z-index: ${Z_INDEX.NAV_BAR};
  width: 100%;
  box-shadow: 0 5px 40px rgba(0, 0, 0, 0.14);
  display: none;
  ${forDesktopUp(css`
    ${DisplayBlock};
  `)};
`;

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

  img {
    display: block;
  }
`;

export const NavigationItemLink = styled.div`
  a {
    display: block;
    font-size: 16px;
    color: ${(props: any): any => props.textColour};
    background: transparent;
    margin: 0 10px;
    padding: 10px 25px;
    border-radius: 40px;
    transition: all .2s ease-in-out;

    &:hover {
      color: ${colors.textLight};
      background: ${(props: any): any => hexToRgba(props.highlightColour, 85)};
    }
  }
`;

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

export const NavigationList = css`
display: inline;
margin-left: 60px;
`;

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