.vertical-nav {

  // Always expand dropdowns
  .czr-dropdown-menu {
      display: block;
  }
  .czr-open-on-click & {
    .czr-dropdown-menu {
      display: none;
    }
    .menu-item-has-children {
      @include display-flex();
      @include flex-wrap()
    }
    .nav__link-wrapper {
      width: 100%;
      .nav__link {
        @include flex-grow();
      }
      .caret__dropdown-toggler {
        padding: 10px;
        width: auto;
      }
    }
  }

  .dropdown-menu.czr-dropdown-menu {
      position: static;
      float: none;
      width: 100%;
      max-width: 100%;
      .nav__link {
        @if ( true == $is_rtl ) {
          margin: 0 -1/2*$base-line-height-fixed 0 0;
        }
        @else {
          margin: 0 0 0 -1/2*$base-line-height-fixed;
        }
      }
  }

  .dropdown-item.current-active::before,
  .dropdown-item:hover::before {
      width: 0;
  }

  .czr-dropdown .menu-item-has-children {
    padding-bottom: 0;
  }

  .czr-dropdown-menu .dropdown-item {
    @if ( true == $is_rtl ) {
      padding: 0 $base-line-height-fixed 0 0;
    }
    @else {
      padding: 0 0 0 $base-line-height-fixed;
    }

    // Maximum 4 indentations
    .dropdown-item .dropdown-item .dropdown-item .dropdown-item {
      padding: 0;
    }
  }

  //mobile menu alignment
  //this is because menu-items (li) have a margin right-left of $base-line-height-fixed/3
  //and inner links (li a) have a padding right-left of $base-line-height-fixed/3
  //we, then, nullify that space by using an equivalent negative margin for the ul container
  &.mobile-nav__menu {
    margin: 0 -2*$base-line-height-fixed/3;
  }
}