//
// Off-Canvas Menu + Lateral Header + Full Screen Menu + Scroller
// ------------------------------------------------------------

// Vertical navigation
// (for use inside Off-Canvas, Lateral, Full Screen Menu)
// --------------------------------------------------------------------------
.vertical-navigation {
  padding: 15px ($grid-vertical-step - 5) 15px 0;
  > ul {
    margin-bottom: 0;
    li {
      display: block;
      margin: 0;
      padding: 0;
    }
    li a > .arrow { display: none; }
    li::before { display: none; }
    > li a {
      display: block;
      position: relative;
      padding: 7px 0;
      color: $menu-link-color;
      font: {
        size: ceil(($font-size-base * 1.14));
        weight: 600;
      }
      text-decoration: none;
      > i {
        margin: {
          top: -2px;
          right: 3px;
        }
        vertical-align: middle;
      }
    }
    > li > a { padding-left: $grid-vertical-step; }
    > li a::before {
      display: block;
      position: absolute;
      top: 50%;
      left: 0;
      width: 2px;
      height: 20px;
      margin-top: -10px;
      background-color: transparent;
      content: '';
      @include transition(background-color .3s);
    }
    > li > a::before { width: 4px; }
    li:hover > a { color: $menu-link-active-color; }
    > li.current > a,
    li.current-menu-item > a,
    li.current_page_item > a,
    li.current-menu-ancestor > a {
      color: $menu-link-active-color;
      &::before { background-color: $menu-link-active-color; }
    }
    .menu-item-has-children > a,
    .has-mega-menu > a {
      padding-right: 35px;
      > .arrow {
        @extend .btn;
        @extend .btn-ghost;
        display: block !important;
        position: absolute !important;
        top: 50%;
        right: 0;
        height: $vertical-nav-arrow-box-heigh !important;
        margin: -(floor($vertical-nav-arrow-box-heigh / 2)) 0 0 !important;
        padding: 0 6px !important;
        border: 1px solid lighten($gray-light, 4%) !important;
        font-size: floor(($font-size-base * 1.29)) !important;
      }
      > .arrow > i {
        @include transform(rotate(0deg));
        transition: transform .3s;
        line-height: ($vertical-nav-arrow-box-heigh - 2) !important;
      }
      > .arrow > i::before {
        line-height: ($vertical-nav-arrow-box-heigh - 2) !important;
      }
    }
    .sub-menu {
      max-height: 0;
      margin: 0;
      padding-left: $grid-vertical-step;
      overflow: hidden;
      @include transition(max-height .5s);
    }
    .menu-item-has-children.expanded,
    .has-mega-menu.expanded {
      > a > .arrow > i { @include transform(rotate(180deg)); }
      > .sub-menu { max-height: 600px; }
    }
    > li > .sub-menu {
      > li > a { padding-left: 15px; }
      > li > .sub-menu { padding-left: 15px; }
      > li > .sub-menu > li > a { padding-left: 15px; }
    }
  }

  .widget_startapp_button,
  .widget_black_studio_tinymce,
  .widget_text {
    display: none;
  }

  .mega-menu {
    max-height: 0;
    overflow: hidden;
    @include transition(max-height .5s);
    .widget {
      margin-bottom: 0;
      padding-bottom: 0;
      ul {padding-left: $grid-vertical-step;}
      li {
        padding-top: 0;
        padding-bottom: 0;
      }
      a {
        padding-left: 15px;
        color: $menu-link-color;
        font-weight: 600;
        &:hover {
          color: $menu-link-active-color;
        }
      }
      .page_item_has_children {
        ul {
          padding-left: 0;
        }
      }
    }
    .widget-title {
      margin-bottom: 0;
      padding-left: $grid-vertical-step;
      color: $gray;
      font-size: $font-size-lg;
      font-weight: 400;
    }
  }
  .expanded .mega-menu {
    max-height: 1500px;
  }
}

// Off-Canvas Menu + Lateral Navbar
// ------------------------------------------------------------
.off-canvas-menu,
.navbar-lateral {
  display: block;
  position: fixed;
  top: 0;
  right: -($sidebar-max-width);
  width: $sidebar-max-width;
  height: 100%;
  padding: floor($grid-vertical-step * 2) 0; //~48px 0
  background-color: $light-color;
  overflow: auto;
  z-index: $backdrop-zindex + 20;
  @include transition(right .4s);
  &.open { right: 0; }
  .close-btn {
    display: block;
    position: absolute;
    top: 15px;
    right: 15px;
  }
  .social-bar {
    padding: $grid-vertical-step; //~24px
    padding-bottom: ($grid-vertical-step - 6); //~24px 0
    border-top: $header-border;
    > a { margin: 0 3px; }
  }
  .header-buttons {
    display: block;
    width: 100%;
    margin: 0;
    padding: $grid-vertical-step; //~24px
    border-top: $header-border;
    text-align: center;
    > .widget_startapp_button {
      display: block;
      width: 100%;
      margin: 0 0 10px !important;
      &:last-child { margin-bottom: 0 !important; }
      .btn {
        display: block;
        width: 100%;
        margin: 0 !important;
      }
    }
  }
}

