Scrollbar Mod by PRO-2684

/* ==UserStyle==
@name           Scrollbar Mod
@namespace      github.com/PRO-2684
@version        0.2.0
@description    Customize your ScrollBar - Mod version
@author         PRO-2684
@license     	gpl-3.0
@preprocessor   stylus
@var select   Theme                 "Theme" [
    "Default", "Deep-Dark", "Green-Plain", "Light-Red", "Desert", "Tradewind", "Hippie-Blue", "Purple", "Custom"
]
@var color    CustomTrackColor      "Track Color"             #161616
@var color    CustomHandleColor     "Handle Color"            #2d2d2d
@var color    CustomHandleHover     "Handle Hover"            #5b5b5b
@var color    CustomHandleActive    "Handle Active"           #7b7b7b
@var text     Radius                "Radius"                  46px
@var text     ScrollbarWidth        "ScrollBar Width"         8px
@var text     ScrollbarHandleShrink "ScrollBar Handle Shrink" 1px
@var select   BackgroundVisibility  "Background Visibility"   ["Visible-On-Hover", "Always-Visible", "Always-Hidden"]
@var number   Opacity               "Opacity"                 [80, 0, 100, 1]
@var checkbox SmoothScroll          "Smooth Scroll"           0
@var checkbox Force                 "Force"                   0
==/UserStyle== */

@-moz-document regexp(".*") {
    /* Themes */
    themes = {
        "Default": {
            TrackColor: #161616,
            HandleColor: #2d2d2d,
            HandleHover: #5b5b5b,
            HandleActive: #7b7b7b
        },
        "Deep-Dark": {
            TrackColor: #232846,
            HandleColor: #383779,
            HandleHover: #4358a6,
            HandleActive: #4f6fc2
        },
        "Green-Plain": {
            TrackColor: #345d38,
            HandleColor: #5dab6a,
            HandleHover: #6eb565,
            HandleActive: #7db565
        },
        "Light-Red": {
            TrackColor: #5d3434,
            HandleColor: #ab5d5d,
            HandleHover: #b56565,
            HandleActive: #c27b7b
        },
        "Desert": {
            TrackColor: #5d4834,
            HandleColor: #ab805d,
            HandleHover: #b59165,
            HandleActive: #c2a07b
        },
        "Tradewind": {
            TrackColor: #345d4d,
            HandleColor: #5dab8a,
            HandleHover: #65b5a5,
            HandleActive: #7bb5b5
        },
        "Hippie-Blue": {
            TrackColor: #344c5d,
            HandleColor: #5d7dab,
            HandleHover: #658db5,
            HandleActive: #7b9cb5
        },
        "Purple": {
            TrackColor: #45345d,
            HandleColor: #8c5dab,
            HandleHover: #9565b5,
            HandleActive: #a07bc2
        },
        "Custom": {
            TrackColor: CustomTrackColor,
            HandleColor: CustomHandleColor,
            HandleHover: CustomHandleHover,
            HandleActive: CustomHandleActive
        }
    }
    colors = themes[Theme]

    /* Force */
    i = Force ? !important : null;
    if Force {
        * {
            scrollbar-width: initial i;
            scrollbar-color: initial i;
        }
    }

    /* Scrollbar width */
    ::-webkit-scrollbar {
        width: ScrollbarWidth i;
        height: ScrollbarWidth i;
        border-radius: Radius i;

        if BackgroundVisibility == "Always-Visible" {
            background: alpha(colors.TrackColor, Opacity / 100) i;
        } else {
            background: transparent i;
        }

        if BackgroundVisibility == "Visible-On-Hover" {
            &:hover {
                background: alpha(colors.TrackColor, Opacity / 100) i;
            }
        }
    }

    /* Scrollbar Handle */
    ::-webkit-scrollbar-thumb {
        background: alpha(colors.HandleColor, Opacity / 100) i;
        background-clip: padding-box i;
        border-radius: Radius i;
        border: ScrollbarHandleShrink solid transparent i;

        /* Handle on hover */
        &:hover {
            background: alpha(colors.HandleHover, Opacity / 100) i;
        }

        /* Handle on active */
        &:active {
            background: alpha(colors.HandleActive, Opacity / 100) i;
        }
    }

    /* Smooth Scroll */
    if SmoothScroll {
        html {
            scroll-behavior: smooth i;
        }
    }
}