.nav__menu {
  @extend .demi-small;
  @extend .caps;
  @extend .bold;
  @extend .letter-spacing-1;



  .menu-item {
    margin: 0 $base-line-height-fixed/3;
    padding: 0;

    a {
      overflow: hidden;
      & > span:first-of-type {
        padding: 10px 0 5px 0;
        margin-bottom: 5px;
        //padding: $base-line-height 0 $base-line-height/2 0;
        //margin-bottom: $base-line-height/2
      }

      padding: 0 $base-line-height-fixed/3;
      @include display-flex();
        -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;

    }
  }
}

.nav li:not(.mini_cart_item) > a {
  &:focus,
  &:hover {
    background: transparent !important;
  }
}
.regular-nav.nav__menu {
    margin: 0 -1*$base-line-height-fixed/1.5;
}


// Dropdowns
//menu items with children
.czr-dropdown {
    position: relative;
}

// Dropdown menu ul ( vertical menu like sidenav and mobile menu will override this)
.czr-dropdown-menu {
    display: none;
    max-width: 50vw;
    a { white-space: normal; }
    //the sidemenu and mobile menu should break lines
    @at-root .vertical-nav .dropdown-menu.czr-dropdown-menu a, #mobile-nav .dropdown-menu.czr-dropdown-menu a { white-space: normal; }
}

.dropdown-menu.czr-dropdown-menu {
    border-radius: 0;
    border:0;
    margin: 0;
    padding: 0;
    font-size: inherit;
    a {
        @extend .bold;
        position: relative;
        vertical-align: middle;
        white-space: nowrap;
        padding: 0 $base-line-height-fixed;
        margin: 0 -1/2*$base-line-height-fixed;
    }

    //include box-shadow for the regular nav
    .regular-nav & {
      @include box-shadow( 1px, 2px, 2px, rgba(0, 0, 0, 0.15), false, 2px );
    }


    .dropdown-item {
        margin: 0;

        @at-root .regular-nav .dropdown-menu .caret__dropdown-toggler i {
          @include transform( translateZ(0) rotate(-90deg));
          -ms-transform: rotate(-90deg);
          position: relative;
          display: inline-block;
          top: -.1em;
        }
        @at-root .regular-nav .dropdown-menu .dropdown-item {
          padding: 0 $base-line-height;
        }

        @at-root .mobile-nav__menu .czr-dropdown > .dropdown-menu > .dropdown-item:last-of-type {
          margin-bottom: $base-line-height/2;
        }

    }

    .czr-dropdown-menu {
        text-transform: none;
        font-size:ms(0);

        @at-root .regular-nav .dropdown-menu .dropdown-menu {
          top: 55%;
        }

    }

}


// dropdown-item (level > 1) hover effect
.dropdown-item {
  position: relative;
}
.dropdown-item {
    &::before {
      content: '';
      position: absolute;
      width: 0%;
      height: 100%;
      top: 0;
      left: 0;
      transition-delay: 0s;
      transition-duration: .6s;
      transition-timing-function: cubic-bezier(.19, 1, .22, 1);
      -webkit-transform-origin: 0 100%;
      transform-origin: 0 100%;
    }
    &.current-active,
    &:hover {
      &::before {
        width: 100%;
      }
    }
}

// Caret
.caret__dropdown-toggler {
  display: none;


    .regular-nav & {
      display: inline-block;
      width: 1.5em;
      vertical-align: middle;
      z-index: inherit;
      cursor: pointer;
      position: relative;
    }

}

.caret__dropdown-toggler i {
    display: inline-block;
    @include transition (all 0.3s ease);
    @include transform-style( preserve-3d );
    @include backface-visibility( hidden );
    @include perspective(1000px);
    text-align: center;
    vertical-align: baseline;
    line-height: 0;
    &::before {
      line-height: inherit;
    }
    .menu-item.show > a > & {
        @include transform( translateZ(0) rotate(-180deg));
        -ms-transform: rotate(-180deg);
    }
}