// Lateral Navbar
.navbar-lateral {
  right: auto;
  left: 0;
  width: $navbar-lateral-width;
  padding-top: 0;
  border-right: $header-border;
  background-color: $light-color;
  z-index: $backdrop-zindex - 20;
  @include transition(none);
  .site-logo,
  .custom-logo-link,
  .mobile-logo {
    margin: 0 $grid-vertical-step; //~0 24px
    padding: floor($grid-vertical-step * 1.3) 0; //~31px 0
  }
  .vertical-navigation {
    padding: {
      top: 0;
      bottom: floor($grid-vertical-step / 1.2);//~20px
    }
  }
  .toolbar {
    display: table;
    width: 100%;
    margin-bottom: floor($grid-vertical-step / 1.2); //~20px
    border-top: $header-border;
    text-align: center;
    table-layout: fixed;
    > .tool {
      display: table-cell;
      margin: 0;
      padding: {
        top: floor($grid-vertical-step / 1.5);
        bottom: floor($grid-vertical-step / 1.5);
      }
      border: {
        bottom: $header-border;
        left: $header-border;
      }
      vertical-align: middle;
    }
    > .cart-toggle {
      padding: 0;
      > a {
        display: block;
        padding: {
          top: floor($grid-vertical-step / 1.5);
          bottom: floor($grid-vertical-step / 1.5);
        }
      }
      > a .count {
        top: 26%;
        right: auto;
        left: 51%;
      }
    }
    > a.topbar-btn,
    > a.menu-btn { display: none; }
  }
  + .page-wrap {
    padding-left: $navbar-lateral-width;
    .title-fullwidth .container,
    .container-fluid {
      padding: {
        right: floor($grid-vertical-step * 2); //~48px
        left: floor($grid-vertical-step * 2); //~48px
      }
    }
  }
  .cart-dropdown { display: none !important; }
}
.admin-bar .off-canvas-menu,
.admin-bar .navbar-lateral { top: 32px; }
@media screen and (max-width: 783px) {
  .admin-bar .off-canvas-menu,
  .admin-bar .navbar-lateral { top: 46px; }
}

@media screen and (max-width: 1500px) {
  .navbar-lateral + .page-wrap {
    .container { width: 100%; }
    .title-fullwidth .container,
    .container,
    .container-fluid {
      padding: {
        right: $grid-vertical-step;
        left: $grid-vertical-step;
      }
    }
  }
}
@media screen and (max-width: $desktop) {
  .navbar-lateral + .page-wrap {
    .title-fullwidth .container,
    .container,
    .container-fluid {
      padding: {
        right: 15px;
        left: 15px;
      }
    }
  }
}

// Lateral Navbar Collapse
@media screen and (max-width: $nav-collapse) {
  .navbar-lateral {
    position: relative;
    top: 0 !important;
    width: 100%;
    height: auto;
    min-height: 70px;
    padding: 0 15px;
    border: {
      right: 0;
      bottom: $header-border;
    }
    .site-logo,
    .custom-logo-link,
    .mobile-logo {
      margin: 0;
      padding: floor($grid-vertical-step / 1.2) 0;
    }
    .toolbar {
      display: block;
      position: absolute;
      top: 50%;
      right: 15px;
      left: auto;
      margin-bottom: 0;
      border: 0;
      text-align: right;
      @include transform(translateY(-50%));
      > .tool, .cart-toggle {
        display: inline-block;
        margin-left: floor($grid-vertical-step / 1.6);
        padding: 0;
        border: 0;
      }
      > .cart-toggle > a {
        padding: 0;
        .count {
          top: -1px;
          right: -7px;
        }
      }
      > a.menu-btn { display: inline-block; }
    }
    .social-bar,
    .vertical-navigation,
    .header-buttons { display: none; }
    + .page-wrap {
      padding-left: 0;
      .title-fullwidth .container,
      .container-fluid {
        padding: {
          right: 15px;
          left: 15px;
        }
      }
    }
  }
}

