@vcui-navbar-transition-duration: .2s;
@vcui-navbar-transition-function: ease-in-out;
@wpb-navbar-icon-size: 50px;

.wpb-navbar-button-font() {
  font-family: @wpb_font-family-primary;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
}

.vc_navbar {
  .box-sizing(border-box);
  height: @vc_navbar_height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
  margin: @vc_navbar_margin;
  border: 0;
  // Prevent floats from breaking the navbar
  &:extend(.clearfix all);
  * {
    .box-sizing(border-box);
  }
  .vc_navbar-collapse {
    padding: 0;
  }
  background-color: @vc_navbar_background_color;
  border-bottom: none;
  .vc_navbar-nav {
    display: block;
    margin: 0;
    > li {
      float: left;
      margin: 0;
      a:focus {
        box-shadow: none;
      }
      height: @vc_navbar_height;
    }
  }

  .vc_navbar-brand {
    svg {
      transform: scale(1.8);
    }
  }
  &.vc_navbar-frontend {
    .vc_navbar-brand {
      &.vc_ui-wp-spinner {
        &::before {
          background-image: url(@vc_ui-wp-spinner-light-svg-src);
        }
      }
    }
  }
  .vc_last {
    padding-right: 25px;
  }
  .vc_right-space {
    padding-right: 5px;
  }
  a.vc_icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: @wpb-navbar-icon-size;
    height: @wpb-navbar-icon-size;
    cursor: pointer;
    outline: 0;
    background: transparent;
    transition: background-color @vcui-navbar-transition-duration @vcui-navbar-transition-function;
    position: relative;
    font-size: 24px;
    &[disabled], &[disabled]#vc_navbar-redo, &[disabled]#vc_navbar-undo {
      .opacity(0.2);
      cursor: not-allowed;
    }
    &:not([disabled]):hover,
    &:not([disabled]):focus {
      background-color: @vc_navbar_icon_btn_color_hover;
    }
    .vc-composer-icon, .vc_navbar-icon {
      color: @vc_navbar_icon_color;
      position: absolute;
      left: 50%;
      top: 50%;
      .translate(-50%, -50%);
    }
  }
  .vc_open {
    > a, > a:focus {
      background-color: @vc_navbar_background_color;
    }
  }
  .vc_btn-backend-editor {
    margin-right: 2px;
  }
  .vc_btn.vc_btn-save {
    background-color: #fff;
    color: @textGray;
    margin-left: 2px;

    &-draft {
      background-color:  @vc_navbar_icon_btn_color_hover;
      color: #fff;
      margin-right: 2px;
      transition: color @vcui-navbar-transition-duration @vcui-navbar-transition-function,
                  background-color @vcui-navbar-transition-duration @vcui-navbar-transition-function;
    }

    &.vc_navbar-btn:hover,
    &.vc_navbar-btn:active,
    &.vc_navbar-btn:focus,
    &.vc_navbar-btn:active:focus,
    &.vc_navbar-btn:focus-within,
    &-draft.vc_navbar-btn:hover,
    &-draft.vc_navbar-btn:active,
    &-draft.vc_navbar-btn:focus,
    &-draft.vc_navbar-btn:active:focus,
    &-draft.vc_navbar-btn:focus-within {
      background-color: @vc_navbar_btn_hover_bg;
      color: @textGray;
      outline: none;
    }
  }
  .vc_undo-redo {
    font-size: 22px;
  }
  .vc_fullscreen-button,
  .vc_windowed-button {
    font-size: 23px;
  }

  ul.vc_navbar-nav li a#vc_windowed-button {
    display: none;
    i {
      top: 65%;
    }
  }

  .wpb-custom-code-icon-container {
    display: inline-flex;
    position: relative;
  }

  .vc_badge-custom-code {
    display: block;
    background-color: #fcb714;
    position: absolute;
    top: 13px;
    right: 16px;
    height: 7px;
    width: 7px;
    min-width: unset;
    padding: 0;
    border-radius: 50%;
    z-index: 1;
  }
  .vc_save-backend {
    display: none;
    .vc_control-preview {
      margin-right: 0;
      background-color: @vc_navbar_icon_btn_color_hover;
      color: #fff !important; // override another !important
      transition: background-color @vcui-navbar-transition-duration @vcui-navbar-transition-function,
                  color @vcui-navbar-transition-duration @vcui-navbar-transition-function;
      &:hover,
      &:active,
      &:focus,
      &:active:focus {
        background-color: @vc_navbar_btn_hover_bg;
        color: @textGray !important; // override own !important
      }
    }
    .vc_control-save {
      margin-left: 5px;
      background-color: #fff;
      color: @textGray;
      text-align: center;
      &:hover,
      &:active,
      &:focus,
      &:active:focus {
        background-color: @vc_navbar_btn_hover_bg;
      }
    }
  }
  .vc_dropdown {
    position: relative;
    .vc_current-layout-icon {
      color: #FFFFFF;
    }
    .vc-c-icon-arrow_drop_down {
      color: #FFFFFF;
      opacity: 0.5;
    }
    .vc_dropdown-list {
      display: none;
      position: absolute;
      z-index: 1000;
      top: @vc_navbar_height;
      background: @vc_navbar_icon_btn_color_hover;
      border-bottom-left-radius: @vc_border_radius;
      border-bottom-right-radius: @vc_border_radius;
      padding-top: 1px;
      max-height: calc(100vh - 102px);
      overflow: auto;
      > li {
        margin: 0;
      }
      a {
        display: flex;
        color: @white; // required for the mobile vide dropdown
        text-decoration: none;
        transition: background-color @vcui-navbar-transition-duration @vcui-navbar-transition-function;
        background-color: transparent;
        position: relative;
        &::before {
          position: absolute;
          top: 50%;
          left: 50%;
          .translate(-50%, -50%);
        }
        &:hover {
          background-color: @vc_main_color;
        }
        &.active {
          background-color: @vc_main_color;
        }

        &.vc-c-icon-layout_portrait-smartphones, &.vc-c-icon-layout_landscape-smartphones  {
          &::before {
            font-size:  20px;
          }
        }
      }
    }
    &.open {
      .vc_dropdown-list {
        display: block;
      }
      .vc_dropdown-toggle {
        background-color: @vc_navbar_icon_btn_color_hover;
      }
    }

    &-more {
      .vc_dropdown-list {
        top: @vc_navbar_height;
        right: 0;
        margin: 0;
        padding: 0;
      }
      .vc_dropdown-list-item {
        a {
          width: auto;
          min-width: 160px;
          height: 50px;
          padding: 16px 20px;
          .wpb-navbar-button-font();
        }
      }
    }
  }
}

// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).

.vc_btn.vc_navbar-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  .wpb-navbar-button-font();
  border-radius: @vc_border_radius;
  width: 100px;
  height: 40px;
  margin: 5.5px 21px;
  transition: background-color @vcui-navbar-transition-duration @vcui-navbar-transition-function;

  &.vc_btn-xs {
    .navbar-vertical-align(22);
  }
}

@media screen and (max-width: 540px) {
  .vc_btn.vc_navbar-btn {
    width: 65px;
    font-size: 14px;
  }
}

.vc_subnav-fixed {
  position: fixed;
  top: 32px;
  left: 0;
  z-index: 9980;
  width: 100%;
  padding-left: @vc_navbar_fixed_right_padding;
  .vc_save-backend {
    display: block;
  }
}

.folded {
  .vc_subnav-fixed {
    padding-left: 40px;
  }
}

// Desktop navbar mixin
.vc_navbar-desktop {
  .vc_hide-desktop {
    display: none;
  }
  .vc_navbar ul.vc_navbar-nav li.vc_preview-template a {
    display: flex;
    align-items: center;
  }
  .vc_subnav-fixed.vc_navbar, .vc_fullscreen .vc_navbar {
    ul.vc_navbar-nav li.vc_save-backend, ul.vc_navbar-nav li.vc_preview-template  {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-right: 6px;
      a {
        margin: 0;
        padding: 8px;
        display: flex;
      }
    }
    ul.vc_navbar-nav li.vc_save-backend {
      margin: 0 21px;
      gap: 8px;
    }
  }

  .vc_navbar ul.vc_navbar-nav {

    li {
      &.vc_save-buttons {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 10px;
        a {
          margin: 0;
          padding: 8px;
          display: flex;
          border-radius: @vc_border_radius;
        }
      }

      a {
        p {
          text-align: center;
          margin: 0;
          .wpb-navbar-button-font();
          &.wpb-desktop-preview-text {
            margin-left: 10px;
          }
        }
      }

      .vc_dropdown-more  {
        li.vc_hide-desktop-more {
          display: none;
        }
      }
    }
  }
}

