nav

align-items: center
display: flex
height: 10vh
justify-content: space-between
position: fixed
top: 0
transition: background-color .6s ease-in
white-space: nowrap
width: 100%
z-index: 9999

.nav-noscroll

color: $white

.burger-line-1,
.burger-line-2,
.burger-line-3
  background-color: $white

.nav-noscroll-dark

color: $soft-black

.burger-line-1,
.burger-line-2,
.burger-line-3
  background-color: $soft-black

.nav-scrolled

background-color: $nav-bg
color: $white

.burger-line-1,
.burger-line-2,
.burger-line-3
  background-color: $white

.nav-brand

align-items: center
display: flex
font-size: 1.25rem
letter-spacing: 4px
padding-left: $container-margin-x

.site-logo

height: 1.25rem
transition: transform .8s ease
width: 6px

.nav-brand-text

fill: $pure-white
padding: 0

.nav-brand-circle

fill: $vivid-pink

.nav-menu

background-color: $nav-bg
border-bottom-left-radius: 80px
font-size: 1.3rem
height: 90vh
list-style: none
margin: 0
padding: 10vh 0 0 5vw
position: absolute
right: 0
top: 0
// transition for the whole slider
transform: translateX(100%)
transition: transform .4s ease-in
width: 95vw
z-index: -1

.nav-socials

display: none

.nav-active

// we toggle this class in mobile-nav-slider.js on burger click
// ensure links are always white since our active bg color is dark
color: $white
transform: translateX(0%)

.nav-link

margin: 6vh 15vw
opacity: 0

.mob-socials

margin-right: 0

.burger

cursor: pointer
display: block
padding-right: $container-margin-x

.burger-line-1, .burger-line-2, .burger-line-3

height: 1px
margin: 7px
width: 25px

.burger-line-1

transition: width .6s ease-in-out

.burger-line-2

transition: width .3s ease-in-out
// delay on closing
transition-delay: .3s

.burger-active

.burger-line-1,
.burger-line-2,
.burger-line-3
  background-color: $white

.burger-line-1
  width: 8px
  // reduce by 17 px

.burger-line-2
  // no delay on opening
  transition-delay: 0s
  width: 17px
  // reduce by 8 px

// animation for the links as the slider opens @keyframes navLinksFade

// the timings for this are set in mobile-nav-slider.js
from
  opacity: 0
  transform: translateY(20px)

to
  opacity: 1
  transform: translateY(0)