$color: black;
$size: 10px;

@mixin transition($param...) {
    transition: $param;
    -moz-transition: $param;
    -webkit-transition: $param;
    -o-transition: $param;
}

.react-scrollbar-default .-reactjs-scrollbar {
    &-area {
        &\:dragging {
        }
        &\:scrolling {
          @include transition(all 0.5s ease);

          .-reactjs-scrollbar-thumb {
            @include transition(all 0.5s ease);
          }
        }
        &:hover {
            .-reactjs-scrollbar-track {
                opacity: 1;
            }
        }
    }

    &-track {
        @include transition(all 0.5s ease);
        opacity: 0.5;
        background: rgba($color, 0);
        &:hover {
            background: rgba($color, 0.3);
        }
        &\:vertical {
            width: $size;
            height: 100%;
            top: 0;
            right: 0;
        }
        &\:horizontal {
            height: $size;
            width: 100%;
            bottom: 0;
            right: 0;
        }
    }

    &-thumb {
        background: rgba($color, 0.5);
        cursor: default;
        width: $size;     //note: width of vertical thumb
        height: $size;    //note: height of horizontal thumb
        &\:dragging {
        }
    }
}