import {css} from 'styled-components'
import _get from 'lodash/get'

import {shadeColor, theme} from '../utilStyles'

export const StyledScrollbar = css`
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: ${({theme}) => shadeColor(_get(theme, 'colors.text'), 2)};

    &:hover {
      background-color: ${theme.color('secondary')};
    }
  }
  scrollbar-color: ${theme.color('text')} transparent; // Firefox workaround
  scrollbar-width: thin;
`

@@ -84,15 +84,8 @@
 olor
-, theme
 %7D fr
@@ -175,17 +175,17 @@
  width: 
-7
+6
 px;%0A    
@@ -196,9 +196,9 @@
 ht: 
-7
+6
 px;%0A
@@ -304,17 +304,18 @@
 ors.
-text
+paper
 '), 
-2
+4
 )%7D;%0A
@@ -359,31 +359,61 @@
 : $%7B
+(%7B
 theme
-.color('secondary'
+%7D) =%3E shadeColor(_get(theme, 'colors.text'), 5
 )%7D;%0A
@@ -447,26 +447,62 @@
 : $%7B
+(%7B
 theme
-.color('text'
+%7D) =%3E shadeColor(_get(theme, 'colors.paper'), 4
 )%7D t

change scrollbar color