// Navigation styling for base

.navbar
  @include default-trans
  align-items: center
  display: flex
  height: $mobile-navbar-height
  justify-content: space-between
  position: fixed
  top: 0
  white-space: nowrap
  width: 100%
  z-index: 9998

  .social-media
    margin-left: 3vw
    z-index: inherit

  .social-media-link
    font-size: $sm-font-size
    padding-right: $sm-font-size

.nav-scrolled
  @include navbar-color

.nav-brand
  width: 30vw
  padding-left: 3vw
  z-index: 1
  margin-top: .7rem
  // fudge fix for G making logo apear off-centre

  .site__logo *
    @include default-trans


.nav-list
  border-bottom-left-radius: 80px
  font-size: 1.3rem
  height: $mobile-nav-list-height
  height: calc( var(--vh, 1vh) * #{ strip-unit($mobile-nav-list-height)} )
  list-style: none
  margin: 0
  margin-block-start: calc( var(--vh, 1vh) * #{ strip-unit($mobile-navbar-height)} )
  padding: 0
  padding-top: 0
  position: absolute
  right: 0
  top: 0
  transform: translateX(100%)
  transition: $nav-slider-transition
  width: 100vw
  box-sizing: content-box
  background-color: $env-primary
  overflow: scroll

.nav-group-content
  //text-indent: 2rem
  .nav-link
    margin: 3vh 20vw

.nav-link
  margin: 6vh 15vw
  opacity: 0
  text-decoration: none
  display: flex

.nav-group-link
  color: $nav-link-color

.nav-link
  font-size: 1.7rem
  z-index: 100
  color: $nav-link-color

.nav-active
  // we toggle this class in mobile-nav-slider.js on burger click
  transform: translateX(0%)
  box-shadow: -.2px .2px 0 rgba($pure-black, .3)


.site__logo-active
  .site__logo--group
    .site__logo--curve,
    .site__logo--legvert,
    .site__logo--leg45,
    .site__logo--g,
    .site__logo--a,
    .site__logo__i *,
    .site__logo--t,
    .site__logo--Q
      fill: $env-secondary