@mixin navbar-vertical-variant($bg-color, $bg-image, $shadow, $link-color, $link-hover-color, $link-active-color, $link-disable-color, $hr-color, $navbar-vertical-label-color){
    .navbar-collapse {
      @if $bg-color{
        background-color: $bg-color;
      }
      @if $bg-image{
        background-image: $bg-image;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        backface-visibility: hidden;
      }
      @if $shadow{
        box-shadow: $shadow !important;
      }
    }
    .navbar-nav .nav-item {
      .navbar-vertical-label-wrapper {
        min-height: 1.125rem;
      }
      .navbar-vertical-label {
        color: $navbar-vertical-label-color;
      }
      .nav-link {
        color: $link-color;
        &.dropdown-indicator:after {
          border-color: $link-color;
        }
        @include hover-focus {
          color: $link-hover-color;
          &.dropdown-indicator:after {
            border-color: $link-hover-color;
          }
        }
        &.active{
          color: $link-active-color;
        }
        &.nav-link-disable{
          color: $link-disable-color !important;
        }
      }
    }
    .navbar-vertical-divider {
      background-color: $hr-color;
    }
  }
  
  @mixin navbar-vertical-scrollbar($type, $color) {
    .windows{
      &.chrome{
        .navbar-vertical{
          @if($type){
            &.navbar-#{$type} .scrollbar::-webkit-scrollbar-thumb{
              background-color: $color;
            }
          }
          @else{
            .scrollbar::-webkit-scrollbar-thumb{
              background-color: $color;
            }
          }
        }
      }
      &.firefox{
        .navbar-vertical{
          @if($type){
            &.navbar-#{$type} .scrollbar {
              scrollbar-color: $color transparent;
            }
          }
          @else{
            .scrollbar {
              scrollbar-color: $color transparent;
            }
          }
        }
      }
    }
  }