@import '../css/vars'

$logoMargin = 10px
$logoSmallWidth = 168px
$logoMediumWidth = 309px

$logoSmallContainerWidth = 'calc(%s - (2 * %s))' % ($logoSmallWidth $logoMargin)
$logoMediumContainerWidth = 'calc(%s - (2 * %s))' % ($logoMediumWidth $logoMargin)

:local(.navigationbrand)
  position: relative
  overflow: hidden
  height: 60px
  margin: $logoMargin

  @media screen and (min-width: 0)
    width: $logoSmallContainerWidth

  @media screen and (max-width: $small - 1)
    max-width: $logoSmallContainerWidth

  @media screen and (min-width: $medium)
    width: $logoMediumContainerWidth

  @media screen and (max-width: $medium - 1)
    max-width: $logoMediumContainerWidth

  img
    position: absolute
    max-width: 100%
    max-height: 100%
    top: 50%
    transform: translateY(-50%)