// COMPONENT: Nav: The primary navigation of the site. Should only have on
// instance of a nav element per page. Namespaced via tag name rather than
// class name.
nav#nav-main
  border-bottom: 1px solid $border-light

  .nav-wrapper
    @extend %container-wide

    align-items: stretch
    display: flex
    height: $nav-height

    +large-screen
      justify-content: space-between

  // Logo
  .nav-brand
    font-weight: bold
    height: $nav-height
    line-height: $nav-height - 1px
    letter-spacing: -0.01em
    padding: 0 $gutter
    text-decoration: none
    text-transform: uppercase

    +with-focus-visible
      box-shadow: $focus-shadow-inset


    .nav-brand-fade
      $delay: 2s

      animation: nav-brand-fade 500ms $swift-out $delay forwards

      // COYOTE
      // ^
      &:nth-of-type(1)
        animation-delay: 1.2 * $delay

      // COYOTE
      //   ^
      &:nth-of-type(3)
        animation-delay: 1.1 * $delay

      // COYOTE
      //     ^
      &:nth-of-type(5)
        animation-delay: 1.3 * $delay

    &:hover, &:focus
      .nav-brand-fade
        animation: none

  // Primary nav
  .nav-toggle
    position: relative
    z-index: $z-index-modal + 1

    +larger-than-small-screen
      display: none

  .nav-primary
    align-items: stretch
    display: flex

    +medium-screen
      flex: 1


    +small-screen
      display: none

      @at-root .nav-toggled &
        animation: nav-primary-in 150ms $swift-in both
        background: rgba($background, 0.97)
        bottom: 0
        display: block
        left: 0
        overflow: auto
        position: fixed
        right: 0
        top: $nav-height
        z-index: $z-index-modal


    li
      position: relative

      a
        +larger-than-small-screen
          padding: 0 $input-padding


        +xl-screen
          font-size: $font-size
          padding: 0 $gutter


        +small-screen
          font-size: $font-size
          padding: 0 $gutter


        display: block
        font-size: $font-size-control
        font-weight: 500
        height: 100%
        line-height: $nav-height - 1px
        text-decoration: none
        white-space: nowrap

        +with-focus-visible
          box-shadow: $focus-shadow-inset

      &.active,
      &:active
        +small-screen
          a
            background-color: $tint
            color: $background


        +larger-than-small-screen
          a
            color: $tint

  // Secondary nav
  .nav-secondary
    align-items: center
    display: flex
    padding-right: $gutter

    > *
      margin-right: $gutter

      &:last-child
        margin-right: 0

    +small-screen
      margin-left: auto
      padding-right: $input-padding

.nav-toggled
  overflow: hidden

@keyframes nav-brand-fade
  0%
    opacity: 1

  100%
    opacity: 0

@keyframes nav-primary-in
  0%
    opacity: 0
    transform: translateY($gutter)

  100%
    opacity: 1
    transform: translateY(0)
