@layer utilities {
    .tw-scrollbars-thin {
      /* firefox scrollbars */
      scrollbar-width: thin;
      scrollbar-color: theme('colors.gray-5') transparent;
    }

    .tw-scrollbars-thin::-webkit-scrollbar-track {
      @apply tw-bg-transparent;
    }
  
    .tw-scrollbars-thin::-webkit-scrollbar {
      @apply tw-w-2.5 tw-h-2.5 tw-bg-transparent;
    }
  
    .tw-scrollbars-thin::-webkit-scrollbar-thumb {
      @apply tw-rounded-full tw-bg-gray-6 
        tw-border-solid tw-border-transparent tw-bg-clip-padding;
    }
  
    .tw-scrollbars-thin::-webkit-scrollbar-thumb:hover {
      @apply tw-bg-gray-5;
    }
  
    .tw-scrollbars-thin::-webkit-scrollbar-thumb:active {
      @apply tw-bg-gray-7;
    }
  
    .tw-scrollbars-thin::-webkit-scrollbar-corner {
      @apply tw-bg-transparent;
    }


    .tw-scrollbars-wide {
      /* firefox scrollbars */
      scrollbar-width: auto;
      scrollbar-color: theme('colors.gray-5') transparent;
    }

    .tw-scrollbars-wide::-webkit-scrollbar-track {
      @apply tw-bg-transparent;
    }
  
    .tw-scrollbars-wide::-webkit-scrollbar {
      @apply tw-w-3 tw-h-3 tw-bg-transparent;
    }
  
    .tw-scrollbars-wide::-webkit-scrollbar-thumb {
      @apply tw-rounded-full tw-bg-gray-6 
        tw-border-solid tw-border-transparent tw-bg-clip-padding tw-w-3;
    }
  
    .tw-scrollbars-wide::-webkit-scrollbar-thumb:hover {
      @apply tw-bg-gray-5;
    }
  
    .tw-scrollbars-wide::-webkit-scrollbar-thumb:active {
      @apply tw-bg-gray-7;
    }
  
    .tw-scrollbars-wide::-webkit-scrollbar-corner {
      @apply tw-bg-transparent;
    }
}
