.parentx-static
  .vs-sidebar-background
    display none

.vs-sidebar--background
  background rgba(0, 0, 0, .2)
  width 100%
  height 100%
  top 0
  position fixed
  z-index 39999
  transition: all .3s ease
  opacity 1

.vs-sidebar
  background: rgb(255, 255, 255)
  position: fixed
  height 100vh
  width: 100%
  max-width 260px
  top: 0
  display: flex
  flex-direction: column
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, .05)
  propWithDir(left, null, 0)
  transition: all .25s ease
  z-index 40000

  &.vs-sidebar-reduce
    max-width 54px
    border-radius: 0 10px 10px 0

    h4
      display: block
      position relative
      overflow hidden
      white-space: nowrap
      text-overflow: ellipsis
      width: 100%
      font-size: .7rem

      i
        opacity 0

    ul
      propWithDir(padding, left, 0, !important)

    .con-vs-avatar
      width: 40px !important
      height 40px !important

    &.vs-sidebar-reduceNotHoverExpand
      h4
        text-align: center

        &:hover
          ~ .vs-sidebar--tooltip
            opacity 1
            visibility visible
            propWithDir(transform, null, (5px -110%))

    &:hover:not(.vs-sidebar-reduceNotRebound):not(.vs-sidebar-reduceNotHoverExpand)
      animation: expand .4s ease .15s

    &:hover:not(.vs-sidebar-reduceNotHoverExpand)
      max-width 260px

      h4
        // display: flex
        // align-items: center
        // justify-content: space-between

        i
          opacity 1

    .vs-sidebar--item
      overflow hidden

      i
        padding: 10px

  &.vs-sidebar-position-right
    propWithDir(left, null, auto);
    propWithDir(right, null, 0);

    &.vs-sidebar-reduce
      border-radius: 10px 0 0 10px

    .vs-sidebar-tooltip
      propWithDir(left, null, auto);
      propWithDir(right, null, 70px);

      &:after
        propWithDir(left, null, auto);
        propWithDir(right, null, 5px);
        box-shadow: 4px 0 6px -3px rgba(0, 0, 0, .07)

  &.vs-sidebar-parent
    position: absolute
    height: 100% !important
    top: 0

  &.vs-sidebar-staticPosition
    position: relative

  .vs-divider-text
    opacity .7

.vs-sidebar--footer
  border-top: 1px solid rgba(0, 0, 0, .06)

.vs-sidebar--items
  padding: 10px 0
  background: inherit
  overflow-y auto

.vs-sidebar--item
  transition: all .25s ease

  i.material-icons
    propWithDir(margin, right, 8px)
    transition: border .25s ease
    font-size: 1rem

  a
    padding: 10px
    transition: all .25s ease
    display: flex
    align-items: center
    color: inherit
    opacity .8
    font-size: .85rem
    text-decoration none

    &:hover
      opacity 1

.vs-sidebar--header
  border-bottom: 1px solid rgba(0, 0, 0, .06)
  padding: 10px 5px

// vs-sidebar-group

.vs-sidebar-group
  background: inherit
  position relative

  > ul
    transition: all .2s ease

  // opacity: 0

  h4
    padding: 10px
    cursor: pointer
    display: flex
    justify-content: space-between
    user-select: none
    transition: all .25s ease
    border-bottom: 1px solid rgba(0, 0, 0, .0)
    background: inherit
    font-size: .7rem

    i
      position: absolute
      propWithDir(right, null, 10px)

  .vs-icon
    transition: all .2s ease
    user-select: none

  &.vs-sidebar-group-open
    > ul
      propWithDir(padding, left, 10px)
      opacity: 1

      .vs-sidebar--item:last-child
        border-bottom: 1px solid rgba(0, 0, 0, .05)

    > h4
      // background: rgba(0,0,0,.01)
      background: linear-gradient(90deg, rgba(0, 0, 0, .0) 0%, rgba(0, 0, 0, .01) 100%);

      // border-bottom: 1px solid rgba(0,0,0,.01)

      > .vs-icon
        transform rotate(180deg)

.vs-sidebar--tooltip
  opacity 0
  transition: all .25s ease
  background: inherit
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, .07)
  padding: 4px 8px
  border-radius: 4px
  position fixed
  // top: 5px
  propWithDir(left, null, 60px)
  pointer-events: none
  visibility hidden
  propWithDir(transform, null, (15px -110%))

  &:after
    content: ''
    propWithDir(left, null, -5px)
    width: 10px
    height 10px
    background: inherit
    box-shadow: -4px 0 6px -3px rgba(0, 0, 0, .07)
    position: absolute
    top: 50%
    transform: translate(0, -50%) rotate(45deg)

.vs-sidebar--group-items
  padding: 0
  transition: all .25s ease
  max-height: 0
  overflow: hidden
  background: inherit

for colorx, i in $vs-colors
  .vs-sidebar-{colorx}
    .vs-sidebar--item
      a
        &:hover
          color: getColor(colorx, 1)

    .vs-sidebar-item-active
      font-weight: bold
      background: linear-gradient(90deg, rgba(0, 0, 0, .0) 0%, rgba(0, 0, 0, .01) 100%);
      propWithDir(border, right, 3px solid getColor(colorx, 1), !important)
      border-right: 3px solid getColor(colorx, 1) !important

      a
        color: getColor(colorx, 1) !important
        opacity 1 !important

// animations

.vs-sidebar-animate-enter-active, .vs-sidebar-animate-leave-active
  transition: all .25s ease

  .vs-sidebar
    transition: all .25s ease

.vs-sidebar-animate-enter:not(.vs-sidebar-position-right), .vs-sidebar-animate-leave-to:not(.vs-sidebar-position-right)
  .vs-sidebar
    propWithDir(transform, null, (-100%))

.vs-sidebar-animate-enter, .vs-sidebar-animate-leave-to
  .vs-sidebar-background
    opacity 0 !important

  .vs-sidebar
    &.vs-sidebar-position-right
      propWithDir(transform, null, (100%))


@keyframes expand
  0%
    max-width 275px
  30%
    max-width 250px
  60%
    max-width 265px
  100%
    max-width 260px