// Nav
// -----------------------------------------------
// -----------------------------------------------
#site-nav {
  flex: 0 0 auto;
  position: fixed;
  padding: ($base-point-grid * 5) 0;
  width: 100%;
  background: $white;
  transition:
    background-color $base-duration $base-timing,
    padding $base-duration $base-timing;
  height: ($base-point-grid * 18);
  z-index: 2;

  &.nav-scroll {
    padding: ($base-point-grid * 2) 0;
    background: #{$white}e; //Nice! 👌
  }

  .nav-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;

    .nav-brand {
      display: flex;
      align-items: center;
      font-family: $base-font-family;
      font-weight: $font-bold;
      font-size: 1.5rem;
      color: $gray-primary;

      &:visited,
      &:hover,
      &:active {
        color: $gray-primary;
        text-decoration: none;
      }
    }

    .nav-menu {
      position: relative;

      ul {
        display: flex;

        .nav-menu-item {
          &:not(:last-child) {
            margin-right: ($base-point-grid * 5);
          }

          a {
            padding-bottom: 4px;
            font-family: $base-font-family;
            color: $gray-primary;

            &:hover {
              text-decoration: none;
              border-bottom: 2px solid $brand-primary;
            }
          }
        }
      }
    }

    .nav-icon-open {
      padding: 16px;
      margin: -16px;
      display: none;
      transition: transform $base-duration $base-timing;

      &:hover {
        transform: scaleX(1.5);
      }
    }

    .nav-icon-close {
      display: none;
      padding: ($base-point-grid * 3);
      position: absolute;
      background: rgba($gray-primary, 0.96);
      right: 100%;
      top: ($base-point-grid * 5);

      img {
        display: block;
        transition: transform 0.3s ease;
      }

      &:hover img {
        transform: rotate(180deg);
      }
    }
  }
}

// Responsive
// -----------------------------------------------
@include bp(medium) {
  #site-nav {
    .nav-flex {
      .nav-menu {
        font-size: 1.4rem;
        position: fixed;
        padding: ($base-point-grid * 5) ($base-point-grid * 6);
        background: rgba($gray-primary, 0.96);
        height: 100%;
        right: -100%;
        top: 0;
        width: 70%;
        z-index: 2;
        transition: right $base-duration $base-timing;

        &.open {
          right: 0;
          box-shadow: 0 0 100px $gray-primary;
        }

        ul {
          flex-direction: column;

          .nav-menu-item {
            padding: ($base-point-grid * 2) 0;

            &:not(:last-child) {
              margin-right: 0;
            }

            a {
              color: $white;

              &:hover {
                border-bottom-color: $white;
              }
            }
          }
        }
      }

      .nav-icon-open,
      .nav-icon-close {
        display: block;
      }
    }
  }
}