.regular-nav {
  //
  // Fade submenu only in desktops and only for horizontal menus
  // only the header.tc-header has the classes czr-submenu-fade and czr-submenu-move
  // sidenav is not impacted
  //

  //lets use a trick to make this not impact on the snake
  //basically we know that assigning a perspective to an element
  //plus position:relative creates a new system
  //where fixed elements behave like absolute elements relative to the parent
  //this way the actual visual position of the dropdown will not be impacted
  //though, as fixed element, even if overflowing the tc-page-wrap, will not
  //make the orizontal scrollbar appear!
 .czr-submenu-fade & {
    .menu-item-has-children {
      @include perspective(1000px);      
      > ul {
        position: fixed;
        opacity: 0;
        visibility: hidden;
        display: block;
        @include transition( all 0.25s ease-in-out );
        @include transform( translate( 0, -20px ) );        
      }

      &:not(.show) {
        //temporary fix for Firefox : https://github.com/presscustomizr/customizr/issues/1083
        //the perspective thing seems to not work with this browser
        //need further investigation
        overflow: hidden;
        
        //because of the fact the submenu is displayed
        //it might still grab the the hover while fading out
        //let's avoid this resetting its pointer-events
        //when the li parent hasn't the show class
        ul {
          pointer-events: none;
          cursor: $cursor-disabled;
        }
      }
    }

    li.show {
          @include perspective( none );
          > ul {
            position: absolute;
            visibility: visible;
            opacity: 1;
            @include transform( translate( 0, 0) );
          }
    }
  }
  // end fade effect

  // submenu link move
  .czr-submenu-move & {
    .dropdown-menu > li > a {
      -webkit-transition: all ease 0.25s;
      -moz-transition: all ease 0.25s;
      -o-transition: all ease 0.25s;
      transition: all ease 0.25s;
      @include transform( translate( 0, 0) );
    }
    .dropdown-item > a:hover {
      @include transform( translate( 3px, 0) );
    }
  }
  // end subemnu link move
}

//
// Dropdown menu direction [SNAKE]
// available only in header
//
.tc-header {
    .dropdown-menu {
        &.open-right {
            left: 0;
            right: auto;
            @at-root .tc-header .open-right .dropdown-menu:not(.open-left),
                     .tc-header .dropdown-menu .dropdown-menu.open-right {

                left: 100%;
                right: auto;
            }
        }

        &.open-left {
            left: auto;
            right: 0;
            @at-root .tc-header .open-left .dropdown-menu:not(.open-right),
                     .tc-header .dropdown-menu .dropdown-menu.open-left {

                right: 100%;
                left: auto;
            }
        }
    }
}

// end common drodpowns

// Utils nav
.utils_links {
  padding: $base-line-height 15px;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
      -ms-grid-row-align: center;
          align-self: center;

  display: block;
  height: auto;
  position: relative;
}

// Hamburger button
.ham-toggler-menu {
    -webkit-appearance: initial !important;
    @extend .utils_links;
}
.ham__toggler-span-wrapper {
    height: 12px;
    position: relative;
    width: 20px;
    display: block;
}

.ham__toggler-span-wrapper .line {
  display: block;
  width: 20px;
  height: 1.5px;
  position: absolute;
  -webkit-border-radius: 5px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 5px;
  -moz-background-clip: padding;
  border-radius: 5px;
  background-clip: padding-box;
  -webkit-transition: all ease 0.35s;
  -moz-transition: all ease 0.35s;
  -o-transition: all ease 0.35s;
  transition: all ease 0.35s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.ham__toggler-span-wrapper .line.line-1 {top: 0;}
.ham__toggler-span-wrapper .line.line-2 {top: 50%;}
.ham__toggler-span-wrapper .line.line-3 {top: 100%;}


.ham-toggler-menu:hover .line {
    -webkit-transform: translateX(-3px);
    -moz-transform: translateX(-3px);
    transform: translateX(-3px);
    width: 26px;
}

.ham-toggler-menu:not(.collapsed) .line-1 {
  -webkit-transform: translateY(6px) translateX(-3px) rotate(45deg);
  -moz-transform: translateY(6px) translateX(-3px) rotate(45deg);
  transform: translateY(6px) translateX(-3px) rotate(45deg);
  width: 28px;
}
.ham-toggler-menu:not(.collapsed) .line-2 {
  opacity: 0;
}
.ham-toggler-menu:not(.collapsed) .line-3 {
  -webkit-transform: translateY(-6px) translateX(-3px) rotate(-45deg);
  -moz-transform: translateY(-6px) translateX(-3px) rotate(-45deg);
  transform: translateY(-6px) translateX(-3px) rotate(-45deg);
  width: 28px;
}

// end ham