diff --git a/src/scss/vendor/perfect-scrollbar/_mixins.scss b/src/scss/vendor/perfect-scrollbar/_mixins.scss
index 79d3d2c..b9411bb 100644
--- a/src/scss/vendor/perfect-scrollbar/_mixins.scss
+++ b/src/scss/vendor/perfect-scrollbar/_mixins.scss
@@ -2,30 +2,31 @@
   display: none;
   position: absolute; /* please don't change 'position' */
   opacity: map_get($theme, rail-default-opacity);
-  transition: background-color .2s linear, opacity .2s linear;
+  transition: height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
 }
 
 @mixin scrollbar-rail-hover($theme) {
-  background-color: map_get($theme, rail-hover-bg);
   opacity: map_get($theme, rail-hover-opacity);
 }
 
 @mixin scrollbar-default($theme) {
   position: absolute; /* please don't change 'position' */
-  background-color: map_get($theme, bar-container-hover-bg);
+  background: map_get($theme, bar-bg);
   border-radius: map_get($theme, border-radius);
-  transition: background-color .2s linear, height .2s linear, width .2s ease-in-out,
-              border-radius .2s ease-in-out;
+  transition: height 0.2s linear, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
 }
 
 @mixin scrollbar-hover($theme) {
-  background-color: map_get($theme, bar-hover-bg);
+  background: map_get($theme, bar-hover-bg);
 }
 
 @mixin in-scrolling($theme) {
   &.ps-in-scrolling {
     &.ps-x > .ps-scrollbar-x-rail {
       @include scrollbar-rail-hover($theme);
+      height: map_get($theme, scrollbar-x-rail-hover-height);
+      background: map_get($theme, bar-x-rail-hover-bg);
+
       > .ps-scrollbar-x {
         @include scrollbar-hover($theme);
         height: map_get($theme, scrollbar-x-hover-height);
@@ -33,6 +34,9 @@
     }
     &.ps-y > .ps-scrollbar-y-rail {
       @include scrollbar-rail-hover($theme);
+      width: map_get($theme, scrollbar-y-rail-hover-width);
+      background: map_get($theme, bar-y-rail-hover-bg);
+
       > .ps-scrollbar-y {
         @include scrollbar-hover($theme);
         width: map_get($theme, scrollbar-y-hover-width);
@@ -57,10 +61,16 @@
     overflow: auto !important;
   }
 
-  &.ps-active-x > .ps-scrollbar-x-rail,
+  &.ps-active-x > .ps-scrollbar-x-rail {
+    display: block;
+    background: map_get($theme, bar-x-rail-bg);
+    cursor: default !important;
+  }
+
   &.ps-active-y > .ps-scrollbar-y-rail {
     display: block;
-    background-color: map_get($theme, bar-bg);
+    background: map_get($theme, bar-y-rail-bg);
+    cursor: default !important;
   }
 
   @include in-scrolling($theme);
@@ -77,6 +87,8 @@
     }
     &:hover,
     &:active {
+      height: map_get($theme, scrollbar-x-rail-hover-height);
+
       > .ps-scrollbar-x {
         height: map_get($theme, scrollbar-x-hover-height);
       }
@@ -95,6 +107,8 @@
     }
     &:hover,
     &:active {
+      width: map_get($theme, scrollbar-y-rail-hover-width);
+
       > .ps-scrollbar-y {
         width: map_get($theme, scrollbar-y-hover-width);
       }
@@ -111,6 +125,7 @@
 
     > .ps-scrollbar-x-rail:hover {
       @include scrollbar-rail-hover($theme);
+      background: map_get($theme, bar-x-rail-hover-bg);
 
       > .ps-scrollbar-x {
         @include scrollbar-hover($theme);
@@ -119,6 +134,7 @@
 
     > .ps-scrollbar-y-rail:hover {
       @include scrollbar-rail-hover($theme);
+      background: map_get($theme, bar-y-rail-hover-bg);
 
       > .ps-scrollbar-y {
         @include scrollbar-hover($theme);
diff --git a/src/scss/vendor/perfect-scrollbar/_themes.scss b/src/scss/vendor/perfect-scrollbar/_themes.scss
index bf7729a..e0d972a 100644
--- a/src/scss/vendor/perfect-scrollbar/_themes.scss
+++ b/src/scss/vendor/perfect-scrollbar/_themes.scss
@@ -4,16 +4,20 @@ $ps-theme-default: (
   rail-container-hover-opacity: $ps-rail-container-hover-opacity,
   rail-hover-opacity: $ps-rail-hover-opacity,
   bar-bg: $ps-bar-bg,
-  bar-container-hover-bg: $ps-bar-container-hover-bg,
   bar-hover-bg: $ps-bar-hover-bg,
-  rail-hover-bg: $ps-rail-hover-bg,
+  bar-x-rail-bg: $ps-bar-x-rail-bg,
+  bar-x-rail-hover-bg: $ps-bar-x-rail-hover-bg,
+  bar-y-rail-bg: $ps-bar-y-rail-bg,
+  bar-y-rail-hover-bg: $ps-bar-y-rail-hover-bg,
   scrollbar-x-rail-bottom: $ps-scrollbar-x-rail-bottom,
   scrollbar-x-rail-height: $ps-scrollbar-x-rail-height,
+  scrollbar-x-rail-hover-height: $ps-scrollbar-x-rail-hover-height,
   scrollbar-x-bottom: $ps-scrollbar-x-bottom,
   scrollbar-x-height: $ps-scrollbar-x-height,
   scrollbar-x-hover-height: $ps-scrollbar-x-hover-height,
   scrollbar-y-rail-right: $ps-scrollbar-y-rail-right,
   scrollbar-y-rail-width: $ps-scrollbar-y-rail-width,
+  scrollbar-y-rail-hover-width: $ps-scrollbar-y-rail-hover-width,
   scrollbar-y-right: $ps-scrollbar-y-right,
   scrollbar-y-width: $ps-scrollbar-y-width,
   scrollbar-y-hover-width: $ps-scrollbar-y-hover-width,
diff --git a/src/scss/vendor/perfect-scrollbar/_variables.scss b/src/scss/vendor/perfect-scrollbar/_variables.scss
index 7454fb0..2ad6964 100644
--- a/src/scss/vendor/perfect-scrollbar/_variables.scss
+++ b/src/scss/vendor/perfect-scrollbar/_variables.scss
@@ -1,24 +1,30 @@
 // Colors
-$ps-border-radius: 6px !default;
+$ps-border-radius: 0 !default;
 
-$ps-rail-default-opacity: 0 !default;
-$ps-rail-container-hover-opacity: 0.6 !default;
-$ps-rail-hover-opacity: 0.9 !default;
+$ps-rail-default-opacity: 1 !default;
+$ps-rail-container-hover-opacity: 1 !default;
+$ps-rail-hover-opacity: 1 !default;
 
-$ps-bar-bg: transparent !default;
-$ps-bar-container-hover-bg: #aaa !default;
-$ps-bar-hover-bg: #999 !default;
-$ps-rail-hover-bg: #eee !default;
+$ps-bar-bg: #AAA !default;
+$ps-bar-hover-bg: #AAA !default;
+
+$ps-bar-x-rail-bg: linear-gradient(180deg, transparent 50%, #EEE 50%) !default;
+$ps-bar-x-rail-hover-bg: linear-gradient(180deg, transparent 50%, #EEE 50%) !default;
+
+$ps-bar-y-rail-bg: linear-gradient(90deg, transparent 50%, #EEE 50%) !default;
+$ps-bar-y-rail-hover-bg: linear-gradient(90deg, transparent 50%, #EEE 50%) !default;
 
 // Sizes
-$ps-scrollbar-x-rail-bottom: 0px !default;
-$ps-scrollbar-x-rail-height: 15px !default;
-$ps-scrollbar-x-bottom: 2px !default;
-$ps-scrollbar-x-height: 6px !default;
-$ps-scrollbar-x-hover-height: 11px !default;
+$ps-scrollbar-x-rail-bottom: 0 !default;
+$ps-scrollbar-x-rail-height: 8px !default;
+$ps-scrollbar-x-rail-hover-height: 16px !default;
+$ps-scrollbar-x-bottom: 0 !default;
+$ps-scrollbar-x-height: 4px !default;
+$ps-scrollbar-x-hover-height: 8px !default;
 
 $ps-scrollbar-y-rail-right: 0 !default;
-$ps-scrollbar-y-rail-width: 15px !default;
-$ps-scrollbar-y-right: 2px !default;
-$ps-scrollbar-y-width: 6px !default;
-$ps-scrollbar-y-hover-width: 11px !default;
+$ps-scrollbar-y-rail-width: 8px !default;
+$ps-scrollbar-y-rail-hover-width: 16px !default;
+$ps-scrollbar-y-right: 0 !default;
+$ps-scrollbar-y-width: 4px !default;
+$ps-scrollbar-y-hover-width: 8px !default;