.v-sidebar-menu {
    * {
      box-sizing: border-box;
    }
  
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 999;
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    transition: 0.3s max-width ease;

    .vsm--scroll-wrapper {
      position: relative;
      display: flex;
      flex: 1;
      min-height: 0;
      &:hover,
      &:focus,
      &:active {
        .vsm--scroll-bar {
          opacity: 1;
        }
      }
    }

    .vsm--scroll-overflow {
      overflow: hidden;
      width: 100%;
      height: 100%;
    }

    .vsm--scroll {
      overflow-y: scroll;
      overflow-x: hidden;
      height: 100%;
      -ms-overflow-style: none;
      scrollbar-width: none;
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
      }
      & > .vsm--menu {
        position: static !important;
        transition: 0.3s width ease;
      }
    }
    
    .vsm--scroll-bar {
      position: absolute;
      top: 2px;
      bottom: 2px;
      right: 2px;
      width: 6px;
      border-radius: 4px;
      z-index: 5;
      opacity: 0;
      transition: 0.3s opacity ease;
    }

    .vsm--scroll-thumb {
      display: block;
      background-color: #aaa;
      border-radius: 4px;
      cursor: pointer;
      user-select: none;
      opacity: 0.5;
      transition: 0.3s opacity ease;
      &:hover {
        opacity: 1;
      }
    }

    .vsm--menu,
    .vsm--dropdown {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .vsm--dropdown {
      padding: 5px;
    }
    
    .vsm--item {
      position: static !important;
      display: block;
      width: 100%;
      white-space: nowrap;
    }
  
    .vsm--link {
      position: static !important;
      display: flex;
      align-items: center;
      font-size: $item-font-size;
      font-weight: 400;
      padding: $item-padding;
      line-height: $item-line-height;
      text-decoration: none;
      user-select: none;
      transition: 0.3s all ease;
      &_active {
        font-weight: 600;
      }
      &_disabled {
        opacity: 0.4;
        pointer-events: none;
      }
      &_level-1 {
        .vsm--icon {
          height: $icon-height;
          line-height: $icon-height;
          width: $icon-width;
          flex-shrink: 0;
          text-align: center;
          border-radius: 3px;
        }
      }
    }
  
    .vsm--icon {
      display: inline-block;
      margin-right: 15px;
      z-index: 20;
    }
  
    .vsm--title {
      display: flex;
      align-items: center;
      flex: 1;
      & > span:first-child {
        flex-grow: 1;
      }
      &_hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0,0,0,0);
        border: 0;
      }
    }
  
    .vsm--arrow {
      width: 30px;
      height: 30px;
      font-size: 14px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      &_default {
        position: relative;
        width: 12px;
        height: 12px;
        transition: transform 0.3s ease;
        &:before {
          content: "";
          width: 6px;
          height: 6px;
          border-left: 2px solid;
          border-bottom: 2px solid;
          transform: rotate(-135deg);
          display: inline-block;
          position: absolute;
          top: 2px;
          left: 0;
          box-sizing: content-box;
        }
      }
      &_open {
        .vsm--arrow_default {
          transform: rotate(90deg);
        }
      }
    }
  
    .vsm--header {
      font-size: 14px;
      font-weight: 600;
      padding: 10px 15px;
      white-space: nowrap;
      text-transform: uppercase;
    }
  
    .vsm--badge {
      &_default {
        padding: 0px 6px;
        font-size: 12px;
        border-radius: 3px;
        height: 20px;
        line-height: 20px;
        font-weight: 600;
        text-transform: uppercase;
      }
    }
  
    .vsm--toggle-btn {
      width: 100%;
      height: 65px;
      font-size: 18px;
      text-align: center;
      cursor: pointer;
      border: none;
      display: flex;
      justify-content: center;
      align-items: center;
      &_default {
        position: relative;
        width: 12px;
        height: 12px;
        &:before {
          content: '';
          display: inline-block;
          height: 12px;
          border-left: 2px solid;
          position: absolute;
          left: 0px;
          top: 0px;
        }
        &:after {
          content: '';
          display: inline-block;
          width: 6px;
          height: 6px;
          border-left: 2px solid;
          border-bottom: 2px solid;
          position: absolute;
          left: 4px;
          top: 2px;
          transform: rotate(45deg);
          box-sizing: content-box;
        }
      }
    }
  
    &.vsm_collapsed {
      & .vsm--link_level-1 {
        &.vsm--link_hover,
        &:hover {
          background-color: transparent !important;
        }
      }
      
      .vsm--toggle-btn_default {
        transform: scaleX(-1);
      }
      &.vsm_rtl .vsm--toggle-btn_default {
        transform: scaleX(1);
      }

      .vsm--scroll-wrapper {
        width: calc(100% + 8px);
      }
    }
  
    &.vsm_rtl {
      right: 0;
      left: inherit;
      text-align: right;
      direction: rtl;
  
      .vsm--icon {
        margin-left: 15px;
        margin-right: 0px;
      }

      .vsm--arrow {
        &_default {
          transform: scaleX(-1);
        }
        &_open {
          .vsm--arrow_default {
            transform: rotate(-90deg) scaleX(-1);
          }
        }
      }

      .vsm--toggle-btn_default {
        transform: scaleX(-1);
      }

      .vsm--scroll-bar {
        right: inherit;
        left: 2px;
      }
    }

    &.vsm_relative {
      position: relative;
      height: 100%;
    }

    .expand-enter-active,
    .expand-leave-active {
      transition: height 0.3s ease;
      overflow: hidden;
    }
    .expand-enter-from,
    .expand-leave-to {
      height: 0 !important;
    }

    .slide-animation-enter-active {
      transition: width 0.3s ease;
    }
    .slide-animation-leave-active {
      transition: width 0.3s ease;
    }
    .slide-animation-enter-from,
    .slide-animation-leave-to {
      width: 0 !important;
    }
  }