.nav,
.nav-home
  > .list
    list-style: none
    margin: 0
    padding: 0 13px 0

    @media #{$below}
      flex-wrap: nowrap
      display: none
      padding-bottom: 12px !important

      &.is-open
        display: flex
        flex-direction: column
        position: absolute
        top: 100%
        width: 100%
        z-index: 100
        background-color: #fff
        height: 100vh

      li
        min-width: auto

      a
        white-space: nowrap

    li
      display: inline-block
      position: relative

      &:hover, &.focus, &:focus, &:focus-within
        & > ul.sub-menu
          display: block
          left: 0

      ul.sub-menu
        list-style: none
        box-shadow: 0 0 10px -6px gray
        border-radius: 3px
        padding: 5px 10px
        background: white
        position: absolute
        display: block
        left: -10000px
        visibility: visible
        z-index: 99

        @media #{$below}
          margin: 10px 0
          position: relative
          width: auto
          display: none

        &.focus, &:focus-within, &:hover
          display: block


        li
          display: block

          ul
            right: 100%
            top: 5px

        li a
          white-space: nowrap
          display: block
          text-decoration: none
          padding: 5px
          color: var(--secondary-color)


    > li > a
      display: inline-block
      padding: 20px 10px
      text-decoration: none
      color: var(--secondary-color)


.nav
  position: absolute
  left: 0
  top: 45px
  display: flex
  width: 100%

  @media #{$below}
    justify-content: flex-end
    top: 0
    padding: 3px 0

  > .list
    margin: 0 auto
    padding: 0 13px 0

    > li > a
      padding: 4px 8px
      margin: 0 15px
      color: var(--secondary-color)
      line-height: 19px
      transition: .2s
      border: 1px solid transparent

      &:hover
        border-color: var(--primary-color)

    > li.current-menu-item > a
      border: 2px solid var(--primary-color)
      background-color: var(--primary-color)
      color: #fff

.nav-home
  text-align: center

  > .list
    padding: 0

    > li
      margin: 0 18px

      @media #{$below}
        margin: 0 18px 16px

    > li > a
      padding: 4px 8px
      margin: 0
      border-radius: 0
      transition: all .2s ease-in-out
      color: var(--secondary-color)
      line-height: 1
      border: 1px solid transparent

      &:hover
        border-color: var(--primary-color)

ul.sub-menu:focus-within
  left: 0