Como dar estilo a un Scroll Pane de JavaFX utilizando CSS

Bien en esta ocasión quiero compartir como darle estilo a un scroll pane de JavaFx, por lo que colocaré el código con las clases que se pueden utilizar para cambiar el aspecto de los objetos o nodos que componen la interfaz del contenedor.

El Scroll pane está compuesto por los siguientes nodos u objetos:

• Scroll-bar:

  1. Vertical (.scroll-bar:vertical)/Horizontal(.scroll-bar:horizontal): Se refiere a la barra que se muestra para poder realizar el scroll de forma vertical u horizontal. Esta a su vez está compuesta por los siguientes nodos:

     • Increment-button: Este es el botón que se muestra en la scroll-bar para poder realizar el scroll hacia abajo o incrementar la posición del scroll. Este nodo a su vez contiene el siguiente nodo:

       • Increment-arrow: Este nodo es el que muestra la flecha indicando la dirección en la que se mueve el scroll, en este caso sería la flecha apuntando hacia abajo

     • Decrement-button: Este es el botón que se muestra en la scroll-bar para poder realizar el scroll hacia arriba o decrementar la posición del scroll. Este nodo a su vez contiene el siguiente nodo:

       • Increment-arrow: Este nodo es el que muestra la flecha indicando la dirección en la que se mueve el scroll, en este caso sería la flecha apuntando hacia arriba

     • Thumb: Este nodo es el encargado de mostrar la barrita que se desplaza a través de la scroll-bar.

     • Track: Este nodo es el que muestra el fondo de la scroll-bar, es por donde se desplaza el nodo thumb.

• Corner: Este es el pequeño cuadrado que queda como en la esquina inferior derecha del scroll-pane, es el que divide por así decirlo el final de la scroll-bar horizontal y la scroll-bar vertical

• Content: Este nodo es el contenedor del scroll-pane, es en donde se coloca el contenido.

Pero para que nos quede más claro lo podemos observar en la siguiente imagen:

A continuación comparto el código css que se utilizaría para poder darle estilo al scroll pane:

    .scroll-bar:vertical .track{
        /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
    }

    .scroll-bar:horizontal .track{
        /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
    }

    .scroll-bar:horizontal .thumb{
        /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
    }

    .scroll-bar:vertical .thumb{
        /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
    }


    .scroll-bar:vertical *.increment-button,
    .scroll-bar:vertical *.decrement-button{
        /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
    }

    .scroll-bar:vertical *.increment-arrow .content, 
    .scroll-bar:vertical *.decrement-arrow .content{
        /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
    }

    .scroll-bar:vertical *.increment-arrow, 
    .scroll-bar:vertical *.decrement-arrow{
        /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
    }


    .scroll-bar:horizontal *.increment-button,
    .scroll-bar:horizontal *.decrement-button{
        /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
    }

    .scroll-bar:horizontal *.increment-arrow .content, 
    .scroll-bar:horizontal *.decrement-arrow .content{
        /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
    }

    .scroll-bar:horizontal *.increment-arrow, 
    .scroll-bar:horizontal *.decrement-arrow{
        /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
    }

    .scroll-pane .corner{
        /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
    }

    .scroll-pane{
        /*AQUI LOS ESTILOS QUE SE DESEA APLICAR*/
    }