@import "tailwindcss";

@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .seg-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(113, 113, 122, 0.22) transparent;
  }

  .seg-scrollbar:hover,
  .seg-scrollbar:focus-within {
    scrollbar-color: rgba(34, 211, 238, 0.42) transparent;
  }

  .seg-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .seg-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }

  .seg-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(113, 113, 122, 0.18);
    border: 2px solid transparent;
    border-radius: 9999px;
    background-clip: content-box;
  }

  .seg-scrollbar:hover::-webkit-scrollbar-thumb,
  .seg-scrollbar:focus-within::-webkit-scrollbar-thumb {
    background-color: rgba(34, 211, 238, 0.42);
  }

  .seg-scrollbar::-webkit-scrollbar-corner {
    background: transparent;
  }
}
