$navigation-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
$nav-height: 50px;

$lg-logo-vertical-align: 5px;
$sm-logo-vertical-align: 8px;
$logo-height-large: 28px;
$logo-height-small: 18px;
$logo-max-width: 175px;
$logo-max-width-small: 113px;

$nav-horizontal-spacing: 10px;
$nav-horizontal-spacing-small: 3px;

$hover-border-size: 4px;
$navigation-link-hover-transition: color 0.15s ease-in-out;

$letter-spacing-xlarge: 0.6px;
$letter-spacing-large: 0.5px;
$letter-spacing-medium: 0;
$font-size-150: 13px;

$deals-icon-horizontal-position: -3px;
$deals-icon-vertical-position: -5px;

// animation on hover
@mixin nav_hover_border($orientation) {
  &::before {
    position: absolute;
    bottom: 0;
    left: 0;

    @if $orientation == horizontal {
      height: $hover-border-size;
      width: 100%;
    } @else if $orientation == vertical {
      height: 100%;
      width: $hover-border-size;
    }

    background-color: $color-secondary;
    content: "";
    transform: scaleX(0);
    @include transition(transform 0.15s ease-in-out);
  }

  &:hover {
    &::before {
      transform: scaleX(1);
    }
  }
}

.navigation {
  box-shadow: $navigation-shadow;

  .container-fluid > .navbar-header {
    @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md) {
      margin-right: -10px;
      margin-left: -10px;
    }
  }
}

.navbar-logo_image,
.navbar-logo {
  height: $logo-height-large;
  max-width: $logo-max-width;
  margin-top: $lg-logo-vertical-align;

  @media (max-width: $screen-md_to_lg-plus) {
    height: $logo-height-small;
    max-width: $logo-max-width-small;
    margin-top: $sm-logo-vertical-align;
  }
  @media (max-width: $grid-float-breakpoint) {
    display: inline-block;
    height: $logo-height-large;
    max-width: $logo-max-width;
    margin-top: $lg-logo-vertical-align;
  }
  @media (max-width: $screen-sm) {
    margin-left: $nav-horizontal-spacing;
  }
}

// main product nav links
.navigation-menu-list {
  height: $nav-height; // TODO - this hsould probably be the $header-height variable, pending further confirmation

  .navbar-nav.navbar-text_center > li > a {
    letter-spacing: $letter-spacing-xlarge;
    padding-left: $nav-horizontal-spacing;
    padding-right: $nav-horizontal-spacing;
    max-height: $nav-height;

    @media (max-width: $screen-lg-plus) {
      padding-left: 4px;
      padding-right: 4px;
      letter-spacing: $letter-spacing-medium;
    }

    @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md_to_lg-plus) {
      font-size: $font-size-150;
    }
  }
}

.navbar-text_center {
  display: inline-block;
  float: none;

  @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md) {
    margin-right: -10px;
    margin-left: -10px;
  }

  @media (max-width: $grid-float-breakpoint) {
    width: 100%;
    padding-left: $nav-horizontal-spacing * 2;
    padding-bottom: $nav-horizontal-spacing;
    border-bottom: solid 1px $color-gray-300;
  }

  @media (max-width: $screen-sm) {
    padding-left: $nav-horizontal-spacing;
  }
}

.navigation-menu-list_item-active {
  a.navigation-items-link {
    color: $color-secondary;

    &::before {
      background-color: $color-secondary;
      transform: scaleX(1);
    }
  }
}

a.navigation-items-link {
  padding-top: $padding-default-vertical;
  padding-bottom: $padding-default-vertical;
  color: $color-gray-600;
  text-transform: uppercase;
  text-decoration: none;

  @media screen and (min-width: $screen-sm) {
    align-items: center;
    height: 100%;
    @include transition($navigation-link-hover-transition);
    @include nav_hover_border(horizontal)
  }

  @media screen and (min-width: $screen-lg) {
    font-size: $font-size-200;
  }

  @media (max-width: $grid-float-breakpoint) {
    align-items: center;
    height: 100%;
    @include transition($navigation-link-hover-transition);
    @include nav_hover_border(vertical)

    &:before {
      left: -21px;
    }
  }

  &:hover {
    color: $color-secondary;
  }
}

a.navigation-items-link-deals {
  position: relative;
  color: $color-warning;

  &::after {
    position: relative;
    top: $deals-icon-vertical-position;
    right: $deals-icon-horizontal-position;
    font-family: 'FontAwesome';
    font-size: $font-size-000;
    content: "\f005"; // Star
  }

  @media (max-width: $screen-lg-plus) {
    &::after {
      font-size: $font-size-100 - 1;
    }
  }

  @media (max-width: $screen-sm) {
    &::after {
      content: none;
    }
  }
}

.navbar-nav {
  &.navbar-right {
    max-height: $nav-height;

    &.navbar-right-icons-container {
      @media (max-width: $grid-float-breakpoint) {
        float: right !important;
        margin: auto;
      }
      @media (max-width: $screen-sm) {
        margin: 3.5px 0;
      }
    }
  }
}

.nav > li > a.navigation-user_info-logged_out-log_in_link {
  text-transform: uppercase;
  color: $color-gray-600;
  text-decoration: none;
  @include transition(color 0.15s ease-in-out);

  &:hover {
    color: $color-secondary;
    text-decoration: none;
  }

  @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md_to_lg-plus) {
    padding-left: 5px;
    padding-right: 8px; // visual alignment
    font-size: $font-size-100;
  }

  @media screen and (min-width: $screen-md) {
    margin-left: $nav-horizontal-spacing-small;
    letter-spacing: $letter-spacing-large;
  }

  @media screen and (min-width: $screen-lg) {
    font-size: $font-size-200;
    letter-spacing: 0;
    margin-left: 0;
  }
}

.nav-sign_in-sign_up {
  @media (max-width: $screen-xs) {
    float: left !important;
  }
}

.navigation-menu-list_item {
  @media (max-width: $grid-float-breakpoint) {
    text-align: left;
  }

  @media (max-width: $screen-sm) {
    min-width: 300px;
    margin-left: $nav-horizontal-spacing;
  }
}

.navbar-right-icons-container,
.nav > li.navbar-right-icons,
.navbar-mobile-menu {
  @media (max-width: $grid-float-breakpoint) {
    display: inline-block;
    float: right; //aligns mobile menu
  }
}

.navbar-nav > li.navigation-user_info-logged_out.navigation-log_in {
  padding-top: 0;
} 

.navigation-user_info-logged_out-container {
  @media (max-width: $grid-float-breakpoint) {
    display: block;
  }
}

li.navbar-user_info-logged_out {
  float: right;

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

.btn.btn-sm.navbar-sign_up_btn {
  margin-top: 7px; // vertical align custom sized button
  margin-right: $padding-default-vertical;
  font-size: $font-size-200;
}


// All-purpose bootstrap override for background-color of links that are not styled as buttons
.nav > li > a:not(.btn) {
  &:hover,
  &:focus {
    background-color: inherit !important;
  }
}