@import "common.scss";

$scrollConfig:(hScrollTrackColor:transparent,vScrollTrackColor:transparent,hBarColor:rgb(101, 160, 103),vBarColor:rgb(75, 138, 120));

.#{$prefix}{

  .#{$prefix}-scrollbar-block{
    position:relative;
    border-radius: .5em;
    cursor:pointer;
  }
  %scrollbar{
    position: absolute;
    overflow:hidden;
    z-index:9999;

  }
  .#{$prefix}-scroll-cross{
    @extend %scrollbar;
    bottom:0;
    right:0;
    background-color: #5c9a73;
  }
  .#{$prefix}-scrollbar-ver{
    @extend %scrollbar;
    top:0;
    right:0;
    bottom:0;
    background-color: map-get($scrollConfig,vScrollTrackColor);
    border-radius: .5em;
    .#{$prefix}-scrollbar-block{
      background-color: map-get($scrollConfig,vBarColor);
      width:100%;
    }
    @include css(transition,width .1s);
    &[hidden-scroll]{
      width:0 !important;
      @include css(transition,width .5s);
    }
  }
  .#{$prefix}-scrollbar-hor{
    @extend %scrollbar;
    right:0;
    left:0;
    bottom:0;
    background-color: map-get($scrollConfig,hScrollTrackColor);
    border-radius:.5em;
    .#{$prefix}-scrollbar-block{
      background-color: map-get($scrollConfig,hBarColor);
      height:100%;
    }
    @include css(transition,height .1s);
    &[hidden-scroll]{
      @include css(transition,height .5s);
      height:0 !important;
    }
  }
}