import { css } from "lit";

export const customScroll = css`
  .custom-scroll {
    overflow: auto !important;
    overflow-y: overlay !important;
  }

  @media (hover: hover) {
    .custom-scroll::-webkit-scrollbar {
      width: 0.5rem;
      height: 0.5rem;
      border: solid 0.15rem transparent;
      border-radius: var(--sc-rounded);
      background: transparent;
    }

    .custom-scroll::-webkit-scrollbar-thumb {
      box-shadow: inset 0 0 2rem 2rem
        var(--sc-scrollbar-bg, var(--sc-base-400, var(--sc-base-content, #000)));
      border-radius: var(--sc-rounded);
      border: solid 0.15rem transparent;
    }
  }
`;