$scroll-prefix: #{$css-prefix}scroll;
.#{$scroll-prefix} {
  overflow: hidden;
  position: relative;
  height:100%;
  &-wrap{
    overflow: scroll;
    // overflow-x: auto; 
    height: 100%;
    &::-webkit-scrollbar{
      // width:17px;
      // height:17px;
      background-color: transparent;
    }
  }
  &-view{
    position: relative;
  }
  &-bar{
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 1;
    border-radius: $scroll-xy-radius;
    opacity: 0;
    transition: opacity .12s ease-out;
    &-horizontal{
      height: $scroll-x-height;
      left: 2px;
      &>div{
        height: 100%;
      }
    }
    &-vertical{
      width: $scroll-y-width;
      top: 2px;
      &>div{
        width: 100%;
      }
    }
    &-thumb{
      position: relative;
      display: block;
      width: 0;
      height: 0;
      cursor: pointer;
      border-radius: inherit;
      background-color: hsla(220,4%,58%,.3);
      transition: background-color .3s;
    }
  }
  // &:hover{
  //   .#{$scroll-prefix}{
  //     &-bar{
  //       opacity: 1;
  //     }
  //   }
  // }
}