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

$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;
    height: $hover-border-size;
    width: 100%;
    background-color: $color-secondary;
    content: "";
    transform: scaleX(0);
    @include transition(transform 0.15s ease-in-out);
  }

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

.navigation {
  position: relative;
  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 (max-width: $grid-float-breakpoint) {
      padding-top: $padding-small-vertical;
      padding-bottom: $padding-small-vertical;
      padding-left: 0;
    }

    @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) {
    direction: ltr; // corrects orientation against nav-mobile-menu scrollbar behavior ** mainly fixing safari here
    width: 100%;
    padding-bottom: $nav-horizontal-spacing;
    order: 3; // .nav-mobile-menu-close: 1, .navbar-user_info: 2, .navbar-text_center: 3
    border-bottom: solid 1px $color-gray-300;
  }
}

.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: $grid-float-breakpoint) {
    align-items: center;
    height: 100%;
    @include transition($navigation-link-hover-transition);
    @include nav_hover_border(horizontal);
  }

  @media (max-width: $grid-float-breakpoint) {
    align-items: center;
    height: 100%;
  }

  &: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 {

  @media (max-width: $grid-float-breakpoint) {
    margin: 0; // overriding bootstrap so non-signed in btn-blocks display as expected TODO: further refactor markup to avoid this
  }

  &.navbar-right {
    max-height: $nav-height;
    direction: ltr; // corrects orientation against nav-mobile-menu scrollbar behavior ** mainly fixing safari here

    @media (max-width: $grid-float-breakpoint) {
      float: none !important; // overriding bootstrap so non-signed in btn-blocks display as expected TODO: further refactor markup to avoid this
    }
    &.navbar-right-icons-container {
      @media (max-width: $grid-float-breakpoint) {
        float: right !important;
        margin: auto;
      }
      @media (max-width: $screen-sm) {
        margin: 3.5px 0;
        max-height: $nav-height-screen-sm;
      }
    }
  }
}

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

  @media (max-width: $screen-sm) {
    min-width: 300px;
  }
}

.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
  }
}

// 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;
  }
}