

.vue-scrollbar-transition
  transition: all 0.5s ease
  -moz-transition: all 0.5s ease
  -webkit-transition: all 0.5s ease
  -o-transition: all 0.5s ease

  &--scrollbar
    transition: opacity 0.5s linear
    -moz-transition: opacity 0.5s linear
    -webkit-transition: opacity 0.5s linear
    -o-transition: opacity 0.5s linear

.vue-scrollbar
  &__wrapper
    margin: 0 auto
    overflow: hidden
    position: relative
    background: white

    &:hover
      .vue-scrollbar
        &__scrollbar-vertical, &__scrollbar-horizontal
          opacity: 1


  &__scrollbar-vertical, &__scrollbar-horizontal
    @extend .vue-scrollbar-transition
    opacity: 0.5
    position: absolute
    background: transparent

    &:hover
      background: rgba(0,0,0,0.3)

    .scrollbar
      position: relative
      background: rgba(0,0,0,0.5)
      cursor: default

  &__scrollbar-vertical
    width: 10px
    height: 100%
    top: 0
    right: 0

    .scrollbar
      width: 10px

  &__scrollbar-horizontal
    height: 10px
    width: 100%
    bottom: 0
    right: 0

    .scrollbar
      height: 10px
