import styled from 'styled-components/macro'

import { devices } from 'config/devices'

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

export const Logo = styled.div<TLogo>`
  display: block;
  width: ${({ width = 174 }) => width}px;
  height: ${({ height = 40 }) => height}px;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(/images/logo.svg);

  @media${devices.tablet} {
    width: ${({ width }) => width}px;
    height: ${({ height }) => height}px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
`