import styled, { css } from 'styled-components/macro'

import { isMobileDevice } from 'config/userAgent'

import { client } from '../../config/clients'

type Props = {
  height?: number,
  width?: number,
}

export const Logo = styled.div<Props>`
  ${client.styles.logo};
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  ${isMobileDevice
    ? css`
      width: 207px;
      height: 48px;
      @media screen and (orientation: landscape){
        width: 92px;
        height: 22px;
      }
    `
    : ''}
`