// Floating Menu Btn
//---------------------------------------------------
.navbar-floating-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 35px 0;
  > .container-fluid {
    position: relative;
    min-height: 33px;
  }
}
.menu-open {
  .site-logo,
  .custom-logo-link,
  .mobile-logo {
    position: relative;
    z-index: -1;
  }
}
.floating-menu-btn-wrap {
  position: absolute;
  top: 50%;
  right: floor($grid-vertical-step * 3); //~72px
  height: $floating-menu-btn-size;
  margin-top: -(floor($floating-menu-btn-size / 2));
  text-align: right;
}
.navbar-sticky .floating-menu-btn-wrap {
  position: fixed;
  top: 30px;
  margin-top: 0;
}
.floating-menu-btn {
  display: inline-block;
  position: relative;
  width: $floating-menu-btn-size;
  height: $floating-menu-btn-size;
  border-radius: 50%;
  background-color: $brand-primary;
  color: $light-color;
  font-size: $floating-menu-btn-icon-size;
  box-shadow: $floating-menu-btn-shadow;
  cursor: pointer;
  @include transform(translateZ(0));
  > i {
    display: block;
    position: absolute;
    left: 50%;
    width: $floating-menu-btn-icon-size;
    margin-left: -(floor($floating-menu-btn-icon-size / 2));
    line-height: $floating-menu-btn-size;
    @include transition(all .3s);
    &.menu {
      opacity: 1;
      @include transform(scale(1) rotate(0deg));
    }
    &.close {
      opacity: 0;
      @include transform(translateY(10px));
    }
  }
  &.active {
    > i.menu {
      opacity: 0;
      @include transform(scale(.2) rotate(90deg));
    }
    > i.close {
      opacity: 1;
      @include transform(translateY(0));
    }
  }
}
@media screen and (max-width: $desktop) {
  .floating-menu-btn-wrap { right: 15px; }
}

// Full Screen Menu
// ------------------------------------------------------------
.floating-menu-btn-wrap .inner {
  display: inline-block;
  position: relative;
  width: $floating-menu-btn-size;
  height: $floating-menu-btn-size;
  border-radius: 50%;
  &::before {
    display: block;
    position: absolute;
    top: 1px;
    left: 1px;
    width: ($floating-menu-btn-size - 2);
    height: ($floating-menu-btn-size - 2);
    border-radius: 50%;
    background-color: $light-color;
    content: '';
    z-index: -1;
    @include transform-origin(center 30%);
    @include transform(scale(1));
    @include transition(all .4s ease-out);
  }
  &.expanded {
    &::before { @include transform(scale(90)); }
  }
}
.fs-menu-wrap {
  position: fixed;
  top: 15px;
  width: calc(100% - 140px);
  height: 100%;
  padding: {
    bottom: $grid-vertical-step; //~24px
    left: floor($grid-vertical-step * 3); //~72px
  }
  @include transition(top .4s .2s, opacity .4s .2s, visibility .4s .2s);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;
  .tools {
    display: table;
    width: 100%;
    border-bottom: $header-border;
    table-layout: fixed;
    .social-bar,
    .text-right {
      display: table-cell;
      vertical-align: middle;
    }
    .social-bar > a { margin-bottom: 0; }
    .toolbar > a.menu-btn { display: none !important; }
    .header-buttons { display: inline-block !important; }
  }
  .fs-navigation {
    text-align: center;
    ul > li {
      margin: 0;
      padding-left: 0;
      list-style: none;
      &::before { display: none; }
      > a {
        display: block;
        padding: floor($grid-vertical-step * 1.4) 0; //~34px 0
        border-bottom: $header-border;
        color: $menu-link-color;
        font: {
          size: $menu-link-font-size;
          weight: $menu-link-font-weight;
        }
        text-decoration: none;
      }
      > a > i {
        margin: {
          top: -3px;
          right: 3px;
        }
        vertical-align: middle;
      }
      &:hover > a,
      &.current > a,
      &.current-menu-item > a,
      &.current_page_item > a,
      &.current-menu-ancestor > a {
        color: $menu-link-active-color;
      }
    }
  }
  .cart-dropdown { display: none !important; }
  &.is-visible {
    top: 0;
    opacity: 1;
    visibility: visible;
  }
  @media screen and (max-width: $desktop) {
    width: calc(100% - 83px);
    padding-left: 15px;
  }
  @media screen and (max-width: $tablet-port) {
    top: 60px;
    width: 100%;
    height: calc(100% - 60px);
    padding-right: 15px;
    .tools {
      height: auto !important;
      padding: {
        top: floor($grid-vertical-step * 1.5); //~36px
        bottom: floor($grid-vertical-step * 1.2); //~28px
      }
      .social-bar,
      .text-right {
        display: block;
        width: 100%;
        text-align: center !important;
      }
      .social-bar { margin-bottom: 24px; }
      .social-bar > a {
        margin: {
          right: 3px;
          left: 3px;
        }
      }
    }
  }
}
.fs-menu-wrap::-webkit-scrollbar {
  display: none;
}
.admin-bar {
  .navbar-sticky .floating-menu-btn-wrap { top: 62px; }
  .navbar-sticky .fs-menu-wrap,
  .navbar-floating-menu { top: 32px; }
  @media screen and (max-width: 782px) {
    .navbar-sticky .floating-menu-btn-wrap { top: 76px; }
    .navbar-sticky .fs-menu-wrap,
    .navbar-floating-menu { top: 46px; }
  }
}

