diff --git a/qml/Components/ClideScrollBar.qml b/qml/Components/ClideScrollBar.qml
index 4549e8d..614bb3c 100644
--- a/qml/Components/ClideScrollBar.qml
+++ b/qml/Components/ClideScrollBar.qml
@@ -10,14 +10,21 @@ import clide.module 1.0
 ScrollBar {
     id: scrollBar
 
+    // Height, opacitiy, width
+    property int h: scrollBar.interactive ? 4 * 2 : 4
+    property int o: scrollBar.active && scrollBar.size < 1.0 ? 1.0 : 0.0
+    property int w: scrollBar.interactive ? 4 * 2 : 4
+
     // Scroll bar gutter
     background: Rectangle {
+        id: gutter
+
         color: RustColors.scrollbar_gutter
-        implicitHeight: scrollBar.interactive ? 8 : 4
-        implicitWidth: scrollBar.interactive ? 8 : 4
+        implicitHeight: scrollBar.h
+        implicitWidth: scrollBar.w
 
         // Fade the scrollbar gutter when inactive.
-        opacity: scrollBar.active && scrollBar.size < 1.0 ? 1.0 : 0.0
+        opacity: scrollBar.o
 
         Behavior on opacity {
             OpacityAnimator {
@@ -28,14 +35,26 @@ ScrollBar {
 
     // Scroll bar
     contentItem: Rectangle {
+        readonly property color barColor: {
+            if (scrollBar.size < 1.0) {
+                // If the scrollbar is required change it's color based on activity.
+                if (scrollBar.active) {
+                    return RustColors.scrollbar_active;
+                } else {
+                    return RustColors.scrollbar;
+                }
+            } else {
+                // If we don't need a scrollbar, fallback to the gutter color.
+                return gutter.color;
+            }
+        }
+
+        color: barColor
+        implicitHeight: scrollBar.h
+        implicitWidth: scrollBar.w
 
-        // If we don't need a scrollbar, fallback to the gutter color.
-        // If the scrollbar is required change it's color based on activity.
-        color: scrollBar.size < 1.0 ? scrollBar.active ? RustColors.scrollbar_active : RustColors.scrollbar : RustColors.scrollbar_gutter
-        implicitHeight: scrollBar.interactive ? 8 : 4
-        implicitWidth: scrollBar.interactive ? 8 : 4
         // Fade the scrollbar when inactive.
-        opacity: scrollBar.active && scrollBar.size < 1.0 ? 1.0 : 0
+        opacity: scrollBar.o
 
         // Smooth transition between color changes based on the state above.
         Behavior on color {