// Works in parallel with Base Styles Menu to create 
// the off canvas effect for the mobile nav view.
// @ref: src/core/base-styles/scss/_menu.scss

// Navigation
.c-navigation {
  background-color: $es-blue;
}

.c-navigation__container {
  @include clearfix;
  @include container;
}

.c-navigation__head {
  background-color: $es-blue;
  transition: transform $menu-transition-time;
  position: relative;
  z-index: z('base');

  @include breakpoint($from-medium) {
    transition: none;
  }

  .mobile-nav-open & {
    transform: translateX($menu-width);

    @include breakpoint($from-medium) {
      transform: none;
    }
  }

  // For devices which support the more efficient transforms
  .csstransforms3d.mobile-nav-open & {
    transform: translate3d($menu-width, 0, 0);

    @include breakpoint($from-medium) {
      transform: none;
    }
  }
}

.c-navigation__nav {
  @include position(absolute, top 0 right 0 bottom 0 left 0);
  @include size(null, $menu-width);
  overflow: auto;
  z-index: z('below');
  transition: transform $menu-transition-time;
  transform: translateX(#{-$menu-width});
  background-color: $es-blue;

  .mobile-nav-open & {
    -webkit-overflow-scrolling: touch; // Needed for iOS
    overflow-y: scroll; // Needed for iOS
    z-index: z('base');
    transform: translateX(0);

    @include breakpoint($from-medium) {
      position: relative;
      overflow: visible;
    }
  }

  @include breakpoint($from-medium) {
    @include size(null, auto);
    z-index: auto;
    position: relative;
    overflow: visible;
    transform: none;
  }
}

.c-navigation__mobile-nav {
  @include size(22px, 27px);
  float: left;
  cursor: pointer;
  margin-top: 18px;
  margin-left: 10px;
  display: block;
  position: relative;

  @include breakpoint($medium) {
    margin-top: 23px;
  }

  &::before,
  &::after,
  .c-navigation__mobile-nav__inner {
    @include size(3px, 28px);
    @include border-radius(3px, all);
    display: block;
    background: $es-white;
    position: absolute;
    transition: all 0.8s ease;
  }

  &::before,
  &::after {
    content: '';
  }

  &::before {
    top: 0;

    .mobile-nav-open & {
      transform: rotate(-45deg) translate(-8px, 7px);
    }

    .csstransforms3d.mobile-nav-open & {
      transform: rotate3d(-8px, -7px, 0, -45);
    }
  }

  &::after {
    bottom: 0;

    .mobile-nav-open & {
      transform: rotate(45deg) translate(-6px, -5px);
    }

    .csstransforms3d.mobile-nav-open & {
      transform: rotate3d(-6px, -5px, 0, 45);
    }
  }

  .c-navigation__mobile-nav__inner {
    top: 10px;
    opacity: 1;
    transform: none;

    .mobile-nav-open & {
      transform: rotate(180deg);
      opacity: 0;
    }

    .csstransforms3d.mobile-nav-open & {
      transform: rotate3d(0, 0, 0, 180);
    }
  }

  @include breakpoint($from-medium) {
    display: none;
  }
}

.c-navigation__logo {
  @include size(59px, 150px);
  margin: 0 auto;
  padding: 19px 0;

  @include breakpoint($medium) {
    @include size(70px, null);
    padding: 24px 0;
  }

  @include breakpoint($from-medium) {
    @include size(55px, 205px);
    float: left;
    margin: 30px 10px 0;
    padding: 0;
  }
}

.c-navigation__logo-image {
  display: block;

  @include breakpoint($from-medium) {
    display: none;
  }
}

.c-navigation__logo-image--desktop {
  display: none;

  @include breakpoint($from-medium) {
    display: block;
  }
}

.c-navigation__logo-image--slim {
  display: block;
}

.c-navigation__block--secondary {
  @include breakpoint($from-medium) {
    & .c-navigation__item.c-navigation__block--active {
      background-color: $es-white;
    
      a {
        color: $es-blue;
      }
    }
  }
}

.c-navigation__block--primary {
  @include breakpoint($from-medium) {
    & .c-navigation__item.c-navigation__block--active {
  
      .c-navigation__label {
        background-color: $nav-primary-background-label-hover;

        &::after {
          content: '';
          background: $es-yellow;
        }
      }
    }
  }
}