$scroll-bar-prefix-cls: $prefix-name + "scroll-bar";

.#{$scroll-bar-prefix-cls} { 
    overflow: hidden;
    position: relative;

    &-content {
        position: relative;
    }

    &-bar {
        position: absolute;
        border-radius: 4px;
        $barWidth: 6px;
        user-select: none;
        opacity: 0;
        transition: all .3s;
        z-index: 10;

        &-vertical {
            right: 2px;
            bottom: 0;
            width: $barWidth;
            top: $barWidth;
            height: calc(100% - $barWidth * 2);

            /* 设置滚动条宽度 */
            .#{$scroll-bar-prefix-cls} {
                &-thumb {
                    height: 40px;
                    width: 100%;
                }
            }
        }

        &-horizontal {
            left: $barWidth;
            right: 0px;
            bottom: 2px;
            height: $barWidth;
            width: calc(100% - $barWidth * 2);

            .#{$scroll-bar-prefix-cls} {
                &-thumb {
                    height: 100%;
                    width: 40px;
                }
            }
        }
    }

    &-thumb {
        position: absolute;
        top: 0;
        left: 0;

        /* 设置滚动条拖动区域高度 */
        background-color: #999;
        border-radius: 4px;
        cursor: pointer;
    }
}