import { css } from 'styled-components/macro'
import { devices } from 'config/devices'

export const customScrollbar = css`
  ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background: #3F3F3F;

    @media ${devices.tablet} {
      background-color: rgba(255, 255, 255, 0.5);
    }
  }

  ::-webkit-scrollbar-button {
    display: none;
  }

  ::-webkit-scrollbar-track,
  ::-webkit-scrollbar-corner  {
    background: transparent;
  }
  
  // firefox поддерживает только эти 2 параметра
  scrollbar-color: #3F3F3F transparent;
  scrollbar-width: thin;
`
