import styled, { css } from 'react-emotion'; import mq from '../../utils/styles/media'; import Icon from '../Icon/Icon'; import colors from '../../utils/styles/colors'; export const Wrapper = styled('div')({ '&&': { background: colors.snow, borderTop: `1px solid ${colors.greyGainsboro}`, color: colors.nobel01, fontSize: '14px', padding: '20px', }, }); export const Inner = styled('div')` && { display: flex; align-items: center; justify-content: flex-end; width: 100%; ${() => { // @ts-ignore return mq.medium(css` min-width: 400px; max-width: 800px; margin: auto; justify-content: space-between; `); }}; ${() => { // @ts-ignore return mq.large(css` max-width: 1240px; `); }}; } `; export const Left = styled('div')` && { align-items: center; display: none; ${() => { // @ts-ignore return mq.medium(css` display: flex; `); }}; } `; export const Right = styled(Left)({ '&&': { display: 'flex', }, }); export const ToolTip = styled('span')({ '&&': { position: 'relative', height: '18px', }, }); export const Earth = styled(Icon)({ '&&': { padding: '0 10px', }, }); export const Flags = styled('span')` && { position: absolute; background: ${colors.greyAthens}; padding: 1px 4px; border-radius: 3px; height: 20px; display: inline-flex; align-items: center; visibility: hidden; top: -2px; :before { content: ''; position: absolute; top: 29%; left: -4px; margin-left: -5px; border: 5px solid; border-color: ${colors.greyAthens} transparent transparent transparent; transform: rotate(90deg); } ${ToolTip}:hover & { visibility: visible; } } `; export const Love = styled('span')({ '&&': { color: colors.love, padding: '0 5px', }, }); export const Flag = styled(Icon)({ '&&': { padding: '0 5px', }, }); export const Logo = Flag;