assets/scss/components/_scroll.scss

/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar{
   width: .6rem;
   border-radius: .5rem;
   background-color: hsl(230, 16%, 85%);
   
   &-thumb{
      background-color: hsl(230, 16%, 65%);
      border-radius: .5rem;

      &:hover{
         background-color: hsl(230, 16%, 55%);
      }
   }
}

/*=============== SCROLL UP ===============*/
.scrollup {
   position: fixed;
   right: 1rem;
   bottom: -50%;
   background-color: var(--container-color);
   box-shadow: 0 2px 8px hsla(0, 0%, 0%, .1);
   display: inline-flex;
   padding: 6px;
   font-size: 1.25rem;
   color: var(--title-color);
   z-index: var(--z-tooltip);
   transition: bottom .4s, transform .4s, background-color .4s;

   &:hover{
      transform: translateY(-.5rem);
   }
}

/* Show Scroll Up */
.show-scroll{
   bottom: 6rem;
}