// Desktop mobile mixin
.vc_navbar-mobile {
  .vc_navbar {
    display: flex;
    ul.vc_navbar-nav li.vc_hide-mobile, .navbar-header {
      display: none;
    }

    &-nav {
      flex: 1;
    }
  }

  .vc_navbar ul.vc_navbar-nav li .vc_dropdown-more  {
    ul {
      width: 375px;
      li , li.vc_hide-mobile {
        display: block;
        a {
          width: 100%;
          padding: 18px;
          height: 56px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          i {
            position: relative;
            transform: unset;
            top: unset;
            left: unset;
            font-size: 24px;
          }
          p {
            margin: 0;
            margin-left: 18px;
            .wpb-navbar-button-font();
          }
        }
      }

      .vc_save-backend .vc_control-save {
        margin-left: 0;
      }

      .vc_pull-right {
        float: none !important;
      }
    }
  }

  .vc_navbar li.vc_show-mobile {
    display: block;
    float: left;
  }

  .vc_navbar-nav {
    float: left;
    margin: 0;
    &.navbar-right {
      float: right;
    }
  }

  .vc_navbar-header {
    float: left;
  }
}

// Media query specifically for Backend Editor!
@media screen and (min-width: 1011px) {
  body:not(.vc_editor) {
    .vc_navbar-desktop();
  }
}

// Media query specifically for Frontend Editor!
@media screen and (min-width: 961px) {
  body.vc_editor {
    .vc_navbar-desktop();
  }
}

// Media query specifically for Backend Editor! , fixed at this point
@media screen and (max-width: 1065px) {
  body:not(.vc_editor) .vc_navbar {
    position: fixed;
    z-index: 9980;
    width: 100%;
    left: 0;
    padding-left: @vc_navbar_fixed_right_padding;
    top: 32px; // #wpadminbar height
  }

  body.folded:not(.vc_editor) {
    .vc_navbar {
      padding-left: 36px;
    }
    .vc_subnav-fixed {
      padding-left: 40px;
    }
  }
}

// Media query specifically for Backend Editor!
@media screen and (max-width: 1010px) {
  body:not(.vc_editor) {
    .vc_navbar-mobile();
  }

  body.folded:not(.vc_editor) {
    .vc_navbar {
      padding-left: 36px;
    }
    .vc_subnav-fixed {
      padding-left: 40px;
    }
  }
}

@media screen and (max-width: 960px) {
  // Sytle specifically for Frontend Editor!
  body.vc_editor {
    .vc_navbar-mobile();
  }

  // Sytle specifically for Backend Editor!
  body:not(.vc_editor).auto-fold {
    .vc_navbar {
      padding-left: 36px;
    }
    .vc_subnav-fixed {
      padding-left: 40px;
    }
  }
}

@media screen and (max-width: 782px) {

  .vc_navbar {
    position: fixed;
    z-index: 9980;
    width: 100%;
    left: 0;
  }

  body:not(.vc_editor).auto-fold .vc_navbar {
    padding-left: 0;
    top: 46px; // #wpadminbar height
  }

  #wpwrap.wp-responsive-open .vc_navbar {
    width: calc(100% - 190px);
    margin-left: 190px;
  }

  #wpcontent {
    padding-top: @vc_navbar_height;
  }

  .auto-fold {
    .vc_navbar {
      padding-left: 0;
    }
    .vc_subnav-fixed {
      padding-left: 0;
    }
  }
}

@media screen and (max-width: 400px) {
  .vc_navbar ul.vc_navbar-nav li .vc_dropdown-more ul {
    width: 320px;
  }
}

.vc_navbar-border-right {
  border-right: 1px solid @vc_navbar_border_color;
}

.vc_dropdown-menu {
  background-color: #000000;
}

.vc_navbar-header {
  .navbar-header();
  float: left;
}

.vc_navbar-collapse {
  .navbar-collapse();
}

.vc_select-navbar {
  margin: 12.5px 21px;
}

#vc_navbar-redo, #vc_navbar-undo {
  transition: all 0.2s ease-in-out;
}

.vc_custom-code-icon {
  position: relative;
  .vc_badge {
    top: -3px;
    right: -3px;
  }
}

.vc_editor #vc_more-options {
  .vc_badge {
    top: -3px;
    right: -3px;
  }
}
#vc_more-options {
  .vc_badge {
    top: 0px;
    right: -3px;
  }
}

.vc_screen-size-current {
  display: flex;
  justify-content: center;
  align-items: center;
}
