pro/src/hooks/useScrollStyle.ts

import { css } from '@/theme'

export const useScrollStyle = () => {


  const scrollbar = css`
    &::-webkit-scrollbar {
      //width: 6px;
      //height: 6px;
      //background-color: rgb(252, 252, 252);

      width: 9px;
      height: 9px;

    }

    &::-webkit-scrollbar-track {
      //box-shadow: inset 0 0 6px rgba(173, 173, 173, 0.15);
      //border-radius: 10px;
      //background-color: #fcfcfc;

      border-radius: 8px;
      background-color: transparent;

      &:hover {
        background-color: rgba(0, 0, 0, .06);
        -webkit-box-shadow: -1px 0 0 #fff inset, 1px 0 0 hsla(0, 0%, 100%, .9) inset, 0 -1px 0 hsla(0, 0%, 100%, .9) inset, 0 1px 0 hsla(0, 0%, 100%, .9) inset

      }

      &:active {
        background-color: rgba(0, 0, 0, .1)
      }

    }

    &::-webkit-scrollbar-thumb {

      //height: 20px;
      //border-radius: 10px;
      //box-shadow: inset 0 0 6px rgba(0, 0, 0, .12);
      //background-color: #cbcbcb;

      border-radius: 8px;
      background-color: rgba(0, 0, 0, .1);
      -webkit-box-shadow: -2px 0 0 #fff inset, 1px 0 0 #fff inset, 0 -1px 0 hsl(0deg 0% 100% / 90%) inset, 0 1px 0 hsl(0deg 0% 100% / 90%) inset;

      &:hover {
        background-color: rgba(0, 0, 0, .4)
      }

      &:active {
        background: rgba(0, 0, 0, .6)
      }
    }
  `

  const scrollbarBackground = css`
    background: linear-gradient(#fff 30%, hsla(0, 0%, 100%, 0)),
    linear-gradient(hsla(0, 0%, 100%, 0), #fff 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .1), transparent),
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .1), transparent) 0 100%;
    background-repeat: no-repeat;
    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
    background-attachment: local, local, scroll, scroll;

    ${scrollbar.toString()}

  `


  return {
    scrollbarBackground,
    scrollbar,
  }
}