import { css } from '@emotion/core';
import styled from '@emotion/styled';
import hexToRgba from 'hex-rgba';
import { Box } from '@rebass/emotion';
import { colors, space } from 'utils/theme';
import { forDesktopUp, DisplayBlock, forPhoneOnly, DisplayNone } from 'utils/styles/mixins';

import { Z_INDEX } from 'utils/constants/z-indexes'

export const Header = css`
  position: fixed;
  width: 100%;
  z-index: ${Z_INDEX.NAV_BAR};
  display: none;
  border-bottom: solid 1px ${hexToRgba(colors.textDark, 0.3 * 100)};
  ${forDesktopUp(css`
    ${DisplayBlock};
  `)};
`;

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)`
  align-self: center;
  margin-left: ${space.small}px;
  padding-right: ${space.small}px;
`;

export const Logo = css`
  position: absolute;
  max-width: 40px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding-top: 10px;
`;


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

export const NavigationListStart = css`
  align-self: flex-end;
`;

export const NavigationListEnd = css`
  align-self: flex-end;
`

export const SocialIcons = css`
  ${forPhoneOnly(css`
    ${DisplayNone};
  `)};
`;