$nav-icon_bar-width: 22px;
$close-icon-offset: -5px;
$mobile-menu-close-btn-height: 40px;

.nav-mobile-menu {
  @media (max-width: $grid-float-breakpoint) {
    @include off-canvas-style;
    display: flex;
    flex-direction: column;
  }
}

.navbar-user_info {
  @media (max-width: $grid-float-breakpoint) {
    max-height: none !important; // important overrides navbar bootstrap stuff
    order: 2; // .nav-mobile-menu-close: 1, .navbar-user_info: 2, .navbar-text_center: 3
    
    &.navbar-user_info-logged_out {
      order: 4;
    }
  }
}

.nav-mobile-menu-close {
  display: none;
  height: $mobile-menu-close-btn-height;

  .navbar-toggle {
    margin-right: 0;
  }
}

.navbar-header {
  @media (max-width: $grid-float-breakpoint) {
    float: none;
  }
}

.navbar-toggle {
  @media (max-width: $grid-float-breakpoint) {
    display: block;
  }
  @media (max-width: $screen-md) {
    margin-right: -10px; // equalize padding between right-side icons
  }
  @media (max-width: $screen-xs) {
    margin-left: 5px;
  }

  &:hover {
    .icon-bar {
      background-color: $color-secondary;
    }
  }

  // begin Hamburger
  .icon-bar {
    background-color: $color-gray-600;
    transition: all 0.2s;
    width: $nav-icon_bar-width;
  }

  .icon-bar-back_slash {
    margin-bottom: $close-icon-offset;
    transform: rotate(-45deg);
  }

  .icon-bar-forward_slash {
    transform: rotate(45deg);
  }
}

// Log In & Sign Up Buttons
.navbar-nav > li {
  @media (max-width: $grid-float-breakpoint) {
    float: none;
  }

  &.nav-mobile-menu-btns {
    @media (max-width: $grid-float-breakpoint) {
      padding-right: 20px;
      padding-top: 10px;
    }

    &.nav-mobile-menu-signup {
      @media (min-width: $grid-float-breakpoint) {
        float: right!important; //put sign up out to right on desktop
      }
      @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md) {
        padding-right: 5px;
      }
      @media (min-width: $screen-md) {
        padding-right: 15px;
      }
    }

    //customize both buttons to account for overall nav spacing
    a.btn {
      @media (min-width: $grid-float-breakpoint) {
        margin-top: 3px;
        padding-left: 5px;
        padding-right: 5px;
        font-size: $font-size-100;
        line-height: 1;
      }

      @media (max-width: $grid-float-breakpoint) {
        display: block;
        padding-top: 10px;
      }
    }

    .btn.btn-login {
      @media(min-width: $grid-float-breakpoint) {
        color: $color-gray-600;
        background-color: transparent;
        border-color: white;

        &:hover,
        &:focus,
        &:active,
        &:active:focus {
          color: $color-secondary;
          box-shadow: none;
        }
      }
    }

    .btn.btn-signup {
      &:focus {
        background-color: color('primary-dark');
        border-color: color('primary-dark');
      }
    }
  }
}