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>`
  display: block;
  width: ${client.styles.logoWidth}rem;
  height: ${client.styles.logoHeight}rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(/images/${client.styles.logo});
  ${isMobileDevice
    ? css`
      width: 144px;
      height: 33px;
      @media screen and (orientation: landscape){
        width: 92px;
        height: 22px;
      }
    `
    : ''}
`