.os-scroll-view {
    width: 100%;
    height: 100%;
    display: block;

    &::-webkit-scrollbar {
        width: 17px;
    }

    &::-webkit-scrollbar-corner {
        background: #dfdfdf;
    }

    &::-webkit-scrollbar-track {
        &:vertical {
            background-image: url("/assets/themes/winXP/icons/scroll-background.png");
        }
        &:horizontal {
            background-image: url("/assets/themes/winXP/icons/scroll-background-horizontal.png");
        }
    }

    &::-webkit-scrollbar-thumb {
        background-position: center;
        background-repeat: no-repeat;
        background-color: rgba(var(--os-primary-color), .35);
        background-size: 7px;
        border: 1px solid white;
        border-radius: 2px;
        box-shadow: inset -3px 0 rgba(0, 0, 0, .07), inset 1px 1px rgba(0, 0, 0, .15);

        &:vertical {
            background-image: url("/assets/themes/winXP/icons/scroll-thumb.png");
        }

        &:horizontal {
            background-size: 8px;
            background-image: url("/assets/themes/winXP/icons/scroll-thumb-horizontal.png");
        }
    }

    &::-webkit-scrollbar-button {
        height: 17px;
        display: block;

        &:start,
        &:end {
            border-radius: 3px;
            background-image: url("/assets/themes/winXP/icons/arrow-button.png");
            background-color: rgb(var(--os-primary-color));
        }

        &:vertical {
            &:start {
                background-position: -34px 0px;

                &:hover {
                    background-position: -34px -17px;
                }

                &:active {
                    background-position: -34px -34px;
                }

                &:disabled {
                    background-position: -34px -51px;
                }

                &:increment {
                    display: none;
                }
            }
            &:end {
                background-position: 0px 0px;

                &:hover {
                    background-position: 0px -17px;
                }

                &:active {
                    background-position: 0px -34px;
                }

                &:disabled {
                    background-position: 0px -51px;
                }

                &:decrement {
                    display: none;
                }
            }
            
        }
        &:horizontal {
            &:start {
                background-position: 17px 0px;

                &:hover {
                    background-position: 17px -17px;
                }

                &:active {
                    background-position: 17px -34px;
                }

                &:disabled {
                    background-position: 17px -51px;
                }

                &:increment {
                    display: none;
                }
            }
            &:end {
                background-position: 51px 0px;

                &:hover {
                    background-position: 51px -17px;
                }

                &:active {
                    background-position: 51px -34px;
                }

                &:disabled {
                    background-position: 51px -51px;
                }

                &:decrement {
                    display: none;
                }
            }
        }
    }
}
