Import locomotive scroll CSS / Removed unused styles (scroll, scorllbar) / Update DOM Markup / Update doc

assets/styles/components/_scrollbar.scss

@@ -1,38 +0,0 @@
-// ==========================================================================
-// Components / Scrollbar
-// ==========================================================================
-
-.c-scrollbar {
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 11px;
-    height: 100vh;
-    transform-origin: center right;
-    transition: transform 0.3s, opacity 0.3s;
-    opacity: 0;
-
-    &:hover {
-        transform: scaleX(1.45);
-    }
-
-    &:hover, .has-scroll-scrolling &, .has-scroll-dragging & {
-        opacity: 1;
-    }
-}
-
-.c-scrollbar_thumb {
-    position: absolute;
-    top: 0;
-    right: 0;
-    background-color: color(darkest);
-    opacity: 0.5;
-    width: 7px;
-    border-radius: 10px;
-    margin: 2px;
-    cursor: grab;
-
-    .has-scroll-dragging & {
-        cursor: grabbing;
-    }
-}

assets/styles/elements/_document.scss

@@ -51,25 +51,9 @@ html {
     &.is-loading {
         cursor: wait;
     }
-
-    &.has-scroll-smooth {
-        overflow: hidden;
-        position: fixed;
-        left: 0;
-        top: 0;
-        height: 100%;
-        width: 100%;
-    }
-
-    &.has-scroll-dragging {
-        user-select: none;
-    }
 }
 
 body {
-    .has-scroll-smooth & {
-        overflow: hidden;
-    }
 }
 
 ::selection {

assets/styles/main.scss

@@ -32,6 +32,10 @@
 @import "generic/form";
 @import "generic/button";
 
+// Vendors
+// ==========================================================================
+@import "vendors/locomotive-scroll";
+
 // Elements
 // ==========================================================================
 
@@ -40,7 +44,6 @@
 // Objects
 // ==========================================================================
 
-@import "objects/scroll";
 @import "objects/container";
 @import "objects/ratio";
 @import "objects/icons";
@@ -48,14 +51,9 @@
 // @import "objects/layout";
 // @import "objects/table";
 
-// Vendors
-// ==========================================================================
-// @import "vendors/vendor";
-
 // Components
 // ==========================================================================
 
-@import "components/scrollbar";
 @import "components/heading";
 @import "components/button";
 @import "components/form";

assets/styles/vendors/_locomotive-scroll.scss

@@ -1,7 +1,5 @@
 // ==========================================================================
-// Objects / Scroll
+// Vendors / Locomotive Scroll
 // ==========================================================================
 
-.o-scroll {
-    min-height: 100vh;
-}
+@import "node_modules/locomotive-scroll/bundled/locomotive-scroll";