// Scroller
// ------------------------------------------------------------
.scroller {
  position: fixed;
  top: 50%;
  left: floor($grid-vertical-step * 1.25); //~30px
  width: $scroller-width;
  padding: 14px 0;
  border-radius: ceil($scroller-width / 2);
  background-color: $scroller-bg;
  box-shadow: $scroller-shadow;
  z-index: $header-zindex;
  @include transform(translateY(-50%));

  @media screen and (max-width: $nav-collapse) {
    display: none;
  }
}
.scroller-menu > ul {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  > li {
    display: block;
    margin: 0;
    padding: 0;
    &::before { display: none; }
    > a {
      display: block;
      position: relative;
      height: $scroller-dot-size + 14;
      line-height: 1;
      text-decoration: none;
      text-indent: -9999px;
      &::before {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: $scroller-dot-size;
        height: $scroller-dot-size;
        margin: {
          top: -(floor($scroller-dot-size / 2));
          left: -(floor($scroller-dot-size / 2));
        }
        border-radius: 50%;
        background-color: $scroller-dot-color;
        content: '';
        @include transition(opacity .35s);
      }
      &:hover::before { opacity: .35; }
    }
    &.current a::before { opacity: .35; }
    .scroller-tooltip {
      display: block;
      position: absolute;
      top: 50%;
      left: 100%;
      width: auto;
      margin: {
        top: -(floor($scroller-tooltip-height / 2));
        left: 10px;
      }
      padding: 0 15px;
      border-radius: 2px;
      background-color: rgba($gray-darker, .5);
      color: $light-color;
      font: {
        size: $font-size-lg;
        weight: 600;
      }
      line-height: $scroller-tooltip-height;
      text-indent: 0;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      @include transform(translateX(15px));
      @include transition(all .3s);
      &::after {
        position: absolute;
        top: 50%;
        right: 100%;
        width: 0;
        height: 0;
        margin-top: -$scroller-arrow-size;
        border: {
          width: $scroller-arrow-size;
          color: transparent;
          style: solid;
        }
        border-right-color: rgba($gray-darker, .5);
        content: '';
        pointer-events: none;
      }
    }
    > a:hover .scroller-tooltip {
      opacity: 1;
      visibility: visible;
      @include transform(translateX(0));
    }
  }
}
.scroller-right {
  right: floor($grid-vertical-step * 1.25); //~30px
  left: auto;
  .scroller-menu > ul > li {
    .scroller-tooltip {
      right: 100%;
      left: auto;
      margin: {
        right: 10px;
        left: 0;
      }
      @include transform(translateX(-15px));
    }
    .scroller-tooltip::after {
      right: auto;
      left: 100%;
      border-right-color: transparent;
      border-left-color: rgba($gray-darker, .5);
    }
  }
}

// Dark Version
// ------------------------------------------------------------
.navbar-lateral-dark,
.navbar-dark,
.navbar-floating-menu-dark {
  background-color: $gray-darker;
  .navbar,
  .fs-menu-wrap,
  .floating-menu-btn-wrap .inner::before {
    background-color: $gray-darker;
  }

  .vertical-navigation .mega-menu .widget a,
  .vertical-navigation > ul > li a,
  .toolbar .cart-toggle > a,
  .toolbar > .tool:not(.cart-toggle),
  .main-navigation > .menu > li > a,
  .fs-menu-wrap .fs-navigation ul > li > a {
    color: $light-color;
    &:hover {
      color: $menu-link-active-color;
    }
  }
  li.current-menu-item > a,
  li.current_page_item > a,
  li.current > a,
  li.current_page_parent > a,
  li.current_page_ancestor > a {
    color: $menu-link-active-color !important;
  }
  .toolbar,
  .toolbar>.tool,
  .social-bar,
  .navbar,
  .fs-menu-wrap .fs-navigation ul > li > a,
  .fs-menu-wrap .tools {
    border-color: rgba($light-color, .15);
  }
}
.navbar-lateral-dark {
  border: 0;
  .header-buttons { border-top-color: rgba($light-color, .15); }
  .vertical-navigation > ul {
    .menu-item-has-children > a > .arrow,
    .has-mega-menu > a > .arrow {
      border-color: rgba($light-color, .15) !important;
    }
  }
}
.navbar-floating-menu-dark {
  background-color: transparent !important;
  .navbar {
    background-color: transparent !important;
  }
}