// Navigation styling for breakpoint 768

// Avoid declaring any styling like color etc.
// These will be decalred in _sass/naviagtion/env/

// Everything here will be included in EVERY .html

$brand-height: 55%

@media screen and ( min-width: 1024px )

  .navbar
    @include default-trans
    height: $navbar-height
    align-items: center

  .nav-scrolled
    @include default-trans
    top: -$navbar-height
    .nav-group-content
      @include default-trans
      height: 10vh
    .nav-brand
      @include default-trans
      height: 8vh
      top: 6vh

  .nav-brand
    @include default-trans
    display: flex
    position: absolute
    max-width: 160px
    height: 10vh
    z-index: 999
    top: 7.5vh

    .site__logo
      position: absolute
      top: (100% - $brand-height) / 2
      height: $brand-height

  .nav-list
    display: flex
    justify-content: flex-end
    align-items: center
    height: inherit
    top: 0
    transform: none
    border-top: none
    height: 5vh
    padding: 0
    background-color: inherit

  .nav-group
    padding: 0 2rem

  .nav-link
    align-items: center
    padding: 0
    height: auto
    opacity: 1
    margin: 0
    overflow: hidden
    position: relative

  // Surround current link with lines

  .current--url
    &:before, &:after
      content: ""
      display: inline-block
      height: 2px
      position: relative
      vertical-align: middle
      width: 6%

    &:before
      right: 0.5em
      margin-left: -10%

    &:after
      left: 0.5em
      margin-right: -10%

  .nav-group-content
    @include default-trans
    align-items: center
    justify-content: flex-end
    position: absolute
    top: 5vh
    left: 0
    width: 100vw
    padding: 0
    height: $secondary-navbar-height
    //max-height: 100px
    backdrop-filter: blur(20px)

  .nav-group-content .nav-link
    margin: 0

  .burger
    display: none

  .nav-subsub-content
    background-color: $pure-white
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .1)
    visibility: hidden
    opacity: 0
    border-radius: 6px
    z-index: 1
    position: absolute
    padding: 1rem 0
    margin-left: 3rem
    transform: translateY(10px)
    .subsub-link
      &:hover
        background: $white

    &:before
      background: inherit
      content: ""
      display: block
      height: 16px
      width: 16px
      left: 5px
      position: absolute
      bottom: 100%
      border-radius: 2px
      transform: rotate(-45deg) translateY(14px)
      z-index: -1

  .nav-group-container:hover > .nav-subsub-content
    visibility: visible
    opacity: 1
    transform: translateY(0px)
    transition: opacity .1s ease-in, transform .2s ease-in

  .nav-subsub-content .sub-link
    transition: background-color .1s ease-in

  .nav-subsub-content .sub-link:hover
    background-color: $white
    transition: background-color .1s ease-in