html

// &.search-open
//   body
//     nav
//       ul
//         li
&.mobile-menu-open
  body
    nav
      border-bottom: solid $white
      border-width: 100vh
      transition: border-width 1s ease
      ul
        .mobile
          &.menu-button
            .menu-button-container
              .menu-button-line
                &#line-1
                  top: 6px
                  transform: rotate(-45deg)
                &#line-2
                  width: 0
                &#line-3
                  bottom: 6px
                  transform: rotate(45deg)

body
  nav
    z-index: 1
    border-bottom: 0px solid $white
    border-width: 0
    transition: border-width 1s ease
    width: 100%
    height: 80px
    @media screen and ($tablet)
      height: 60px
    background-color: $white
    position: fixed
    top: 0
    left: 0
    -webkit-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16)
    -moz-box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16)
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16)
    display: flex
    align-items: center
    justify-content: center
    ul
      .mobile
        list-style-type: none
        height: 100%
        box-sizing: border-box
        display: none
        justify-content: center
        align-items: center
        &.menu-button
          position: relative
          z-index: 2
          width: 25px
          &:hover
            cursor: pointer
            .menu-button-container
              .menu-button-line
                background-color: $blue
          .menu-button-container
            position: relative
            width: 100%
            height: 14px
            .menu-button-line
              width: 25px
              height: 2px
              background-color: $black
              position: absolute
              left: 0
              &#line-1
                top: 0
                transition: top .3s ease, transform .3s ease, background-color .3s ease
              &#line-2
                top: 6px
                transition: width .3s ease, background-color .3s ease
              &#line-3
                bottom: 0
                transition: bottom .3s ease, transform .3s ease, background-color .3s ease
          a
            text-decoration: none
            font-weight: 600
            font-size: 13px
            color: $black
            transition: color .3s ease
            &:hover
              color: $blue
              transition: color .3s ease
            #search-icon
              .cls-2
                stroke: $black
                transition: stroke .3s ease
              &:hover
                .cls-2
                  stroke: $blue
                  transition: stroke .3s ease
      &.desktop-nav
        position: relative
        display: flex
        width: 100%
        height: 100%
        justify-content: space-between
        max-width: $max-width
        margin-left: $site-margin
        margin-right: $site-margin
        @media screen and ($mobile)
          margin-left: $site-margin/2
          margin-right: $site-margin/2
        li
          transition: opacity .3s ease, transform .3s ease
          list-style-type: none
          height: 100%
          box-sizing: border-box
          display: flex
          @media screen and ($tablet)
            display: none
          justify-content: center
          align-items: center
          &.mobile
            display: none
            @media screen and ($tablet)
              display: flex
          &.active
            border-top: 5px solid $white
            border-bottom: 5px solid $blue
            a
              color: $blue
          a
            text-decoration: none
            font-weight: 600
            font-size: 15px
            @media screen and ($nav-breakpoint)
              font-size: 13px
            color: $black
            transition: color .3s ease
            &:hover
              color: $blue
              transition: color .3s ease
            #search-icon
              .cls-2
                stroke: $black
                transition: stroke .3s ease
              &:hover
                .cls-2
                  stroke: $blue
                  transition: stroke .3s ease

  div
    &.mobile-nav-content
      position: fixed
      z-index: 1
      top: 50%
      transform: translateY(-50%)
      right: 0
      display: none
      background: none
      width: 100vw
      justify-content: center
      align-items: center
      ul
        text-align: center
        display: flex
        height: 100%
        justify-content: center
        align-items: center
        flex-direction: column
        li
          list-style-type: none
          margin: 10px
          padding: 10px 0
          transform: translateX(-10px)
          transition: opacity .3s ease, transform .3s ease
          opacity: 0
          &.active
            border-bottom: 1px solid $blue
            a
              color: $blue
          a
            text-decoration: none
            font-weight: 600
            font-size: 13px
            color: $black
            transition: color .3s ease
            &:hover
              color: $blue
              transition: color .3s ease
            #search-icon
              .cls-2
                stroke: $black
                transition: stroke .3s ease
              &:hover
                .cls-2
                  stroke: $blue
                  transition: stroke .3s ease