import styled from '@emotion/styled';

import { breakpoints } from '../../utils/styles/media';
import Icon from '../Icon/Icon';
import { Theme } from '../../design-tokens/theme';

export const Wrapper = styled('div')<{ theme?: Theme }>(props => ({
  background: props.theme && props.theme.palette.snow,
  borderTop: `1px solid ${props.theme && props.theme.palette.greyGainsboro}`,
  color: props.theme && props.theme.palette.nobel01,
  fontSize: '14px',
  padding: '20px',
}));

export const Inner = styled('div')({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'flex-end',
  width: '100%',
  [`@media (min-width: ${breakpoints.medium}px)`]: {
    minWidth: 400,
    maxWidth: 800,
    margin: 'auto',
    justifyContent: 'space-between',
  },
  [`@media (min-width: ${breakpoints.large}px)`]: {
    maxWidth: 1240,
  },
});

export const Left = styled('div')({
  alignItems: 'center',
  display: 'none',
  [`@media (min-width: ${breakpoints.medium}px)`]: {
    display: 'flex',
  },
});

export const Right = styled(Left)({
  display: 'flex',
});

export const Earth = styled(Icon)({
  padding: '0 10px',
});

export const Flags = styled('span')<{ theme?: Theme }>(props => ({
  position: 'absolute',
  background: props.theme && props.theme.palette.greyAthens,
  padding: '1px 4px',
  borderRadius: 3,
  height: 20,
  display: 'inline-flex',
  alignItems: 'center',
  visibility: 'hidden',
  top: -2,
  ':before': {
    content: "''",
    position: 'absolute',
    top: '29%',
    left: -4,
    marginLeft: -5,
    border: '5px solid',
    borderColor: `${props.theme && props.theme.palette.greyAthens} transparent transparent transparent`,
    transform: 'rotate(90deg)',
  },
}));

export const ToolTip = styled('span')({
  position: 'relative',
  height: '18px',
  ':hover': {
    [`${Flags}`]: {
      visibility: 'visible',
    },
  },
});

export const Love = styled('span')<{ theme?: Theme }>(props => ({
  color: props.theme && props.theme.palette.love,
  padding: '0 5px',
}));

export const Flag = styled(Icon)({
  padding: '0 5px',
});

export const Logo = Flag;